diff --git a/src/block-components/block-link/index.js b/src/block-components/block-link/index.js index da8d354dc8..c34725ea00 100644 --- a/src/block-components/block-link/index.js +++ b/src/block-components/block-link/index.js @@ -29,6 +29,7 @@ BlockLink.Content = props => { target={ attributes.blockLinkNewTab ? '_blank' : '' } rel={ attributes.blockLinkRel || undefined } title={ attributes.blockLinkTitle || undefined } + aria-label={ attributes.blockLinkAriaLabel || undefined } aria-hidden={ isHidden ? 'true' : undefined } tabindex={ isHidden ? '-1' : undefined } /> diff --git a/src/block-components/helpers/link/attributes.js b/src/block-components/helpers/link/attributes.js index 4a47452857..25dac23be8 100644 --- a/src/block-components/helpers/link/attributes.js +++ b/src/block-components/helpers/link/attributes.js @@ -50,4 +50,19 @@ export const addLinkAttributes = ( attrObject, attrNameTemplate = '%s', selector versionAdded: '3.0.0', versionDeprecated: '', } ) + + attrObject.add( { + attributes: { + ariaLabel: { + type: 'string', + source: 'attribute', + selector, + attribute: 'aria-label', + default: '', + }, + }, + attrNameTemplate, + versionAdded: '3.20.1', + versionDeprecated: '', + } ) } diff --git a/src/block-components/helpers/link/edit.js b/src/block-components/helpers/link/edit.js index 4274745cc6..552ea6f51b 100644 --- a/src/block-components/helpers/link/edit.js +++ b/src/block-components/helpers/link/edit.js @@ -29,6 +29,7 @@ export const LinkControls = props => { const hasLightboxAttr = useAttributeValue( 'hasLightbox', props.attrNameTemplate ) const rel = useAttributeValue( 'rel', props.attrNameTemplate ) const title = useAttributeValue( 'title', props.attrNameTemplate ) + const ariaLabel = useAttributeValue( 'ariaLabel', props.attrNameTemplate ) const hasTitleAttr = useAttributeValue( 'hasTitle', props.attrNameTemplate ) const showGoogleMapHint = hasLightboxAttr && @@ -76,6 +77,14 @@ export const LinkControls = props => { value={ rel } onChange={ updateAttributeHandler( 'rel' ) } /> + { ( hasTitle || hasTitleAttr ) && ( { target={ attributes.linkNewTab ? '_blank' : undefined } rel={ attributes.linkRel || undefined } title={ attributes.linkTitle || undefined } + aria-label={ attributes.linkAriaLabel || undefined } > { props.children } @@ -64,4 +65,3 @@ Link.Content = props => { Link.InspectorControls = Edit Link.addAttributes = addAttributes -