From db609f82565536dcd838a650f35dc3c38ff8c186 Mon Sep 17 00:00:00 2001
From: Edwin Cromley <cromleyedwin89@gmail.com>
Date: Sat, 3 Nov 2018 23:01:35 -0400
Subject: [PATCH 1/4] Add aria-label attribute specifying position of image in
 gallery block.

---
 packages/block-library/src/gallery/edit.js          | 3 ++-
 packages/block-library/src/gallery/gallery-image.js | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index c8b3bb4942f6bb..d22b5617bd0991 100644
--- 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,
@@ -254,6 +254,7 @@ class GalleryEdit extends Component {
 								onSelect={ this.onSelectImage( index ) }
 								setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
 								caption={ img.caption }
+								aria-label={ __( sprintf( 'image %1$d of %2$d in gallery', ( index + 1 ), images.length ) ) }
 							/>
 						</li>
 					) ) }
diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index dd725ab25a2955..6db6f856b2ea6d 100644
--- 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,

From 416f1cbddba847eba2ca5cd2ff804bc1103243ef Mon Sep 17 00:00:00 2001
From: Edwin Cromley <cromleyedwin89@gmail.com>
Date: Sat, 3 Nov 2018 23:05:32 -0400
Subject: [PATCH 2/4] Update changelog text for block library Gallery Block.

---
 packages/block-library/CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 2f4b4397425845..5417f60f4de07f 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 2.1.8 (unreleased)
+
+### New Features
+
+- Gallery Block: Add screen reader support for order of images in gallery.
+
 ## 2.1.8 (2018-11-03)
 
 ### Polish

From 3218113c5e9375c33fd31af6d6f94aeaf9924a06 Mon Sep 17 00:00:00 2001
From: Edwin Cromley <cromleyedwin89@gmail.com>
Date: Sun, 4 Nov 2018 10:27:55 -0500
Subject: [PATCH 3/4] Add translators comment for gallery image aria label
 string.

---
 packages/block-library/src/gallery/edit.js | 35 ++++++++++++----------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index d22b5617bd0991..3ba6c57bf85b31 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -243,21 +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 }
-								aria-label={ __( sprintf( 'image %1$d of %2$d in gallery', ( index + 1 ), images.length ) ) }
-							/>
-						</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

From 575494c1ea3d9e625e1133856d263cba0fd41ce9 Mon Sep 17 00:00:00 2001
From: Matthew Riley MacPherson <hi@tofumatt.com>
Date: Mon, 5 Nov 2018 18:10:40 +0000
Subject: [PATCH 4/4] update changelog version

---
 packages/block-library/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 5417f60f4de07f..ba78e2353863ed 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -1,4 +1,4 @@
-## 2.1.8 (unreleased)
+## 2.2.0 (unreleased)
 
 ### New Features