1280363 - [a11y] Make the Actions menu button accessible for keyboard and screen readers

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: User Interface, defect)

Description

[Marco Zehe (:MarcoZ)]

The button with ID "action-menu-btn" needs some work to be keyboard accessible and work properly with screen readers for the blind.

Problem 1: It needs a label. Right now, it only speaks "button". Should probably be something like "Actions". Since it probably already has a visual indicator, give it an aria-label attribute with a localizable string that's appropriate (see suggestion).

2. Give it an aria-haspopup="true" attribute to indicate that this button actually opens a menu.

3. Give it the aria-owns attribute whose value references the ID of the list that contains the menu items.

Now, for the menu itself:

1. The <ul> has to have a role="menu".

2. The <li> have to have a role="menuitem", or if they are empty and act as separators, they should have a role="separator".

3. Make all <li> elements that have text and are not separators focusable by setting tabindex="-1".

4. When Enter or Space is pressed on the Button or it is clicked and the menu is made visible, focus the first item.

5. Up and DownArrow should set focus to each menu item in turn. If at the end, wrap to the top, if at the top, wrap to the bottom.

6. Enter should execute the selected menu item, setting focus accordingly either back to the menu button or the new element that is to be interacted with.

7. Escape should not just hide the menu, but also set focus back to the menu button so keyboard users don't get lost. Right now, since there is no keyboard focus handling at all, only probably a visual highlight, this does not happen.

Comment 1

[David Lawrence [:dkl]]

We would like to fix this before we switch over to modal as default.

Comment 2

[Kohei Yoshino [:kohei]]

The dropdown menus rely on the jQuery contextMenu plug-in, which does not support WAI-ARIA. As briefly talked on IRC, we have to find an alternative or create our own solution to solve the issue. Also, Bug 1257608 needs to be solved first, because menus are owned by buttons.

https://github.com/mozilla-bteam/bmo/blob/master/extensions/BugModal/web/bug_modal.js
https://github.com/mozilla-bteam/bmo/blob/master/js/jquery/plugins/contextMenu/contextMenu-min.js

Comment 3

[Marco Zehe (:MarcoZ)]

(In reply to Kohei Yoshino [:kohei] from comment #2)
> The dropdown menus rely on the jQuery contextMenu plug-in, which does not
> support WAI-ARIA. As briefly talked on IRC, we have to find an alternative
> or create our own solution to solve the issue. Also, Bug 1257608 needs to be
> solved first, because menus are owned by buttons.

An example from the WAI-ARIA 1.1 authoring practices can be found here: https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-1/menu-button-1.html. The fact that is is WAI-ARIA 1.1, not 1.0, has no impact, since this hasn't really changed much, and this example works very well in Firefox and other implementing browsers. So implementing this by ourselves should not be too hard I hope. Famous last words, I know. ;)

Comment 4

[David Lawrence [:dkl]]

(In reply to Marco Zehe (:MarcoZ) from comment #3)
> An example from the WAI-ARIA 1.1 authoring practices can be found here:
> https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-1/
> menu-button-1.html. The fact that is is WAI-ARIA 1.1, not 1.0, has no
> impact, since this hasn't really changed much, and this example works very
> well in Firefox and other implementing browsers. So implementing this by
> ourselves should not be too hard I hope. Famous last words, I know. ;)

Notes for implementer:
This page describes how to use an <a> element for menus which is what we are moving too.
https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-2/menu-button-2.html#
Also instead of using jQuery.contextMenu, we can switch over to:
https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-2/js/PopupMenuLinks.js

Comment 5

[David Lawrence [:dkl]]

Attachment: 1280363_1.patch

- No more use of jquery contextmenu plugin for bug modal
- created home grown dropdown.js js file
- most keyboard nav works
  - tab to menu button
  - enter drops menu down
  - up/down arrow keys cycles through choices
  - enter selects item
  - escape key closes menu
- mouse nav also works as expected
- hopefully got the wai-aria stuff correct as well
- all dropdowns converted, even comment tag menu

will upload to bugzilla-dev.allizom.org as well so Marco can try it put.

dkl

Comment 6

[Marco Zehe (:MarcoZ)]

Comment on attachment 8834190 [details] [diff] [review]
1280363_1.patch

Yes, this looks and feels correct for the most part. A few notes:

1. <button role="button" ...> doesn't need the role, since Firefox knows that the <button> element creates a button. Doesn't hurt to keep it, but is cleaner to not state it since the role is already given by the native semantics. The other attributes will work on the native button element just fine without the role attribute.

2. Add role="presentation" to each <li> element that holds an <a> with role "menuitem". The ul is a role "menu", so the <li> elements should be declared presentational here since in the accessibility sense, we're not dealing with a list at all any more. Note you need to do this in both the HTML *and* the JS further below where you remove old LIs and add new ones.

3. When pressing Escape to close the menu, make sure to set focus back to the menu button explicitly, or otherwise it may end up in a different place. So after closing the menu, make sure you set focus back on the button that opened the menu.

Comment 7

[David Lawrence [:dkl]]

Attachment: 1280363_2.patch

New patch with Marco's suggested changes. Carry forward feedback+.

dkl

Comment 8

[David Lawrence [:dkl]]

Attachment: 1280363_3.patch

Fixes some recent bitrot.

Comment 9

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8838607 [details] [diff] [review]
1280363_3.patch

still a bit of bitrot, patch won't apply even with 'patch'.

Comment 10

[David Lawrence [:dkl]]

Attachment: 1280363_4.patch

Fixed more bitrot

Comment 11

[Dylan Hardison [:dylan] (he/him)]

Attachment: buttons duplicated?

Comment 12

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8838721 [details] [diff] [review]
1280363_4.patch

Review of attachment 8838721 [details] [diff] [review]:
-----------------------------------------------------------------

r-

The tags button is now always visible -- this acceptable as the current behavior has it glitch in and out of existence on page load
however the duplicated 'View' button is bad. A side effect of fixing bit rot?

Comment 13

[David Lawrence [:dkl]]

Attachment: 1280363_5.patch

Yeah due to fixing of bitrot. Hopefully this version much better.

dkl

Comment 14

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8838758 [details] [diff] [review]
1280363_5.patch

Review of attachment 8838758 [details] [diff] [review]:
-----------------------------------------------------------------

r=dylan

Comment 15

[David Lawrence [:dkl]]

To https://github.com/mozilla-bteam/bmo.git
   bbd5ffb..318b902  master -> master

Comment 16

[Dylan Hardison [:dylan] (he/him)]

Backed out because none of the links worked any more...

To [e-mail]:mozilla-bteam/bmo.git
   318b9027d..aa3c43790  master -> master

Comment 17

[David Lawrence [:dkl]]

Attachment: 1280363_6.patch

- Fixed broken normal links
- Fixed broken drop down menu for user names

Comment 18

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8840123 [details] [diff] [review]
1280363_6.patch

r=dylan

Comment 19

[David Lawrence [:dkl]]

To https://github.com/mozilla-bteam/bmo.git
   e316d96..5a9e39a  master -> master