From eee4dfbf959ef770d482591d658c59f8bf07e338 Mon Sep 17 00:00:00 2001
From: Garrett Grimm <grimmdude@gmail.com>
Date: Thu, 11 Nov 2021 12:55:46 -0800
Subject: [PATCH] Add 'Close' & 'Back' aria-label attributes to buttons.
 (#3161)

* Add aria-label attributes to close buttons in nav, welcome hero, modal close.
* Replace title with aria-label in nav back button.
---
 framework/core/js/src/common/components/Modal.tsx     | 2 ++
 framework/core/js/src/common/components/Navigation.js | 2 +-
 framework/core/js/src/forum/components/WelcomeHero.js | 1 +
 framework/core/locale/core.yml                        | 7 +++++++
 4 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/framework/core/js/src/common/components/Modal.tsx b/framework/core/js/src/common/components/Modal.tsx
index 595cccdfe..96ad1ceb1 100644
--- a/framework/core/js/src/common/components/Modal.tsx
+++ b/framework/core/js/src/common/components/Modal.tsx
@@ -1,3 +1,4 @@
+import app from '../../common/app';
 import Component from '../Component';
 import Alert, { AlertAttrs } from './Alert';
 import Button from './Button';
@@ -91,6 +92,7 @@ export default abstract class Modal<ModalAttrs = {}> extends Component<ModalAttr
                 icon: 'fas fa-times',
                 onclick: this.hide.bind(this),
                 className: 'Button Button--icon Button--link',
+                'aria-label': app.translator.trans('core.lib.modal.close'),
               })}
             </div>
           )}
diff --git a/framework/core/js/src/common/components/Navigation.js b/framework/core/js/src/common/components/Navigation.js
index 3af864694..140ca43d8 100644
--- a/framework/core/js/src/common/components/Navigation.js
+++ b/framework/core/js/src/common/components/Navigation.js
@@ -47,7 +47,7 @@ export default class Navigation extends Component {
       className: 'Button Navigation-back Button--icon',
       href: history.backUrl(),
       icon: 'fas fa-chevron-left',
-      title: previous.title,
+      'aria-label': previous.title,
       onclick: (e) => {
         if (e.shiftKey || e.ctrlKey || e.metaKey || e.which === 2) return;
         e.preventDefault();
diff --git a/framework/core/js/src/forum/components/WelcomeHero.js b/framework/core/js/src/forum/components/WelcomeHero.js
index 40ecec6fd..c4380a79c 100644
--- a/framework/core/js/src/forum/components/WelcomeHero.js
+++ b/framework/core/js/src/forum/components/WelcomeHero.js
@@ -27,6 +27,7 @@ export default class WelcomeHero extends Component {
             icon: 'fas fa-times',
             onclick: slideUp,
             className: 'Hero-close Button Button--icon Button--link',
+            'aria-label': app.translator.trans('core.forum.welcome_hero.hide'),
           })}
 
           <div className="containerNarrow">
diff --git a/framework/core/locale/core.yml b/framework/core/locale/core.yml
index ff342b633..c7bbf75c6 100644
--- a/framework/core/locale/core.yml
+++ b/framework/core/locale/core.yml
@@ -497,6 +497,9 @@ core:
       resend_button: Resend Confirmation Email
       sent_message: Sent
 
+    welcome_hero:
+      hide: Hide welcome message
+
   # Translations in this namespace are used by the forum and admin interfaces.
   lib:
     debug_button: Debug
@@ -539,6 +542,10 @@ core:
     loading_indicator:
       accessible_label: => core.ref.loading
 
+    # These translations are used in modals.
+    modal:
+      close: Close
+
     # These translations are used in the navigation header.
     nav:
       drawer_button: Open Navigation Drawer