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.

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>
           )}

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();

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">

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