1682055 - Some parts of the customize section are not accessible.

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect, P1)

Description

[Yura Zenevich [:yzen] (please use "needinfo")]

I've trying the new new version with the customize menu and here are a couple of issues I noticed:

• When customize panel is open with the keyboard, we need to shift focus to the latest first focusable element in the panel e.g. Close button. Same goes for when it's dismissed (after it was opened with the keyboard) we need to move focus back on the Customize button. This is especially helpful because the panel is at the very end of the keyboard order on the new tab page so it is very cumbersome for a keyboard user to tab through all the tiles just to get to the panel. You can see the current keyboard order if you try Show Tabbing Order feature in the Accessibility Panel in DevTools -
• Showing tabbing order also helps to see that the layout order is different from the keyboard order in some places. You can see it with Recommended by Pocket toggle and Sponsored Stories. The order in cases like that has to be reversed.
• You can also use the AccessibilityPanel for testing for most common a11y issues (Check for issues in the toolbar. You will be able to see that the menu has a number of interactive controls that are not labelled. Some are wrapped inside a label but the label is empty. (See )
• Keyboard focus styling is missing for most of the items in the menu.
• As a side note, the focus styling that is present for the Customize and Close buttons is not consistent with the rest of the newtab (a bit hard to see contrast wise too).

Comment 1

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Screen Shot 2020-12-11 at 4.32.13 PM.png

Comment 2

[Yura Zenevich [:yzen] (please use "needinfo")]

Attachment: Screen Shot 2020-12-11 at 4.42.10 PM.png

Comment 3

[Yura Zenevich [:yzen] (please use "needinfo")]

Sorry some images where stripped out from the description

Comment 4

[Erica Wright [:ewright]]

Attachment: Bug 1682055 - Fix customize menu accessibility issues.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d52f7c7e3f88
Fix customize menu accessibility issues. r=yzen,prathiksha

Comment 6

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/d52f7c7e3f88

Comment 7

[Marius Coman [:mcoman], Ecosystem QA]

I have verified that this issue is no longer reproducible with the latest Firefox Nightly (86.0a1 Build ID - 20210118214232) installed on Windows 10 x64, Mac 10.15.7, and Linux Mint 20 x64. Now, I can confirm the following:
- after the "Customize" menu is opened the first element focused after the "Tab" key is pressed is the "Close" button.
- all the elements from the "Customize" menu are focused in order from top to bottom (the "Sponsored stories" option is focused after the "Recommended by Pocket" section title)
- all the elements from the "Customize" menu can be accessed through the "AccessibilityPanel"
- all the elements from the "Customize" menu can be accessed via a screen reader software
- keyboard focus is present on all the elements from the "Customize" menu
- the focus styling is the same for both "Customize" and "Close" buttons

However, it seems that the following two behaviors are still reproducible and I have logged separate issues for them:
- the "Close" button is not automatically focused if the "Customize" menu is opened via keyboard navigation (Bug 1687455)
- the "Personalize" button is not automatically focused if the "Customize" menu is dismissed via keyboard navigation (Bug 1687456)