From 7850e1d162e0c8ac9f212d286d79a5d8e8a765d6 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Mon, 13 Jan 2025 14:42:07 +0530 Subject: [PATCH 1/7] Navigation Link: Replace missing link tooltip with ARIA label --- packages/block-library/src/navigation-link/edit.js | 11 ++++++----- .../block-library/src/navigation-link/editor.scss | 2 +- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 8ff438dc20abef..d0551ca331a06e 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -532,11 +532,12 @@ export default function NavigationLinkEdit( { { /* eslint-enable */ } { ! url ? ( -
- - { missingText } - -
+ + { missingText } + ) : ( <> { ! isInvalid && diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 84cd6f6d4ee363..4fa94eeaaa80f5 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -80,7 +80,7 @@ background-image: none !important; // Draw a wavy underline. - .wp-block-navigation-link__placeholder-text span { + .wp-block-navigation-link__placeholder-text { $blur: 10%; $width: 6%; $stop1: 30%; From 1bc424d789ce4ee1db68c54a19e573553d86cfb8 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Tue, 14 Jan 2025 13:54:59 +0530 Subject: [PATCH 2/7] Navigation Link: Improve accessibility by removing tooltip in favor of visual states --- .../block-library/src/navigation-link/edit.js | 60 ++++++++++--------- .../src/navigation-link/editor.scss | 10 ++++ 2 files changed, 43 insertions(+), 27 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index d0551ca331a06e..3c567d2fe2ce75 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -14,11 +14,10 @@ import { TextControl, TextareaControl, ToolbarButton, - Tooltip, ToolbarGroup, } from '@wordpress/components'; import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { BlockControls, InspectorControls, @@ -490,10 +489,6 @@ export default function NavigationLinkEdit( { const placeholderText = `(${ isInvalid ? __( 'Invalid' ) : __( 'Draft' ) })`; - const tooltipText = - isInvalid || isDraft - ? __( 'This item has been deleted, or is a draft' ) - : __( 'This item is missing a link' ); return ( <> @@ -579,27 +574,38 @@ export default function NavigationLinkEdit( { { ( isInvalid || isDraft || isLabelFieldFocused ) && ( -
- - - { - // Some attributes are stored in an escaped form. It's a legacy issue. - // Ideally they would be stored in a raw, unescaped form. - // Unescape is used here to "recover" the escaped characters - // so they display without encoding. - // See `updateAttributes` for more details. - `${ decodeEntities( label ) } ${ - isInvalid || isDraft - ? placeholderText - : '' - }`.trim() - } - - +
+ + { + // Some attributes are stored in an escaped form. It's a legacy issue. + // Ideally they would be stored in a raw, unescaped form. + // Unescape is used here to "recover" the escaped characters + // so they display without encoding. + // See `updateAttributes` for more details. + `${ decodeEntities( label ) } ${ + isInvalid || isDraft + ? placeholderText + : '' + }`.trim() + } +
) } diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 4fa94eeaaa80f5..761f04a9e77ba0 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -61,6 +61,16 @@ margin-bottom: $grid-unit-20; margin-left: $grid-unit-20; } + + .wp-block-navigation-link__placeholder-text { + &.is-invalid { + --wp-underline-color: var(--wp--preset--color--vivid-red); + } + + &.is-draft { + --wp-underline-color: var(--wp--preset--color--luminous-vivid-amber); + } + } } .wp-block-navigation-link__invalid-item { From b4a0aa60441d8c74a8d5c4d32e2c0ed2b9eae17c Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Fri, 17 Jan 2025 12:40:14 +0530 Subject: [PATCH 3/7] Navigation Link Block: Remove redundant aria-labels --- .../block-library/src/navigation-link/edit.js | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 3c567d2fe2ce75..9456adbc4baa97 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -17,7 +17,7 @@ import { ToolbarGroup, } from '@wordpress/components'; import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes'; -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { BlockControls, InspectorControls, @@ -527,10 +527,7 @@ export default function NavigationLinkEdit( { { /* eslint-enable */ } { ! url ? ( - + { missingText } ) : ( @@ -584,15 +581,7 @@ export default function NavigationLinkEdit( { } ) } > - + { // Some attributes are stored in an escaped form. It's a legacy issue. // Ideally they would be stored in a raw, unescaped form. From b14a7318a4d76b539db0150cbfd59916b461c018 Mon Sep 17 00:00:00 2001 From: himanshupathak95 Date: Mon, 27 Jan 2025 13:39:20 +0530 Subject: [PATCH 4/7] Navigation Link Block: Change the draft underline color from amber to red --- packages/block-library/src/navigation-link/editor.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 761f04a9e77ba0..d83e93e3221d22 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -63,12 +63,9 @@ } .wp-block-navigation-link__placeholder-text { - &.is-invalid { - --wp-underline-color: var(--wp--preset--color--vivid-red); - } - + &.is-invalid, &.is-draft { - --wp-underline-color: var(--wp--preset--color--luminous-vivid-amber); + --wp-underline-color: var(--wp--preset--color--vivid-red); } } } From d2304ace8c43f0ef229d6ea62a5d8e29cb595d43 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 28 Jan 2025 13:22:24 +0100 Subject: [PATCH 5/7] Restore original markup and span element. --- packages/block-library/src/navigation-link/edit.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 9456adbc4baa97..11a281a44a76d7 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -527,9 +527,9 @@ export default function NavigationLinkEdit( { { /* eslint-enable */ } { ! url ? ( - - { missingText } - +
+ { missingText } +
) : ( <> { ! isInvalid && From 60880d6adeb2d067fc47b05acae6f25618595282 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 28 Jan 2025 13:23:51 +0100 Subject: [PATCH 6/7] Adjust CSS. --- .../src/navigation-link/editor.scss | 51 ++++++++++--------- 1 file changed, 27 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index d83e93e3221d22..c575bab3755e16 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -61,13 +61,6 @@ margin-bottom: $grid-unit-20; margin-left: $grid-unit-20; } - - .wp-block-navigation-link__placeholder-text { - &.is-invalid, - &.is-draft { - --wp-underline-color: var(--wp--preset--color--vivid-red); - } - } } .wp-block-navigation-link__invalid-item { @@ -88,23 +81,33 @@ // Draw a wavy underline. .wp-block-navigation-link__placeholder-text { - $blur: 10%; - $width: 6%; - $stop1: 30%; - $stop2: 64%; - - --wp-underline-color: var(--wp-admin-theme-color); - - background-image: - linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)), - linear-gradient(135deg, transparent ($stop2 - $blur), var(--wp-underline-color) $stop2, var(--wp-underline-color) ($stop2 + $width), transparent ($stop2 + $width + $blur)); - background-position: 0 100%; - background-size: 6px 3px; - background-repeat: repeat-x; - - // Since applied to a span, it doesn't change the footprint of the item, - // but it does vertically shift the underline to better align. - padding-bottom: 0.1em; + span { + $blur: 10%; + $width: 6%; + $stop1: 30%; + $stop2: 64%; + + --wp-underline-color: var(--wp-admin-theme-color); + + background-image: + linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)), + linear-gradient(135deg, transparent ($stop2 - $blur), var(--wp-underline-color) $stop2, var(--wp-underline-color) ($stop2 + $width), transparent ($stop2 + $width + $blur)); + background-position: 0 100%; + background-size: 6px 3px; + background-repeat: repeat-x; + + // Since applied to a span, it doesn't change the footprint of the item, + // but it does vertically shift the underline to better align. + padding-bottom: 0.1em; + } + + + &.is-invalid, + &.is-draft { + span { + --wp-underline-color: var(--wp--preset--color--vivid-red); + } + } } // This needs extra specificity. From 5cf51116f0aea62d15bf24dca6e5fea5fb4d2789 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 29 Jan 2025 11:13:54 +0100 Subject: [PATCH 7/7] Remove extra line. --- packages/block-library/src/navigation-link/editor.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index c575bab3755e16..c48af79385c47f 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -101,7 +101,6 @@ padding-bottom: 0.1em; } - &.is-invalid, &.is-draft { span {