Adds screen-reader-only text to the close button for modals (#5274, #5377)

* Adds clearer text to the close button for modals
* Use existing wagtailConfig.STRINGS to store the new translatable string for JS, rather than introducing a new library.
* Update list of string constants for translation in the tests file
* Remove aria-hidden on modal dialog close button

CHANGELOG.txt

@@ -46,6 +46,7 @@ Changelog
  * Fix: Remove duplicate labels in image gallery and image choosers for screen reader users (Helen Chapman)
  * Fix: Restore custom "Date" icon for scheduled publishing panel in Edit page’s Settings tab (Helen Chapman)
  * Fix: Added missing form media to user edit form template (Matt Westcott)
+ * Fix: Add a label to the modals’ “close” button for screen reader users (Helen Chapman, Katie Locke)
 
 
 2.5.1 (07.05.2019)

client/tests/stubs.js

@@ -43,6 +43,7 @@ global.wagtailConfig = {
     EDITOR_CRASH: 'The editor just crashed. Content has been reset to the last saved version.',
     BROKEN_LINK: 'Broken link',
     MISSING_DOCUMENT: 'Missing document',
+    CLOSE: 'Close',
   },
 };
 

docs/releases/2.6.rst

@@ -60,6 +60,7 @@ Bug fixes
  * Remove duplicate labels in image gallery and image choosers for screen reader users (Helen Chapman)
  * Restore custom "Date" icon for scheduled publishing panel in Edit page’s Settings tab (Helen Chapman)
  * Added missing form media to user edit form template (Matt Westcott)
+ * Added a label to the modals’ “close” button for screen reader users (Helen Chapman, Katie Locke)
 
 
 Upgrade considerations

wagtail/admin/static_src/wagtailadmin/js/modal-workflow.js

@@ -21,7 +21,7 @@ function ModalWorkflow(opts) {
     $('body > .modal').remove();
 
     // set default contents of container
-    var container = $('<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">\n    <div class="modal-dialog">\n        <div class="modal-content">\n            <button type="button" class="button close icon text-replace icon-cross" data-dismiss="modal" aria-hidden="true">&times;</button>\n            <div class="modal-body"></div>\n        </div><!-- /.modal-content -->\n    </div><!-- /.modal-dialog -->\n</div>');
+    var container = $('<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">\n    <div class="modal-dialog">\n        <div class="modal-content">\n            <button type="button" class="button close icon text-replace icon-cross" data-dismiss="modal">' + wagtailConfig.STRINGS.CLOSE + '</button>\n            <div class="modal-body"></div>\n        </div><!-- /.modal-content -->\n    </div><!-- /.modal-dialog -->\n</div>');
 
     // add container to body and hide it, so content can be added to it before display
     $('body').append(container);

wagtail/admin/templates/wagtailadmin/admin_base.html

@@ -51,6 +51,7 @@
                 EDITOR_CRASH: "{% trans 'The editor just crashed. Content has been reset to the last saved version.' %}",
                 BROKEN_LINK: "{% trans 'Broken link' %}",
                 MISSING_DOCUMENT: "{% trans 'Missing document' %}",
+                CLOSE: "{% trans 'Close' %}",
 
                 MONTHS: [
                     "{% trans 'January' %}",