Skip to content

Commit 2883f6e

Browse files
aferciagetdaveciampo
authored and
karthick-murugan
committed
Improve the link preview accessibility and labels. (WordPress#60908)
* Improve the link preview accessibility and labels. * Adjust test. * Update test by using ByRole queries. Co-authored-by: afercia <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: ciampo <[email protected]>
1 parent 371497e commit 2883f6e

File tree

2 files changed

+78
-32
lines changed

2 files changed

+78
-32
lines changed

‎packages/block-editor/src/components/link-control/link-preview.js‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import clsx from 'clsx';
66
/**
77
* WordPress dependencies
88
*/
9-
import { __, sprintf } from '@wordpress/i18n';
9+
import { __ } from '@wordpress/i18n';
1010
import {
1111
Button,
1212
ExternalLink,
@@ -96,7 +96,8 @@ export default function LinkPreview( {
9696

9797
return (
9898
<div
99-
aria-label={ __( 'Currently selected' ) }
99+
role="group"
100+
aria-label={ __( 'Manage link' ) }
100101
className={ clsx( 'block-editor-link-control__search-item', {
101102
'is-current': true,
102103
'is-rich': hasRichData,
@@ -107,7 +108,14 @@ export default function LinkPreview( {
107108
} ) }
108109
>
109110
<div className="block-editor-link-control__search-item-top">
110-
<span className="block-editor-link-control__search-item-header">
111+
<span
112+
className="block-editor-link-control__search-item-header"
113+
role="figure"
114+
aria-label={
115+
/* translators: Accessibility text for the link preview when editing a link. */
116+
__( 'Link information' )
117+
}
118+
>
111119
<span
112120
className={ clsx(
113121
'block-editor-link-control__search-item-icon',
@@ -149,26 +157,25 @@ export default function LinkPreview( {
149157
label={ __( 'Edit link' ) }
150158
onClick={ onEditClick }
151159
size="compact"
160+
showTooltip={ ! showIconLabels }
152161
/>
153162
{ hasUnlinkControl && (
154163
<Button
155164
icon={ linkOff }
156165
label={ __( 'Remove link' ) }
157166
onClick={ onRemove }
158167
size="compact"
168+
showTooltip={ ! showIconLabels }
159169
/>
160170
) }
161171
<Button
162172
icon={ copySmall }
163-
label={ sprintf(
164-
// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
165-
__( 'Copy link%s' ), // Ends up looking like "Copy link: https://example.com".
166-
isEmptyURL || showIconLabels ? '' : ': ' + value.url
167-
) }
173+
label={ __( 'Copy link' ) }
168174
ref={ ref }
169175
accessibleWhenDisabled
170176
disabled={ isEmptyURL }
171177
size="compact"
178+
showTooltip={ ! showIconLabels }
172179
/>
173180
<ViewerSlot fillProps={ value } />
174181
</div>

‎packages/block-editor/src/components/link-control/test/index.js‎

Lines changed: 63 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -373,7 +373,9 @@ describe( 'Basic rendering', () => {
373373
/>
374374
);
375375

376-
const linkPreview = screen.getByLabelText( 'Currently selected' );
376+
const linkPreview = screen.getByRole( 'group', {
377+
name: 'Manage link',
378+
} );
377379

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

835837
render( <LinkControlConsumer /> );
836838

837-
let linkPreview = screen.getByLabelText( 'Currently selected' );
839+
let linkPreview = screen.getByRole( 'group', {
840+
name: 'Manage link',
841+
} );
838842

839843
expect( linkPreview ).toBeInTheDocument();
840844

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

871-
linkPreview = screen.getByLabelText( 'Currently selected' );
875+
linkPreview = screen.getByRole( 'group', {
876+
name: 'Manage link',
877+
} );
872878

873879
expect( linkPreview ).toBeInTheDocument();
874880

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

10771083
// Click the "Edit/Change" button and check initial suggestions are not
10781084
// shown.
1079-
const currentLinkUI = screen.getByLabelText( 'Currently selected' );
1085+
const currentLinkUI = screen.getByRole( 'group', {
1086+
name: 'Manage link',
1087+
} );
10801088
const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
10811089
name: 'Edit link',
10821090
} );
@@ -1230,8 +1238,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
12301238

12311239
// Check for loading indicator.
12321240
const loadingIndicator = screen.getByText( 'Creating…' );
1233-
const currentLinkLabel =
1234-
screen.queryByLabelText( 'Currently selected' );
1241+
const currentLinkLabel = screen.queryByRole( 'group', {
1242+
name: 'Manage link',
1243+
} );
12351244

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

1245-
const currentLink =
1246-
await screen.findByLabelText( 'Currently selected' );
1254+
const currentLink = await screen.findByRole( 'group', {
1255+
name: 'Manage link',
1256+
} );
12471257

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

12921302
await user.click( createButton );
12931303

1294-
const currentLink = screen.getByLabelText( 'Currently selected' );
1304+
const currentLink = screen.getByRole( 'group', {
1305+
name: 'Manage link',
1306+
} );
12951307

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

13521364
expect(
1353-
await screen.findByLabelText( 'Currently selected' )
1365+
await screen.findByRole( 'group', {
1366+
name: 'Manage link',
1367+
} )
13541368
).toHaveTextContent( entityNameText );
13551369
} );
13561370

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

15301544
render( <LinkControlConsumer /> );
15311545

1532-
const currentLink = screen.getByLabelText( 'Currently selected' );
1546+
const currentLink = screen.getByRole( 'group', {
1547+
name: 'Manage link',
1548+
} );
15331549
const currentLinkAnchor = screen.getByRole( 'link', {
15341550
name: `${ selectedLink.title } (opens in a new tab)`,
15351551
} );
@@ -1559,7 +1575,9 @@ describe( 'Selecting links', () => {
15591575
render( <LinkControlConsumer /> );
15601576

15611577
// Required in order to select the button below.
1562-
let currentLinkUI = screen.getByLabelText( 'Currently selected' );
1578+
let currentLinkUI = screen.getByRole( 'group', {
1579+
name: 'Manage link',
1580+
} );
15631581
const currentLinkBtn = within( currentLinkUI ).getByRole( 'button', {
15641582
name: 'Edit link',
15651583
} );
@@ -1570,7 +1588,9 @@ describe( 'Selecting links', () => {
15701588
const searchInput = screen.getByRole( 'combobox', {
15711589
name: 'Search or type URL',
15721590
} );
1573-
currentLinkUI = screen.queryByLabelText( 'Currently selected' );
1591+
currentLinkUI = screen.queryByRole( 'group', {
1592+
name: 'Manage link',
1593+
} );
15741594

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

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

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

2130-
const linkPreview = screen.getByLabelText( 'Currently selected' );
2151+
const linkPreview = screen.getByRole( 'group', {
2152+
name: 'Manage link',
2153+
} );
21312154

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

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

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

2151-
const linkPreview = screen.getByLabelText( 'Currently selected' );
2174+
const linkPreview = screen.getByRole( 'group', {
2175+
name: 'Manage link',
2176+
} );
21522177

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

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

2168-
const linkPreview = screen.getByLabelText( 'Currently selected' );
2193+
const linkPreview = screen.getByRole( 'group', {
2194+
name: 'Manage link',
2195+
} );
21692196

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

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

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

2200-
const linkPreview = screen.getByLabelText( 'Currently selected' );
2227+
const linkPreview = screen.getByRole( 'group', {
2228+
name: 'Manage link',
2229+
} );
22012230

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

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

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

2224-
const linkPreview = screen.getByLabelText( 'Currently selected' );
2253+
const linkPreview = screen.getByRole( 'group', {
2254+
name: 'Manage link',
2255+
} );
22252256

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

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

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

2259-
const linkPreview = screen.getByLabelText( 'Currently selected' );
2290+
const linkPreview = screen.getByRole( 'group', {
2291+
name: 'Manage link',
2292+
} );
22602293

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

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

2284-
const linkPreview = screen.getByLabelText( 'Currently selected' );
2317+
const linkPreview = screen.getByRole( 'group', {
2318+
name: 'Manage link',
2319+
} );
22852320

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

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

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

2303-
const linkPreview = screen.getByLabelText( 'Currently selected' );
2338+
const linkPreview = screen.getByRole( 'group', {
2339+
name: 'Manage link',
2340+
} );
23042341

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

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

2316-
const linkPreview = screen.getByLabelText( 'Currently selected' );
2353+
const linkPreview = screen.getByRole( 'group', {
2354+
name: 'Manage link',
2355+
} );
23172356

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

0 commit comments

Comments
 (0)