Adds aria-label to links that open in new windows #11063
Conversation
…eLinkFormat function and addings some inline docs
| if ( opensInNewWindow ) { | ||
| format.attributes.target = '_blank'; | ||
| format.attributes.rel = 'noreferrer noopener'; | ||
| format.attributes[ 'aria-label' ] = `${ text } (opens in a new tab)`; |
|
@ocean90 I've updated the PR to address your feedback. Thanks for reviewing it ! |
adamsilverstein
added
the
[Focus] Accessibility (a11y)
| if ( opensInNewWindow ) { | ||
| format.attributes.target = '_blank'; | ||
| format.attributes.rel = 'noreferrer noopener'; | ||
| format.attributes[ 'aria-label' ] = `${ text } (${ __( 'opens in a new tab' ) })`; |
There was a problem hiding this comment.
This is still problematic from an i18n standpoint. Should be something like:
// translators: accessibility label for external links, where the argument is the link text
const label = sprintf( __( '%s (opens in a new tab)' ), text );
format.attributes[ 'aria-label' ] = label;Also note that an empty text leads to a label that starts with whitespace. Could be handled by calling String#trim: sprintf( … ).trim().
Edit: see i18n package.
There was a problem hiding this comment.
@mcsf How could the text be empty? How can you have a no text linked?
|
@mcsf I've updated the PR based on your input. Thanks for the direction! I've also made some changes to the |
|
As raised at #11815 (comment), it seems the |
|
I see no tests. 😕 |
Created issue at #12325 |
Description
Adds an aria-lablel to the generated link when it is set to open in new window. Fixes #4450
How has this been tested?
Tested in Chrome for Mac OS
Ran
npm run testTypes of changes
New feature (non-breaking change which adds functionality)
Checklist: