[A11Y] Add aria-label to dropdown toggles (#2668)

Implement custom accessible dropdown toggle labels for forum components

Making the a11y label more specific to the specific action it performs is critical for good UX with assistive technologies.

js/src/common/components/Dropdown.js

@@ -13,6 +13,7 @@ import listItems from '../helpers/listItems';
  * - `icon` The name of an icon to show in the dropdown toggle button.
  * - `caretIcon` The name of an icon to show on the right of the button.
  * - `label` The label of the dropdown toggle button. Defaults to 'Controls'.
+ * - `accessibleToggleLabel` The label used to describe the dropdown toggle button to assistive readers. Defaults to 'Toggle dropdown menu'.
  * - `onhide`
  * - `onshow`
  *
@@ -25,6 +26,7 @@ export default class Dropdown extends Component {
     attrs.menuClassName = attrs.menuClassName || '';
     attrs.label = attrs.label || '';
     attrs.caretIcon = typeof attrs.caretIcon !== 'undefined' ? attrs.caretIcon : 'fas fa-caret-down';
+    attrs.accessibleToggleLabel = attrs.accessibleToggleLabel || app.translator.trans('core.lib.dropdown.toggle_dropdown_accessible_label');
   }
 
   oninit(vnode) {
@@ -92,7 +94,13 @@ export default class Dropdown extends Component {
    */
   getButton(children) {
     return (
-      <button className={'Dropdown-toggle ' + this.attrs.buttonClassName} data-toggle="dropdown" onclick={this.attrs.onclick}>
+      <button
+        className={'Dropdown-toggle ' + this.attrs.buttonClassName}
+        aria-haspopup="menu"
+        aria-label={this.attrs.accessibleToggleLabel}
+        data-toggle="dropdown"
+        onclick={this.attrs.onclick}
+      >
         {this.getButtonContent(children)}
       </button>
     );

js/src/common/components/SplitDropdown.js

@@ -24,7 +24,12 @@ export default class SplitDropdown extends Dropdown {
 
     return [
       Button.component(buttonAttrs, firstChild.children),
-      <button className={'Dropdown-toggle Button Button--icon ' + this.attrs.buttonClassName} data-toggle="dropdown">
+      <button
+        className={'Dropdown-toggle Button Button--icon ' + this.attrs.buttonClassName}
+        aria-haspopup="menu"
+        aria-label={this.attrs.accessibleToggleLabel}
+        data-toggle="dropdown"
+      >
         {icon(this.attrs.icon, { className: 'Button-icon' })}
         {icon('fas fa-caret-down', { className: 'Button-caret' })}
       </button>,

js/src/forum/components/DiscussionListItem.js

@@ -87,6 +87,7 @@ export default class DiscussionListItem extends Component {
                 icon: 'fas fa-ellipsis-v',
                 className: 'DiscussionListItem-controls',
                 buttonClassName: 'Button Button--icon Button--flat Slidable-underneath Slidable-underneath--right',
+                accessibleToggleLabel: app.translator.trans('core.forum.discussion_controls.toggle_dropdown_accessible_label'),
               },
               controls
             )

js/src/forum/components/DiscussionPage.js

@@ -189,6 +189,7 @@ export default class DiscussionPage extends Page {
           icon: 'fas fa-ellipsis-v',
           className: 'App-primaryControl',
           buttonClassName: 'Button--primary',
+          accessibleToggleLabel: app.translator.trans('core.forum.discussion_controls.toggle_dropdown_accessible_label'),
         },
         DiscussionControls.controls(this.discussion, this).toArray()
       )

js/src/forum/components/HeaderSecondary.js

@@ -57,6 +57,7 @@ export default class HeaderSecondary extends Component {
         SelectDropdown.component(
           {
             buttonClassName: 'Button Button--link',
+            accessibleToggleLabel: app.translator.trans('core.forum.header.locale_dropdown_accessible_label'),
           },
           locales
         ),

js/src/forum/components/IndexPage.js

@@ -172,6 +172,7 @@ export default class IndexPage extends Page {
         {
           buttonClassName: 'Button',
           className: 'App-titleControl',
+          accessibleToggleLabel: app.translator.trans('core.forum.index.toggle_sidenav_dropdown_accessible_label'),
         },
         this.navItems(this).toArray()
       )
@@ -227,6 +228,7 @@ export default class IndexPage extends Page {
         {
           buttonClassName: 'Button',
           label: sortOptions[app.search.params().sort] || Object.keys(sortMap).map((key) => sortOptions[key])[0],
+          accessibleToggleLabel: app.translator.trans('core.forum.index_sort.toggle_dropdown_accessible_label'),
         },
         Object.keys(sortOptions).map((value) => {
           const label = sortOptions[value];

js/src/forum/components/NotificationsDropdown.js

@@ -9,6 +9,8 @@ export default class NotificationsDropdown extends Dropdown {
     attrs.menuClassName = attrs.menuClassName || 'Dropdown-menu--right';
     attrs.label = attrs.label || app.translator.trans('core.forum.notifications.tooltip');
     attrs.icon = attrs.icon || 'fas fa-bell';
+    // For best a11y support, both `title` and `aria-label` should be used
+    attrs.accessibleToggleLabel = attrs.accessibleToggleLabel || app.translator.trans('core.forum.notifications.toggle_dropdown_accessible_label');
 
     super.initAttrs(attrs);
   }

js/src/forum/components/Post.js

@@ -61,6 +61,7 @@ export default class Post extends Component {
                     icon="fas fa-ellipsis-h"
                     onshow={() => this.$('.Post-actions').addClass('open')}
                     onhide={() => this.$('.Post-actions').removeClass('open')}
+                    accessibleToggleLabel={app.translator.trans('core.forum.post_controls.toggle_dropdown_accessible_label')}
                   >
                     {controls}
                   </Dropdown>

js/src/forum/components/SessionDropdown.js

@@ -17,6 +17,8 @@ export default class SessionDropdown extends Dropdown {
     attrs.className = 'SessionDropdown';
     attrs.buttonClassName = 'Button Button--user Button--flat';
     attrs.menuClassName = 'Dropdown-menu--right';
+
+    attrs.accessibleToggleLabel = app.translator.trans('core.forum.header.session_dropdown_accessible_label');
   }
 
   view(vnode) {

js/src/forum/components/UserCard.js

@@ -40,6 +40,7 @@ export default class UserCard extends Component {
                     menuClassName: 'Dropdown-menu--right',
                     buttonClassName: this.attrs.controlsButtonClassName,
                     label: app.translator.trans('core.forum.user_controls.button'),
+                    accessibleToggleLabel: app.translator.trans('core.forum.user_controls.toggle_dropdown_accessible_label'),
                     icon: 'fas fa-ellipsis-v',
                   },
                   controls