1932453 - [Menu Redesign] Accessibility engineering review

Status: ASSIGNED

(Firefox for Android :: Toolbar, task, P2)

Description

[Chris Peterson [:cpeterson]]

Description:

Please provide an explanation of the feature or change. Include a description of the user scenario in which it would be used and how the user would complete the task(s).
Screenshots and visual UI specs are welcome, but please include sufficient accompanying explanation so that blind members of the accessibility team are able to understand the feature/change.

How do we test this?

If there is an implementation to test, please provide instructions for testing it; e.g. setting preferences, other preparation, how to trigger the UI, etc.

Description:

Please provide an explanation of the feature or change. Include a description of the user scenario in which it would be used and how the user would complete the task(s).
Screenshots and visual UI specs are welcome, but please include sufficient accompanying explanation so that blind members of the accessibility team are able to understand the feature/change.

We are implementing a new menu in Firefox Android (and iOS: bug 1926648).

How do we test this?

If there is an implementation to test, please provide instructions for testing it; e.g. setting preferences, other preparation, how to trigger the UI, etc.

You will need to test using Firefox Nightly: https://play.google.com/store/apps/details?id=org.mozilla.fenix

We will be starting a Nightly experiment soon, but in the meantime, you will need to manually enable the new menu (and the new toolbar):

1. Enable debug mode: open the kebab menu, open the Settings menu (if see a gear icon at the top of the menu, tap it; otherwise scroll to the bottom of the kebab menu to tap "Settings"), and select "About Firefox Nightly", and tap on the Firefox logo five times.
2. Open the Settings menu again, scroll to the bottom, and select "Secret Settings".
3. Enable the "Enable Navigation Toolbar" setting. The new menu requires the new toolbar (but not vice versa)!
4. Enable the "Enable Menu Redesign" setting and exit the menus.

You can ask questions in our project Slack channel: #mobile-menu-toolbar-redesign

When will this ship?

Tracking bug/issue: bug 1930998
Design documents (e.g. Product Requirements Document, UI spec): Figma designs

Engineering lead: [e-mail]
Product manager: [e-mail]
UX designer: [e-mail]

The accessibility team has developed the Mozilla Accessibility Release Guidelines which outline what is needed to make user interfaces accessible:
https://wiki.mozilla.org/Accessibility/Guidelines
Please describe the accessibility guidelines you considered and what steps you've taken to address them:

Describe any areas of concern to which you want the accessibility team to give special attention:

• Readability of the new menu with its Firefox Account header and the submenus' preview text.

Comment 1

[Anna Yeddi [:ayeddi]]

The testing and reporting for the Menu Redesign in the Firefox 139 (Nightly) is completed and the list of bugs recorded is available

Bug 1962565 - [Menu Redesign] Add Extension Confirmation: “Add” and “Ok” buttons in dark mode has low color contrast with purple background and white text is the only access-S2 bug uncovered and similar issues have been reported in bug 1883627 and bug 1960968 - they would likely need UX input as well to update the color combination used for these two buttons.

Accessibility team recommends to resolve all the bug reported, starting with the following top-5 bugs (1 blocker and 4 papercuts):

1. (access-S2) Bug 1962565: Add Extension Confirmation: “Add” and “Ok” buttons in dark mode has low color contrast with purple background and white text - blocker
2. (access-S3) 1962789: Extensions: Recommended extensions have a misleading hint - papercut
3. (access-S3) 1962801: Sheet view does not scroll with TalkBack focus causing OS toolbar to be activated instead of its underlying controls - papercut
4. (access-S3) 1962793: Extensions: TalkBack focus is returned to a wrong location after an extension is added - papercut
5. (access-S4) 1962808: Extensions: "<" Navigate Up button from the extension view closes the entire app menu - papercut

Comment 2

[regs]

The menu appears on opposite side of the screen, at the bottom, not on the top. That requires to use two hands. This hurts accessibility and usability. Menu and Tab Tray should appear next to respective button, not somewhere else.

It's also more difficult to dismiss, because it's too big. And only free space to click on is again on opposite side.

Items shouldn't have backgrounds. It's visually bloating the menu.

New Tab button also should be on the left side on phones.