From ed7ca7ccea0f7c6cb9bbd815ee6a71bda4fa90bb Mon Sep 17 00:00:00 2001
From: Helen Chapman <helen.chapman@torchbox.com>
Date: Fri, 7 Jun 2019 18:24:33 +0100
Subject: [PATCH] Stop repeating label, add image dimensions in image gallery &
 choosers for screen reader users (#5355)

- Images in the image listing now have an empty alt tag
- All information about the image, including title and image dimensions are now in the heading below
- The dimensions are visually hidden because they only relevant to screen readers, as sighted users can get and idea of the image dimensions from the thumbnail
---
 CHANGELOG.txt                                             | 2 ++
 docs/releases/2.6.rst                                     | 2 ++
 .../images/templates/wagtailimages/images/results.html    | 8 +++++++-
 .../templates/wagtailimages/images/results_image.html     | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 49682869b..b914e0a93 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -21,6 +21,7 @@ Changelog
  * Removed version number from the logo link’s title. The version can now be found under the Settings menu (Thibaud Colas)
  * Added "don't delete" option to confirmation screen when deleting images, documents and modeladmin models (Kevin Howbrook)
  * Added `branding_title` template block for the admin title prefix (Dillen Meijboom)
+ * Add image dimensions in image gallery and image choosers for screen reader users (Helen Chapman)
  * Fix: ModelAdmin no longer fails when filtering over a foreign key relation (Jason Dilworth, Matt Westcott)
  * Fix: The Wagtail version number is now visible within the Settings menu (Kevin Howbrook)
  * Fix: Scaling images now rounds values to an integer so that images render without errors (Adrian Brunyate)
@@ -39,6 +40,7 @@ Changelog
  * Fix: Screen readers now announce "Dashboard" for the main nav’s logo link instead of Wagtail’s version number (Thibaud Colas)
  * Fix: Screen readers now treat page-level action dropdowns as navigation instead of menus (Helen Chapman)
  * Fix: Make icon font implementation more screen-reader-friendly (Thibaud Colas)
+ * Fix: Remove duplicate labels in image gallery and image choosers for screen reader users (Helen Chapman)
 
 
 2.5.1 (07.05.2019)
diff --git a/docs/releases/2.6.rst b/docs/releases/2.6.rst
index 7e7b5130d..bf119e8f0 100644
--- a/docs/releases/2.6.rst
+++ b/docs/releases/2.6.rst
@@ -30,6 +30,7 @@ Other features
  * Removed version number from the logo link’s title. The version can now be found under the Settings menu (Thibaud Colas)
  * Added "don't delete" option to confirmation screen when deleting images, documents and modeladmin models (Kevin Howbrook)
  * Added ``branding_title`` template block for the admin title prefix (Dillen Meijboom)
+ * Add image dimensions in image gallery and image choosers for screen reader users (Helen Chapman)
 
 Bug fixes
 ~~~~~~~~~
@@ -52,6 +53,7 @@ Bug fixes
  * Screen readers now announce "Dashboard" for the main nav’s logo link instead of Wagtail’s version number (Thibaud Colas)
  * Screen readers now treat page-level action dropdowns as navigation instead of menus (Helen Chapman)
  * Make icon font implementation more screen-reader-friendly (Thibaud Colas)
+ * Remove duplicate labels in image gallery and image choosers for screen reader users (Helen Chapman)
 
 
 Upgrade considerations
diff --git a/wagtail/images/templates/wagtailimages/images/results.html b/wagtail/images/templates/wagtailimages/images/results.html
index 0640896e5..2f4f98c73 100644
--- a/wagtail/images/templates/wagtailimages/images/results.html
+++ b/wagtail/images/templates/wagtailimages/images/results.html
@@ -20,7 +20,13 @@
             <li>
                 <a class="image-choice" title="{% if collections %}{{ image.collection.name }} » {% endif %}{{ image.title }}" href="{% url 'wagtailimages:edit' image.id %}">
                     {% include "wagtailimages/images/results_image.html" %}
-                    <h3>{{ image.title|ellipsistrim:60 }}</h3>
+
+                    {% trans "pixels" as translated_pixels %}
+                    <h3>{{ image.title|ellipsistrim:60 }}
+                        <span class="visuallyhidden">
+                            {{ image.width }} {{ translated_pixels  }} &#215; {{ image.height }} {{ translated_pixels}}
+                        </span>
+                    </h3>
                 </a>
             </li>
         {% endfor %}
diff --git a/wagtail/images/templates/wagtailimages/images/results_image.html b/wagtail/images/templates/wagtailimages/images/results_image.html
index 238109510..ff9143f46 100644
--- a/wagtail/images/templates/wagtailimages/images/results_image.html
+++ b/wagtail/images/templates/wagtailimages/images/results_image.html
@@ -15,4 +15,4 @@
 
 {% load wagtailimages_tags %}
 
-<div class="image">{% image image max-165x165 class="show-transparency" %}</div>
+<div class="image">{% image image max-165x165 class="show-transparency" alt="" %}</div>