Add aria label to images in Gallery block during edit mode. (WordPres…

…s#11466) * Add aria-label attribute specifying position of image in gallery block. * Update changelog text for block library Gallery Block. * Add translators comment for gallery image aria label string.
antpb · Nov 5, 2018 · 1427890 · 1427890
1 parent c8b4679
commit 1427890
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 2.2.0 (unreleased)
+
+### New Features
+
+- Gallery Block: Add screen reader support for order of images in gallery.
+
 ## 2.1.8 (2018-11-03)
 
 ### Polish

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -7,7 +7,7 @@ import { filter, pick } from 'lodash';
  * WordPress dependencies
  */
 import { Component, Fragment } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	IconButton,
 	DropZone,
@@ -243,20 +243,26 @@ class GalleryEdit extends Component {
 				{ noticeUI }
 				<ul className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
 					{ dropZone }
-					{ images.map( ( img, index ) => (
-						<li className="blocks-gallery-item" key={ img.id || img.url }>
-							<GalleryImage
-								url={ img.url }
-								alt={ img.alt }
-								id={ img.id }
-								isSelected={ isSelected && this.state.selectedImage === index }
-								onRemove={ this.onRemoveImage( index ) }
-								onSelect={ this.onSelectImage( index ) }
-								setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
-								caption={ img.caption }
-							/>
-						</li>
-					) ) }
+					{ images.map( ( img, index ) => {
+						/* translators: %1$d is the order number of the image, %2$d is the total number of images. */
+						const ariaLabel = __( sprintf( 'image %1$d of %2$d in gallery', ( index + 1 ), images.length ) );
+
+						return (
+							<li className="blocks-gallery-item" key={ img.id || img.url }>
+								<GalleryImage
+									url={ img.url }
+									alt={ img.alt }
+									id={ img.id }
+									isSelected={ isSelected && this.state.selectedImage === index }
+									onRemove={ this.onRemoveImage( index ) }
+									onSelect={ this.onSelectImage( index ) }
+									setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
+									caption={ img.caption }
+									aria-label={ ariaLabel }
+								/>
+							</li>
+						);
+					} ) }
 					{ isSelected &&
 						<li className="blocks-gallery-item has-add-item-button">
 							<FormFileUpload

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
@@ -86,7 +86,7 @@ class GalleryImage extends Component {
 	}
 
 	render() {
-		const { url, alt, id, linkTo, link, isSelected, caption, onRemove, setAttributes } = this.props;
+		const { url, alt, id, linkTo, link, isSelected, caption, onRemove, setAttributes, 'aria-label': ariaLabel } = this.props;
 
 		let href;
 
@@ -102,7 +102,7 @@ class GalleryImage extends Component {
 		// Disable reason: Image itself is not meant to be
 		// interactive, but should direct image selection and unfocus caption fields
 		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-		const img = url ? <img src={ url } alt={ alt } data-id={ id } onClick={ this.onImageClick } tabIndex="0" onKeyDown={ this.onImageClick } /> : <Spinner />;
+		const img = url ? <img src={ url } alt={ alt } data-id={ id } onClick={ this.onImageClick } tabIndex="0" onKeyDown={ this.onImageClick } aria-label={ ariaLabel } /> : <Spinner />;
 
 		const className = classnames( {
 			'is-selected': isSelected,