1875374 - Implement an official variant for the "More options" icon button pattern

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, enhancement)

Description

[Jules Simplicio [:jules]]

We use the 'More options'/'...' icon button that opens up a Panel Menu throughout different features (Add-ons, New Tab, Logins, Address bar); this is a pattern we can capture as an official variant for the button component.

Additionally, a11y has brought up the need for documenting and standardizing best practices behind using this design pattern, such as considering proper attributes as well as documenting best practices that explain we should avoid showing 'more options' only on hover (we're doing this in New Tab and the Address bar today, for example).

Let's consider implementing this as an official variant for the button component, as well as including any additional a11y considerations / documentation within Storybook / Acorn docs.

Comment 1

[Anna Yeddi [:ayeddi]]

Thank you for capturing it, Jules!

Ideally, the ... button would follow a menu button pattern with the following WAI-ARIA properties, so assistive technologies and their users are aware of the expected functionality and operation of this control:

1. The element that opens the menu is <button> (or, at the very minimum, has role="button").
2. The button has aria-haspopup attribute set to either menu or true.
3. When the menu is displayed, the button has aria-expanded attribute that is set to true. When the menu is hidden, aria-expanded is set to false.
4. The element that contains the menu items (that is displayed by activating the button) has role="menu".
5. (Optional) The button has a value specified for aria-controls that refers to the element with role="menu". This would ensure assistive technology knows which specific element is being controlled by the button.

Also, the button should provide the following keyboard interaction (when a keyboard focus is on the button):

1. Enter: opens the menu and places focus on the first menu item.
2. Space: Opens the menu and places focus on the first menu item.
3. (Optional) Down Arrow: opens the menu and moves focus to the first menu item.
4. (Optional) Up Arrow: opens the menu and moves focus to the last menu item.

Comment 2

[Anna Yeddi [:ayeddi]]

Likely the bug 1911161 would need to be resolved for this (if moz-button is extended) or taken into an account for this development too.

Comment 3

[Ed Lee :Mardak]

this was brought up in bug 1924107 review https://phabricator.services.mozilla.com/D226010 where earlier comments here basically covered the desires. maybe only other potential thing is having a default / shared tooltip string for "Open menu"

Comment 4

[akulyk]

Attachment: Bug 1875374 - Implement a menu button pattern in moz-button r=#recomp-reviewers

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/6b8fd15d6bdf
https://hg.mozilla.org/integration/autoland/rev/4e687679df64
Implement a menu button pattern in moz-button r=reusable-components-reviewers,tgiles,hjones

Comment 6

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/4e687679df64