2070911 - The expand button for an event listener category has no accessible name

Status: RESOLVED FIXED

(DevTools :: Debugger, defect)

Description

[Florian Quèze [:florian]]

In the debugger's Event Listener Breakpoints pane, each category row starts with a button that expands and collapses the category. devtools/client/debugger/src/components/shared/EventListeners.js renders it as button.event-listener-expand containing only an arrow image, so it has no text, no title and no aria-label. a11y_checks reports Interactive elements must be labeled for it.

The category name is already displayed beside the button, so the button can take it as its aria-label at no localization cost. aria-expanded should carry the open state, which today lives only in a CSS class. A patch doing this is in hand.

Comment 1

[Florian Quèze [:florian]]

Attachment: Bug 2070911 - Give the event listener category expander an accessible name, r=#devtools-reviewers.

button.event-listener-expand holds only an arrow image, so it had no accessible
name and nothing exposed whether its category was open. Name it after the
category text shown beside it and add aria-expanded. head.js clicks this button
on every toggleEventBreakpoint(), which is what put "Interactive elements must
be labeled" behind the annotations retired here; they cite Bug 1849028 and
Bug 1924435.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/638fd537f9ef
https://hg.mozilla.org/integration/autoland/rev/8623c429dbb2
Give the event listener category expander an accessible name, r=devtools-reviewers,ochameau.

Comment 3

[amarc]

https://hg.mozilla.org/mozilla-central/rev/8623c429dbb2