Skip to content

Commit

Permalink
Improve the link preview accessibility and labels.
Browse files Browse the repository at this point in the history
  • Loading branch information
afercia committed Oct 24, 2024
1 parent 67fca2e commit 8b838e9
Showing 1 changed file with 15 additions and 8 deletions.
23 changes: 15 additions & 8 deletions packages/block-editor/src/components/link-control/link-preview.js
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

0 comments on commit 8b838e9

Please sign in to comment.