2008147 - [Windows] Button removed from tab order (Settings dialog > Wallpaper category swatch buttons)

Status: NEW

(Firefox :: New Tab Page, defect)

Description

[John Northup]

Steps to Reproduce

Open DevTools. Activate the Customize button. Within the Settings dialog, inspect the wallpaper category swatch buttons.

Expected Behavior

All buttons are in the tab order. None have the tabindex attribute.

Actual Behavior

All buttons but the first are removed from the tab order. The first button has tabindex="0" while the rest have tabindex="-1".

User Impact

Screen reader users cannot navigate among the swatches. Although the arrow key method is operable while no screen reader is running, NVDA, JAWS, and Narrator assign other functions to the the arrow keys, which blocks users of those screen readers from using them to navigate among the swatches.

WCAG 2.2 References

• WCAG 2.1.1 - Keyboard
• WCAG 2.1.4 - Single Key Shortcuts

Recommendations

Remove tabindex attributes in order to allow users to navigate using Tab and Shift + Tab.

Testing Environment

Windows

Assistive Technology Used

Any

Code Pointers

<button id="celestial" style="background-image: url(&quot;https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/newtab-wallpapers-v2/55b678ff-15c3-49d5-bdbc-40f8413cfb8a.avif&quot;); background-position: center center;" class="wallpaper-input" tabindex="-1">
</button>
<label for="celestial" data-l10n-id="newtab-wallpaper-category-title-celestial">Celestial</label>

Further Reference

• WebAIM: Keyboard Accessibility: Tabindex
• WebAIM: Keyboard Shortcuts for NVDA
• WebAIM: Keyboard Shortcuts for JAWS
• WebAIM: Using Narrator to Evaluate Web Accessibility

Comment 1

[John Northup]

Attachment: Wallpaper category swatches

Comment 2

[Oana Botisan, Desktop QA]

Managed to reproduce this issue on macOs 13 using Nightly 149.0a1. I will set this request as "NEW" to allow the engineering team to consider whether they will implement the fix or not.

Comment 3

[Eitan Isaacson [:eeejay]]

There is nothing wrong with using arrow keys for managed child focus, but the semantics on the composite widget needs to be correct.

This looks like an incomplete grid implementation. Look into this guide for details how to do it. Another option is to use a listbox.

Comment 4

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:thecount, could you have a look please?

For more information, please visit BugBot documentation.

Comment 5

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

setting the severity of the bug to align with a11y-severity, per discussion with :thecount