2071236 - Threads pane rows cannot be reached or activated from the keyboard

Status: RESOLVED FIXED

(DevTools :: Debugger, defect)

Description

[Florian Quèze [:florian]]

A row in the debugger's Threads pane is a div with an onClick, rendered by devtools/client/debugger/src/components/SecondaryPanes/Thread.js. It has no role and no tabindex, so there is no way to select a thread without a mouse, and a11y_checks reports Node is not accessible via accessibility API when a test clicks one.

Making the row a real button gives it the role, the focusability and a name from its own text, all without new strings. The selected row can carry aria-current for the state its selected class shows visually; aria-selected is not available outside a listbox, and adopting one would oblige arrow key navigation the pane does not have. A paused thread's badge becomes part of the button's name, which is intended.

Comment 1

[Florian Quèze [:florian]]

Attachment: Bug 2071236 - Make the debugger's thread list rows real buttons, r=#devtools-reviewers.

A row in the Threads pane was a clickable div, so it had no interactive
accessible and no way to reach it from the keyboard. A button gets both for
free, and aria-current carries the selection the selected class shows.

The a11y_checks annotations this retires were filed as Bug 1849028.

Comment 2

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug is an accessibility bug, but please revert this change in case of error.

Comment 3

[James Teh [:Jamie]]

Ideally, this would be a proper listbox. Making these all buttons will result in a lot of tab order clutter and makes navigation a bit tedious. That said, buttons are better than no accessibility at all and implementing the listbox pattern is quite a bit more work, so I think we can deal with that in a lower severity follow-up.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/2e837086a5d0
https://hg.mozilla.org/integration/autoland/rev/d6d44a3b7843
Make the debugger's thread list rows real buttons, r=nchevobbe.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/3f2ac22ca297
https://hg.mozilla.org/integration/autoland/rev/a4a72a81ee97
Revert "Bug 2071236 - Make the debugger's thread list rows real buttons, r=nchevobbe." for causing dt failures @ browser_markup_dom_mutation_breakpoints.js & browser_styleeditor_telemetry.js

Comment 6

[Sandor Molnar[:smolnar]]

Backed out for causing dt failures @ browser_markup_dom_mutation_breakpoints.js & browser_styleeditor_telemetry.js

Backout link: https://hg.mozilla.org/integration/autoland/rev/a4a72a81ee97f7ab468deb6e1a3dd47cabc7d1e5

Push with failures

Failure log ->TEST-UNEXPECTED-FAIL | devtools/client/styleeditor/test/browser_styleeditor_telemetry.js | open profile_browser_styleeditor_telemetry-2.js.json in the Firefox Profiler

Failure log ->TEST-UNEXPECTED-FAIL | devtools/client/inspector/markup/test/browser_markup_dom_mutation_breakpoints.js | open profile_browser_markup_dom_mutation_breakpoints-2.js.json in the Firefox Profiler

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/0ef6191642d2
https://hg.mozilla.org/integration/autoland/rev/978afddcce37
Make the debugger's thread list rows real buttons, r=nchevobbe.

Comment 8

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/978afddcce37