1931940 - [Toolbar Redesign] Accessibility engineering review

Status: ASSIGNED

(Firefox for Android :: Toolbar, task)

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.

We are implementing a new toolbar in Firefox Android (and iOS: bug 1926650).

Slide deck explaining the design changes

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

The new toolbar is enabled for 50% of Nightly at this time. If you see a "double decker" toolbar (address bar and navigation bar), then you have the new toolbar. Otherwise, you will need to manually enable 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 and exit the menus.

QA has already filed some a11y bugs that we're working on: https://mzl.la/3AOnSlA

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

When will this ship?

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

• Slide deck explaining the design changes
• 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:

• Toolbar button access and readability of the URL

Comment 1

[❌ Anna Yeddi [:ayeddi] ❌ On leave until 2027-01-04]

The testing and reporting is completed. Full list of reported bugs (for v.138 and 139) is in this query.

There are 2 bugs that have access-S2 (considered to be blockers for users):

1. Bug 1960954: [toolbar redesign] It is not possible to re-activate a search input with TalkBack, Universal Switch, or Voice Access
2. Bug 1958027: [toolbar redesign] The grabber on History drawer is not exposed to TalkBack making it harder to dismiss the sheet

Accessibility team is recommend to resolve these bugs as soon as possible.

Then, the access-S3 bugs are recommended to be resolved, the following order may be considered:

1. Bug 1958033: Universal Switch does not focus Opened Tabs and Menu buttons in its items mode
2. Bug 1958380: When a page is scrolled and toolbar is not visible, TalkBack focuses inactive "New tab, Tab counter toolbar button, Menu"
3. Bug 1957976: Toolbar button labels for Back, Forward, and Search are announced twice by TalkBack
4. Group of bugs that are likely related:
   1. Bug 1958379: When a page is scrolled and toolbar is not visible, TalkBack can focus it without revealing it
   2. Bug 1958384: Two rows of toolbar creating a focus order that is different from the visual reading order
   3. Bug 1957973: Toolbar is overlaying content on New Tab while TalkBack should be scrolling the view