Give editable fields in blocks better aria-labels. (#26582)

* Give editable fields in blocks better aria-labels. * Apply suggestions from code review Co-authored-by: Greg Ziółkowski <[email protected]> Co-authored-by: Greg Ziółkowski <[email protected]>
WordPress · Dec 3, 2020 · f3c5385 · f3c5385
1 parent 1c53391
commit f3c5385
Show file tree

Hide file tree

Showing 22 changed files with 42 additions and 5 deletions.
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -186,6 +186,7 @@ function AudioEdit( {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
+						aria-label={ __( 'Audio caption text' ) }
 						placeholder={ __( 'Write caption…' ) }
 						value={ caption }
 						onChange={ ( value ) =>

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -241,6 +241,7 @@ function ButtonEdit( props ) {
 				} ) }
 			>
 				<RichText
+					aria-label={ __( 'Button text' ) }
 					placeholder={ placeholder || __( 'Add text…' ) }
 					value={ text }
 					onChange={ ( value ) => setAttributes( { text: value } ) }

diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -205,6 +205,7 @@ function FileEdit( { attributes, setAttributes, noticeUI, noticeOperations } ) {
 							{ /* Using RichText here instead of PlainText so that it can be styled like a button */ }
 							<RichText
 								tagName="div" // must be block-level or else cursor disappears
+								aria-label={ __( 'Download button text' ) }
 								className={ 'wp-block-file__button' }
 								value={ downloadButtonText }
 								withoutInteractiveFormatting

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
@@ -275,6 +275,7 @@ class GalleryImage extends Component {
 				{ ! isEditing && ( isSelected || caption ) && (
 					<RichText
 						tagName="figcaption"
+						aria-label={ __( 'Image caption text' ) }
 						placeholder={
 							isSelected ? __( 'Write caption…' ) : null
 						}

diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
@@ -96,6 +96,7 @@ export const Gallery = ( props ) => {
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
 				tagName="figcaption"
 				className="blocks-gallery-caption"
+				aria-label={ __( 'Gallery caption text' ) }
 				placeholder={ __( 'Write gallery caption…' ) }
 				value={ caption }
 				unstableOnFocus={ onFocusGalleryCaption }

diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
@@ -73,6 +73,7 @@ function HeadingEdit( {
 				} }
 				onReplace={ onReplace }
 				onRemove={ () => onReplace( [] ) }
+				aria-label={ __( 'Heading text' ) }
 				placeholder={ placeholder || __( 'Write heading…' ) }
 				textAlign={ textAlign }
 				{ ...blockProps }

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -515,6 +515,7 @@ export default function Image( {
 				<RichText
 					ref={ captionRef }
 					tagName="figcaption"
+					aria-label={ __( 'Image caption text' ) }
 					placeholder={ __( 'Write caption…' ) }
 					value={ caption }
 					unstableOnFocus={ onFocusCaption }

diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
@@ -167,6 +167,7 @@ export default function ListEdit( {
 					setAttributes( { values: nextValues } )
 				}
 				value={ values }
+				aria-label={ __( 'List text' ) }
 				placeholder={ __( 'Write list…' ) }
 				onMerge={ mergeBlocks }
 				onSplit={ ( value ) =>

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -362,6 +362,7 @@ function NavigationLinkEdit( {
 								createBlock( 'core/navigation-link' )
 							)
 						}
+						aria-label={ __( 'Navigation link text' ) }
 						placeholder={ itemLabelPlaceholder }
 						keepPlaceholderOnFocus
 						withoutInteractiveFormatting

diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
@@ -144,7 +144,8 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
 						<RichText
 							className="wp-block-post-author__byline"
 							multiline={ false }
-							placeholder={ __( 'Write byline …' ) }
+							aria-label={ __( 'Post author byline text' ) }
+							placeholder={ __( 'Write byline…' ) }
 							value={ byline }
 							onChange={ ( value ) =>
 								setAttributes( { byline: value } )

diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
@@ -103,6 +103,7 @@ function PostExcerptEditor( {
 						! showMoreOnNewLine &&
 						'wp-block-post-excerpt__excerpt is-inline'
 					}
+					aria-label={ __( 'Post excerpt text' ) }
 					value={
 						excerpt ||
 						postContentExcerpt ||
@@ -115,6 +116,7 @@ function PostExcerptEditor( {
 					<p className="wp-block-post-excerpt__more-text">
 						<RichText
 							tagName="a"
+							aria-label={ __( 'Read more link text' ) }
 							placeholder={ __( 'Read more…' ) }
 							value={ moreText }
 							onChange={ ( newMoreText ) =>
@@ -125,6 +127,7 @@ function PostExcerptEditor( {
 				) : (
 					<RichText
 						tagName="a"
+						aria-label={ __( 'Read more link text' ) }
 						placeholder={ __( 'Read more…' ) }
 						value={ moreText }
 						onChange={ ( newMoreText ) =>

diff --git a/packages/block-library/src/preformatted/edit.js b/packages/block-library/src/preformatted/edit.js
@@ -25,6 +25,7 @@ export default function PreformattedEdit( {
 				} );
 			} }
 			onRemove={ onRemove }
+			aria-label={ __( 'Preformatted text' ) }
 			placeholder={ __( 'Write preformatted text…' ) }
 			onMerge={ mergeBlocks }
 			{ ...blockProps }

diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
@@ -124,6 +124,7 @@ function PullQuoteEdit( {
 								value: nextValue,
 							} )
 						}
+						aria-label={ __( 'Pullquote text' ) }
 						placeholder={
 							// translators: placeholder text used for the quote
 							__( 'Write quote…' )
@@ -134,6 +135,7 @@ function PullQuoteEdit( {
 						<RichText
 							identifier="citation"
 							value={ citation }
+							aria-label={ __( 'Pullquote citation text' ) }
 							placeholder={
 								// translators: placeholder text used for the citation
 								__( 'Write citation…' )

diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
@@ -62,6 +62,7 @@ export default function QuoteEdit( {
 							onReplace( [] );
 						}
 					} }
+					aria-label={ __( 'Quote text' ) }
 					placeholder={
 						// translators: placeholder text used for the quote
 						__( 'Write quote…' )
@@ -88,6 +89,7 @@ export default function QuoteEdit( {
 							} )
 						}
 						__unstableMobileNoFocusOnMount
+						aria-label={ __( 'Quote citation text' ) }
 						placeholder={
 							// translators: placeholder text used for the citation
 							__( 'Write citation…' )

diff --git a/packages/block-library/src/shortcode/edit.js b/packages/block-library/src/shortcode/edit.js
@@ -23,6 +23,7 @@ export default function ShortcodeEdit( { attributes, setAttributes } ) {
 				className="blocks-shortcode__textarea"
 				id={ inputId }
 				value={ attributes.text }
+				aria-label={ __( 'Shortcode text' ) }
 				placeholder={ __( 'Write shortcode here…' ) }
 				onChange={ ( text ) => setAttributes( { text } ) }
 			/>

diff --git a/packages/block-library/src/site-tagline/edit.js b/packages/block-library/src/site-tagline/edit.js
@@ -41,7 +41,8 @@ export default function SiteTaglineEdit( { attributes, setAttributes } ) {
 			<RichText
 				allowedFormats={ [] }
 				onChange={ setSiteTagline }
-				placeholder={ __( 'Site Tagline' ) }
+				aria-label={ __( 'Site tagline text' ) }
+				placeholder={ __( 'Write site tagline…' ) }
 				tagName="p"
 				value={ siteTagline }
 				{ ...blockProps }

diff --git a/packages/block-library/src/site-title/edit/index.js b/packages/block-library/src/site-title/edit/index.js
@@ -50,7 +50,8 @@ export default function SiteTitleEdit( { attributes, setAttributes } ) {
 
 			<RichText
 				tagName={ tagName }
-				placeholder={ __( 'Site Title' ) }
+				aria-label={ __( 'Site title text' ) }
+				placeholder={ __( 'Write site title…' ) }
 				value={ title }
 				onChange={ setTitle }
 				allowedFormats={ [] }

diff --git a/packages/block-library/src/subhead/edit.js b/packages/block-library/src/subhead/edit.js
@@ -43,6 +43,7 @@ export default function SubheadEdit( {
 					} }
 					style={ { textAlign: align } }
 					className={ className }
+					aria-label={ __( 'Subheading text' ) }
 					placeholder={ placeholder || __( 'Write subheading…' ) }
 				/>
 			</div>

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -101,6 +101,12 @@ const ALIGNMENT_CONTROLS = [
 
 const withCustomBackgroundColors = createCustomColorsHOC( BACKGROUND_COLORS );
 
+const cellAriaLabel = {
+	head: __( 'Header cell text' ),
+	body: __( 'Body cell text' ),
+	foot: __( 'Footer cell text' ),
+};
+
 const placeholder = {
 	head: __( 'Header label' ),
 	foot: __( 'Footer label' ),
@@ -432,6 +438,7 @@ function TableEdit( {
 										type: 'cell',
 									} );
 								} }
+								aria-label={ cellAriaLabel[ name ] }
 								placeholder={ placeholder[ name ] }
 							/>
 						)
@@ -520,6 +527,7 @@ function TableEdit( {
 			{ ! isEmpty && (
 				<RichText
 					tagName="figcaption"
+					aria-label={ __( 'Table caption text' ) }
 					placeholder={ __( 'Write caption…' ) }
 					value={ caption }
 					onChange={ ( value ) =>

diff --git a/packages/block-library/src/text-columns/edit.js b/packages/block-library/src/text-columns/edit.js
@@ -6,7 +6,7 @@ import { get, times } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { PanelBody, RangeControl } from '@wordpress/components';
 import {
 	BlockControls,
@@ -73,6 +73,11 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
 										],
 									} );
 								} }
+								aria-label={ sprintf(
+									// translators: %d: column index (starting with 1)
+									__( 'Column %d text' ),
+									index + 1
+								) }
 								placeholder={ __( 'New Column' ) }
 							/>
 						</div>

diff --git a/packages/block-library/src/verse/edit.js b/packages/block-library/src/verse/edit.js
@@ -46,7 +46,8 @@ export default function VerseEdit( {
 						content: nextContent,
 					} );
 				} }
-				placeholder={ __( 'Write…' ) }
+				aria-label={ __( 'Verse text' ) }
+				placeholder={ __( 'Write verse…' ) }
 				onMerge={ mergeBlocks }
 				textAlign={ textAlign }
 				{ ...blockProps }

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -235,6 +235,7 @@ function VideoEdit( {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
+						aria-label={ __( 'Video caption text' ) }
 						placeholder={ __( 'Write caption…' ) }
 						value={ caption }
 						onChange={ ( value ) =>