2071232 - The editor's column breakpoint markers have no accessible name

Status: ASSIGNED

(DevTools :: Debugger, defect)

Description

[Florian Quèze [:florian]]

devtools/client/debugger/src/components/Editor/ColumnBreakpoints.js builds each column breakpoint marker as a button containing only an SVG. It has no text, no title and no aria-label, so a11y_checks reports Interactive elements must be labeled for it. Whether a breakpoint is set there is shown only by an active CSS class, which assistive technology cannot see either.

Giving the button a localized name and an aria-pressed reflecting that class fixes both. A line can hold several markers, so the name numbers each one within its line rather than repeating a single string for all of them.

Three more tests click these markers and keep their annotation: they also click the CodeMirror gutter, which is aria-hidden upstream, and an annotation only retires once every accessibility failure in that test stops.

Comment 1

[Florian Quèze [:florian]]

Attachment: Bug 2071232 - Give the editor's column breakpoint markers an accessible name, r=#devtools-reviewers.

The marker is a button holding only an SVG, so it had no accessible name at
all. A line can hold several and they are identical but for their position, so
the name numbers each one within its line. aria-pressed carries the state the
active class shows visually.

The a11y_checks annotations this retires were filed as Bug 1849028.