From 16a9c612cc5dd4f7481efe1f222d02d10cc746cb Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 30 Aug 2023 09:20:39 +0100 Subject: [PATCH 1/9] Use dialog role and aria attributes --- .../src/components/link-control/index.js | 100 ++++++++++++------ 1 file changed, 68 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index c25ed5cd1187a8..469d881340ef5e 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -6,7 +6,13 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { Button, Spinner, Notice, TextControl } from '@wordpress/components'; +import { + Button, + Spinner, + Notice, + TextControl, + VisuallyHidden, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useRef, useState, useEffect } from '@wordpress/element'; import { focus } from '@wordpress/dom'; @@ -15,6 +21,7 @@ import { isShallowEqualObjects } from '@wordpress/is-shallow-equal'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as preferencesStore } from '@wordpress/preferences'; import { keyboardReturn } from '@wordpress/icons'; +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -338,20 +345,41 @@ function LinkControl( { const isDisabled = ! valueHasChanges || currentInputIsEmpty; const showSettings = !! settings?.length && isEditingLink && hasLinkValue; + const dialogTitleId = useInstanceId( + LinkControl, + `block-editor-link-control___title` + ); + const dialogDescritionId = useInstanceId( + LinkControl, + `block-editor-link-control___description` + ); + return (
+ +

Link

+ + { isCreatingPage && (
- { __( 'Creating' ) }… + + { __( 'Creating' ) }…
) } { isEditing && ( <> + +

+ { __( 'Editing the link.' ) } +

+
setIsEditingLink( true ) } - hasRichPreviews={ hasRichPreviews } - hasUnlinkControl={ shownUnlinkControl } - additionalControls={ () => { - // Expose the "Opens in new tab" settings in the preview - // as it is the most common setting to change. - if ( - settings?.find( - ( setting ) => setting.id === 'opensInNewTab' - ) - ) { - return ( - id === 'opensInNewTab' - ) } - onChange={ onChange } - /> - ); - } - } } - onRemove={ () => { - onRemove(); - setIsEditingLink( true ); - } } - /> + <> + +

+ { __( 'Previewing the currently selected link.' ) } +

+ + setIsEditingLink( true ) } + hasRichPreviews={ hasRichPreviews } + hasUnlinkControl={ shownUnlinkControl } + additionalControls={ () => { + // Expose the "Opens in new tab" settings in the preview + // as it is the most common setting to change. + if ( + settings?.find( + ( setting ) => + setting.id === 'opensInNewTab' + ) + ) { + return ( + id === 'opensInNewTab' + ) } + onChange={ onChange } + /> + ); + } + } } + onRemove={ () => { + onRemove(); + setIsEditingLink( true ); + } } + /> + ) } { showSettings && ( From bfecb9aa07db6fb68f90765ba9f5f0f89cfc1280 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 30 Aug 2023 09:21:44 +0100 Subject: [PATCH 2/9] Use dialog role where used within popover --- packages/block-library/src/navigation-link/link-ui.js | 1 + packages/format-library/src/link/inline.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js index 3a7b7d28f9e800..6d32eecd0133f1 100644 --- a/packages/block-library/src/navigation-link/link-ui.js +++ b/packages/block-library/src/navigation-link/link-ui.js @@ -180,6 +180,7 @@ export function LinkUI( props ) { return ( Date: Wed, 30 Aug 2023 09:25:19 +0100 Subject: [PATCH 3/9] Announce creation of Page entity --- packages/block-library/src/navigation-link/link-ui.js | 9 +++++++++ packages/format-library/src/link/inline.js | 8 ++++++++ 2 files changed, 17 insertions(+) diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js index 6d32eecd0133f1..4bea441d49b32a 100644 --- a/packages/block-library/src/navigation-link/link-ui.js +++ b/packages/block-library/src/navigation-link/link-ui.js @@ -4,6 +4,7 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; import { Popover, Button } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; +import { speak } from '@wordpress/a11y'; import { __experimentalLinkControl as LinkControl, BlockIcon, @@ -139,6 +140,14 @@ export function LinkUI( props ) { status: 'draft', } ); + speak( + sprintf( + /* translators: %s: title of the page that has been created. */ + __( 'Draft Page "%s" created.' ), + pageTitle + ) + ); + return { id: page.id, type: postType, diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index b07a42a73a3a18..14818070c852f6 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.js @@ -220,6 +220,14 @@ function InlineLinkUI( { status: 'draft', } ); + speak( + sprintf( + /* translators: %s: title of the page that has been created. */ + __( 'Draft Page "%s" created.' ), + pageTitle + ) + ); + return { id: page.id, type: page.type, From d9072826e0e9b1045a4fa32ee7eb5d12b9ca1b28 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 30 Aug 2023 15:20:56 +0100 Subject: [PATCH 4/9] Use definition list for preview markup --- .../components/link-control/link-preview.js | 45 ++++++++++++------- .../src/components/link-control/style.scss | 10 +++++ 2 files changed, 40 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js index 8272602cde908d..c9fc88fe9a1d1e 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -10,6 +10,7 @@ import { __ } from '@wordpress/i18n'; import { Button, ExternalLink, + VisuallyHidden, __experimentalText as Text, } from '@wordpress/components'; import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url'; @@ -20,7 +21,6 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom'; * Internal dependencies */ import { ViewerSlot } from './viewer-slot'; - import useRichUrlData from './use-rich-url-data'; export default function LinkPreview( { @@ -84,28 +84,43 @@ export default function LinkPreview( { > { icon } - +
{ ! isEmptyURL ? ( <> - - { displayTitle } - + +
Link title
+ +
+ + { displayTitle } + +
{ value?.url && displayTitle !== displayURL && ( - - { displayURL } - + <> + +
Link URL
+ +
+ { displayURL } +
+ ) } ) : ( - - { __( 'Link is empty' ) } - + <> + +
Link value
+ +
+ { __( 'Link is empty' ) } +
+ ) } - +
+ +
+ ) } ) } - { value && ! isEditingLink && ! isCreatingPage && ( + { isPreviewing && ( <>

@@ -496,41 +534,6 @@ function LinkControl( { ) } - { showSettings && ( -

- { ! currentInputIsEmpty && ( - - - - ) } -
- ) } - - { showActions && ( -
- - -
- ) } - { renderControlBottom && renderControlBottom() }
); From 402aba57a519998a9e7d14135e19bea41bbbd3e4 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 7 Sep 2023 09:55:44 +0100 Subject: [PATCH 7/9] Make component hidden title conditional based on mode --- packages/block-editor/src/components/link-control/index.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index ff1fa246c61435..c2593ab135b0d5 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -376,10 +376,6 @@ function LinkControl( { aria-labelledby={ dialogTitleId } aria-describedby={ dialogDescritionId } > - -

Link

- - { isCreatingPage && (
@@ -390,6 +386,8 @@ function LinkControl( { { isEditing && ( <> +

{ __( 'Edit Link' ) }

+

{ __( 'Editing the link.' ) }

@@ -496,6 +494,7 @@ function LinkControl( { { isPreviewing && ( <> +

{ __( 'Preview Link' ) }

{ __( 'Previewing the currently selected link.' ) }

From 350d96e07bfe27ceee940b55575a7d838d276466 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 7 Sep 2023 10:00:47 +0100 Subject: [PATCH 8/9] Make edit wording contional on whether creating or editing the link --- .../src/components/link-control/index.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index c2593ab135b0d5..6c82be34ba39fd 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -13,7 +13,7 @@ import { TextControl, VisuallyHidden, } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { useRef, useState, useEffect } from '@wordpress/element'; import { focus } from '@wordpress/dom'; import { ENTER } from '@wordpress/keycodes'; @@ -355,6 +355,7 @@ function LinkControl( { const showTextControl = hasLinkValue && hasTextControl; const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage; + const isCreating = isEditingLink && ! value && ! isCreatingPage; const isDisabled = ! valueHasChanges || currentInputIsEmpty; const showSettings = !! settings?.length && isEditingLink && hasLinkValue; @@ -386,10 +387,20 @@ function LinkControl( { { isEditing && ( <> -

{ __( 'Edit Link' ) }

+

+ { sprintf( + // translators: %s: action name for the link mode (edit or create). + __( '%s Link' ), + isCreating ? __( 'Create' ) : __( 'Edit' ) + ) } +

- { __( 'Editing the link.' ) } + { sprintf( + // translators: %s: action name for the link action (edit or create). + __( '%s the link' ), + isCreating ? __( 'Creating' ) : __( 'Editing' ) + ) }

Date: Thu, 7 Sep 2023 10:06:29 +0100 Subject: [PATCH 9/9] Wording --- packages/block-editor/src/components/link-control/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 6c82be34ba39fd..412e10fa4d89b1 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -224,7 +224,7 @@ function LinkControl( { return; } - // Do not announcement automattic mode state change + // Do not announcement automatic mode state change // via speak(). setIsEditingLink( forceIsEditingLink ); }, [ forceIsEditingLink ] );