2050797 - Target page of about:debugging is not usable with the keyboard (no focus indicator...)

Status: VERIFIED FIXED

(DevTools :: about:debugging, defect, P2)

Description

[Daniel Bodea [:danibodea]]

Attachment: The expandable and colapsible elements are not focusable by keyboard.png

Note

• The colapsible/expandable elements cannot be focused with TAB key: Temporary Extensions, Extensions, Service Workers, Shared Workers, Other Workers.
• The user can focus hidden elements under collapsed sections using TAB key (no visual feedback when sections are collapsed).
• When using NVDA to navigate using Up/Down Arrows, the these elements are presented incorrectly as "links". Example: "Link, Heading Level 2, Temporary Extensions".
• NVDA dows not mention they are expandable/colapsible, but they can be activated using both ENTER and SPACE. Furthermore, NVDA reads the the content hidden under colapsed sections.

Found in

• Nightly v154.0a1

Affected versions

• Nightly v154.0a1

Tested platforms

• Affected platforms: All
• Unaffected platforms: None

Steps to reproduce

1. Flip browser.nova.enabled to TRUE
2. Load about:debugging#/runtime/this-firefox
3. Use TAB key to focus the colapsible/expandable elements (Ex "Temporary Extensions")

Expected result

• The used is able to focus and activate the section titles interactible elements by keyboard navigation.

Actual result

• The user is not able to focus and activate the sections titles interactible elements by keyboard navigation.
• When using NVDA, the section titles can be found with Up/Down Arrows and enabledd with ENTER/SPACE, but are incorrectly presented by NVDA as links. Keep in mind that NVDA reads the hidden content under colapsed sections by default AND that interactive elements under colapsed sections are incorrectly focusable by normal keyboard navigation.

Regression range

• This is not a recent regression since it reproduces since before the NOVA implementation.

Additional notes

• While the ultimate resolution of this matter remains uncertain, I have provided comprehensive information to facilitate an informed decision.

Comment 1

[Julian Descottes [:jdescottes]]

The whole page has issues with keyboard navigation, I think we should address it as a whole and not just fix the expand/collapse icons here.

Comment 2

[BugBot [:suhaib / :marco]]

The severity field for this bug is set to S3. However, the accessibility severity is higher, .
:jdescottes, could you consider increasing the severity?

For more information, please visit BugBot documentation.

Comment 3

[Julian Descottes [:jdescottes]]

I think for devtools a11y issues we can diverge from the accessibility severity. Feel free to bump.

Comment 4

[Hubert Boma Manilla (:bomsy)]

Attachment: Bug 2050797 - [devtools] Make the collapsible section headings keyboard accessible r=#devtools

Highlights of this patch

• Switched <A> to a <BUTTON>
• Moved the <H2> to be the outer element as screen-reader users navigate panes by heading, it also fits the typical ARIA accordion pattern of H2 > BUTTON
• Also added aria-expanded/aria-controls

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/a122b1d7f1a3
https://hg.mozilla.org/integration/autoland/rev/3d57a830f067
[devtools] Make the collapsible section headings keyboard accessible r=devtools-reviewers,nchevobbe

Comment 7

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/3d57a830f067

Comment 8

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:bomsy, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox154 to wontfix.

For more information, please visit BugBot documentation.

Comment 9

[Daniel Bodea [:danibodea]]

I can confirm this fix in Nightly v155.0a1 in Windows 10/11, MacOS 14 and Ubuntu 24.
The expandable/colapsible section can be accessed with keyboard navigation, moreover, the elements inside colapsed sections can no longer be focused invisibly.