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
-