Give editable fields in blocks better aria-labels.

WordPress · Nov 18, 2020 · 8e76797 · 8e76797
1 parent b7174b3
commit 8e76797
Show file tree

Hide file tree

Showing 22 changed files with 38 additions and 1 deletion.
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
@@ -500,6 +500,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,6 +144,7 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
  <RichText
  className="wp-block-post-author__byline"
  multiline={ false }
+ aria-label={ __( 'Post author byline text' ) }
  placeholder={ __( 'Write byline …' ) }
  value={ byline }
  onChange={ ( 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
@@ -60,6 +60,7 @@ export default function QuoteEdit( {
  onReplace( [] );
  }
  } }
+ aria-label={ __( 'Quote text' ) }
  placeholder={
  // translators: placeholder text used for the quote
  __( 'Write quote…' )
@@ -86,6 +87,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,6 +41,7 @@ export default function SiteTaglineEdit( { attributes, setAttributes } ) {
  <RichText
  allowedFormats={ [] }
  onChange={ setSiteTagline }
+ aria-label={ __( 'Site tagline text' ) }
  placeholder={ __( 'Site Tagline' ) }
  tagName="p"
  value={ siteTagline }

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

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,6 +46,7 @@ export default function VerseEdit( {
  content: nextContent,
  } );
  } }
+ aria-label={ __( 'Verse text' ) }
  placeholder={ __( 'Write…' ) }
  onMerge={ mergeBlocks }
  textAlign={ textAlign }

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 ) =>