[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/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