1644669 - [a11y]Make the flex view in the layout accordeon more accessible to screen readers.

Status: RESOLVED FIXED

(DevTools :: Inspector: Layout, enhancement)

Description

[Marco Zehe (:MarcoZ)]

It currently has a bunch of problems, like unlabeled items and unclear structure for someone who cannot see the screen.

Comment 1

[Marco Zehe (:MarcoZ)]

Attachment: Bug 1644669 Part 1 - Label the button to return to the flex container view for screen readers, r?yzen

Comment 2

[Marco Zehe (:MarcoZ)]

Attachment: Bug 1644669 part 2 - Make the flex container view more accessible to screen reader users, r?yzen

This patch does the following:

1. Makes the color swatch more explicit when read by a screen reader user. It was not clear that this is a color preview being displayed.
2. Both the flex-direction and flex-wrap badges are being treated as illustrations, not generic containers, so screen readers immediately pick up the full meaning from the title.
3. Turns the flex item list sub heading into an actual heading for screen readers. It is level 3 because the accordeon headings are all level 2.

Depends on D79128

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f495c9163247
Part 1 - Label the button to return to the flex container view for screen readers, r=yzen
https://hg.mozilla.org/integration/autoland/rev/3435100c8a79
part 2 - Make the flex container view more accessible to screen reader users, r=yzen

Comment 4

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/f495c9163247
https://hg.mozilla.org/mozilla-central/rev/3435100c8a79