2071228 - The custom formatter collapse button has no accessible name

Status: ASSIGNED

(DevTools :: Shared Components, defect)

Description

[Florian Quèze [:florian]]

renderJsonMl in devtools/client/shared/components/reps/reps/custom-formatter.mjs renders the expand arrow of a custom-formatted object as a button with no text and no label, so a11y_checks reports Interactive elements must be labeled on every click of it. Reps has no localization infrastructure, so the name has to be an untranslated string like the ones the neighbouring reps already use.

This retires the fail-if on browser_webconsole_custom_formatters.js, browser_webconsole_custom_formatters_errors.js and browser_dbg-custom-formatters.js. The last also clicks the button inside the Scopes tree, where it is unfocusable until Bug 2070909 lands, so it needs that first.

The button only renders under devtools.custom-formatters.enabled, which is off by default, so nothing outside those three tests is affected.

Comment 1

[Florian Quèze [:florian]]

Attachment: Bug 2071228 - Name the custom formatter collapse button, r=#devtools-reviewers.

The button is image-only and had no accessible name, which is what the
Bug 1849028 annotations absorbed. Reps has no localization, so the string
is untranslated like the others in that directory.

browser_dbg-custom-formatters.js also clicks the button inside the Scopes
tree, where it is unfocusable until Bug 2070909 lands, so its annotation
only retires after that.