Skip to content

Commit

Permalink
Improve the link preview accessibility and labels. (WordPress#60908)
Browse files Browse the repository at this point in the history 
* Improve the link preview accessibility and labels.

* Adjust test.

* Update test by using ByRole queries.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
  • Loading branch information
@afercia @getdave
@ciampo @karthick-murugan
4 people authored and karthick-murugan committed Nov 13, 2024
1 parent 371497e commit 2883f6e
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 32 deletions.
23 changes: 15 additions & 8 deletions packages/block-editor/src/components/link-control/link-preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import clsx from 'clsx';
/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { __ } from '@wordpress/i18n';
import {
Button,
ExternalLink,
Expand Down Expand Up @@ -96,7 +96,8 @@ export default function LinkPreview( {

return (
<div
aria-label={ __( 'Currently selected' ) }
role="group"
aria-label={ __( 'Manage link' ) }
className={ clsx( 'block-editor-link-control__search-item', {
'is-current': true,
'is-rich': hasRichData,
Expand All @@ -107,7 +108,14 @@ export default function LinkPreview( {
} ) }
>
<div className="block-editor-link-control__search-item-top">
<span className="block-editor-link-control__search-item-header">
<span
className="block-editor-link-control__search-item-header"
role="figure"
aria-label={
/* translators: Accessibility text for the link preview when editing a link. */
__( 'Link information' )
}
>
<span
className={ clsx(
'block-editor-link-control__search-item-icon',
Expand Down Expand Up @@ -149,26 +157,25 @@ export default function LinkPreview( {
label={ __( 'Edit link' ) }
onClick={ onEditClick }
size="compact"
showTooltip={ ! showIconLabels }
/>
{ hasUnlinkControl && (
<Button
icon={ linkOff }
label={ __( 'Remove link' ) }
onClick={ onRemove }
size="compact"
showTooltip={ ! showIconLabels }
/>
) }
<Button
icon={ copySmall }
label={ sprintf(
// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
__( 'Copy link%s' ), // Ends up looking like "Copy link: https://example.com".
isEmptyURL || showIconLabels ? '' : ': ' + value.url
) }
label={ __( 'Copy link' ) }
ref={ ref }
accessibleWhenDisabled
disabled={ isEmptyURL }
size="compact"
showTooltip={ ! showIconLabels }
/>
<ViewerSlot fillProps={ value } />
</div>
Expand Down
87 changes: 63 additions & 24 deletions packages/block-editor/src/components/link-control/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,9 @@ describe( 'Basic rendering', () => {
/>
);

const linkPreview = screen.getByLabelText( 'Currently selected' );
const linkPreview = screen.getByRole( 'group', {
name: 'Manage link',
} );

const isPreviewError = linkPreview.classList.contains( 'is-error' );
expect( isPreviewError ).toBe( true );
Expand Down Expand Up @@ -834,7 +836,9 @@ describe( 'Manual link entry', () => {

render( <LinkControlConsumer /> );

let linkPreview = screen.getByLabelText( 'Currently selected' );
let linkPreview = screen.getByRole( 'group', {
name: 'Manage link',
} );

expect( linkPreview ).toBeInTheDocument();

Expand Down Expand Up @@ -868,7 +872,9 @@ describe( 'Manual link entry', () => {
// Cancel the editing process.
await user.click( cancelButton );

linkPreview = screen.getByLabelText( 'Currently selected' );
linkPreview = screen.getByRole( 'group', {
name: 'Manage link',
} );

expect( linkPreview ).toBeInTheDocument();

Expand Down Expand Up @@ -1076,7 +1082,9 @@ describe( 'Default search suggestions', () => {

// Click the "Edit/Change" button and check initial suggestions are not
// shown.
const currentLinkUI = screen.getByLabelText( 'Currently selected' );
const currentLinkUI = screen.getByRole( 'group', {
name: 'Manage link',
} );
const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
name: 'Edit link',
} );
Expand Down Expand Up @@ -1230,8 +1238,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {

// Check for loading indicator.
const loadingIndicator = screen.getByText( 'Creating…' );
const currentLinkLabel =
screen.queryByLabelText( 'Currently selected' );
const currentLinkLabel = screen.queryByRole( 'group', {
name: 'Manage link',
} );

expect( currentLinkLabel ).not.toBeInTheDocument();
expect( loadingIndicator ).toBeVisible();
Expand All @@ -1242,8 +1251,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
// Resolve the `createSuggestion` promise.
resolver();

const currentLink =
await screen.findByLabelText( 'Currently selected' );
const currentLink = await screen.findByRole( 'group', {
name: 'Manage link',
} );

expect( currentLink ).toHaveTextContent( entityNameText );
expect( currentLink ).toHaveTextContent( '/?p=123' );
Expand Down Expand Up @@ -1291,7 +1301,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {

await user.click( createButton );

const currentLink = screen.getByLabelText( 'Currently selected' );
const currentLink = screen.getByRole( 'group', {
name: 'Manage link',
} );

expect( currentLink ).toHaveTextContent( 'Some new page to create' );
expect( currentLink ).toHaveTextContent( '/?p=123' );
Expand Down Expand Up @@ -1350,7 +1362,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
triggerEnter( searchInput );

expect(
await screen.findByLabelText( 'Currently selected' )
await screen.findByRole( 'group', {
name: 'Manage link',
} )
).toHaveTextContent( entityNameText );
} );

Expand Down Expand Up @@ -1529,7 +1543,9 @@ describe( 'Selecting links', () => {

render( <LinkControlConsumer /> );

const currentLink = screen.getByLabelText( 'Currently selected' );
const currentLink = screen.getByRole( 'group', {
name: 'Manage link',
} );
const currentLinkAnchor = screen.getByRole( 'link', {
name: `${ selectedLink.title } (opens in a new tab)`,
} );
Expand Down Expand Up @@ -1559,7 +1575,9 @@ describe( 'Selecting links', () => {
render( <LinkControlConsumer /> );

// Required in order to select the button below.
let currentLinkUI = screen.getByLabelText( 'Currently selected' );
let currentLinkUI = screen.getByRole( 'group', {
name: 'Manage link',
} );
const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
name: 'Edit link',
} );
Expand All @@ -1570,7 +1588,9 @@ describe( 'Selecting links', () => {
const searchInput = screen.getByRole( 'combobox', {
name: 'Search or type URL',
} );
currentLinkUI = screen.queryByLabelText( 'Currently selected' );
currentLinkUI = screen.queryByRole( 'group', {
name: 'Manage link',
} );

// We should be back to showing the search input.
expect( searchInput ).toBeVisible();
Expand Down Expand Up @@ -1733,8 +1753,9 @@ describe( 'Selecting links', () => {
triggerEnter( searchInput );

// Check that the suggestion selected via is now shown as selected.
const currentLink =
screen.getByLabelText( 'Currently selected' );
const currentLink = screen.getByRole( 'group', {
name: 'Manage link',
} );
const currentLinkAnchor = screen.getByRole( 'link', {
name: `${ selectedLink.title } (opens in a new tab)`,
} );
Expand Down Expand Up @@ -2127,7 +2148,9 @@ describe( 'Rich link previews', () => {

render( <LinkControl value={ selectedLink } /> );

const linkPreview = screen.getByLabelText( 'Currently selected' );
const linkPreview = screen.getByRole( 'group', {
name: 'Manage link',
} );

const isRichLinkPreview = linkPreview.classList.contains( 'is-rich' );

Expand All @@ -2148,7 +2171,9 @@ describe( 'Rich link previews', () => {

render( <LinkControl value={ selectedLink } hasRichPreviews /> );

const linkPreview = screen.getByLabelText( 'Currently selected' );
const linkPreview = screen.getByRole( 'group', {
name: 'Manage link',
} );

await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );
} );
Expand All @@ -2165,7 +2190,9 @@ describe( 'Rich link previews', () => {

render( <LinkControl value={ selectedLink } hasRichPreviews /> );

const linkPreview = screen.getByLabelText( 'Currently selected' );
const linkPreview = screen.getByRole( 'group', {
name: 'Manage link',
} );

await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );

Expand Down Expand Up @@ -2197,7 +2224,9 @@ describe( 'Rich link previews', () => {

render( <LinkControl value={ selectedLink } hasRichPreviews /> );

const linkPreview = screen.getByLabelText( 'Currently selected' );
const linkPreview = screen.getByRole( 'group', {
name: 'Manage link',
} );

await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );

Expand All @@ -2221,7 +2250,9 @@ describe( 'Rich link previews', () => {

render( <LinkControl value={ selectedLink } hasRichPreviews /> );

const linkPreview = screen.getByLabelText( 'Currently selected' );
const linkPreview = screen.getByRole( 'group', {
name: 'Manage link',
} );

await waitFor( () => expect( linkPreview ).toHaveClass( 'is-rich' ) );

Expand Down Expand Up @@ -2256,7 +2287,9 @@ describe( 'Rich link previews', () => {

render( <LinkControl value={ selectedLink } hasRichPreviews /> );

const linkPreview = screen.getByLabelText( 'Currently selected' );
const linkPreview = screen.getByRole( 'group', {
name: 'Manage link',
} );

await waitFor( () =>
expect( linkPreview ).toHaveClass( 'is-rich' )
Expand All @@ -2281,7 +2314,9 @@ describe( 'Rich link previews', () => {

render( <LinkControl value={ selectedLink } hasRichPreviews /> );

const linkPreview = screen.getByLabelText( 'Currently selected' );
const linkPreview = screen.getByRole( 'group', {
name: 'Manage link',
} );

expect( linkPreview ).toHaveClass( 'is-fetching' );

Expand All @@ -2300,7 +2335,9 @@ describe( 'Rich link previews', () => {

render( <LinkControl value={ selectedLink } hasRichPreviews /> );

const linkPreview = screen.getByLabelText( 'Currently selected' );
const linkPreview = screen.getByRole( 'group', {
name: 'Manage link',
} );

expect( linkPreview ).toHaveClass( 'is-fetching' );
expect( linkPreview ).not.toHaveClass( 'is-rich' );
Expand All @@ -2313,7 +2350,9 @@ describe( 'Rich link previews', () => {

render( <LinkControl value={ selectedLink } hasRichPreviews /> );

const linkPreview = screen.getByLabelText( 'Currently selected' );
const linkPreview = screen.getByRole( 'group', {
name: 'Manage link',
} );

expect( linkPreview ).toHaveClass( 'is-fetching' );

Expand Down

0 comments on commit 2883f6e

Please sign in to comment.