1644343 - [a11y]Make the Layout view's box model section more accessible to screen readers

Status: RESOLVED FIXED

(DevTools :: Inspector: Layout, enhancement)

Description

[Marco Zehe (:MarcoZ) [out sick]]

The layout tab of the inspector side pane currently has several problems. After bug 1644127, which turns this pane into a virtual document for screen readers, the box model section needs attention:

• Make the box model understandable to screen reader users.
• Fix the twisty so it is a button which communicates the expanded or collapsed state of the layout properties below.
• Fix the layout properties themselves so they are buttons semantically, and put in a list of items for easier navigation and better structure.

Comment 1

[Marco Zehe (:MarcoZ) [out sick]]

Reduced the scope of this bug, will deal with flex and grid in separate bugs.

Comment 2

[Marco Zehe (:MarcoZ) [out sick]]

Attachment: Bug 1644343 Part 1 - Make layout properties accessible to screen readers, r?yzen

1. Fix the twisty so it has a role and communicates its expanded or collapsed state.
2. Give the section itself a heading so it can easily be found. Make it a level 3 so it is clear that this is a sub section of the box model view.
3. Order the properties themselves in a list with list items for each property.
4. Make the property names and values, which are editable, buttons semantically.

Comment 3

[Marco Zehe (:MarcoZ) [out sick]]

Attachment: Bug 1644343 Part 2 - Make the dimension information in the box model more explicit for screen readers, r?yzen

This patch turns the info that holds the dimensions and position info into a region. Because the visual representation is without explanatory text, an aria-label is constructed for that region to hold a more explicit version of the displayed information.

Depends on D78951

Comment 4

[Marco Zehe (:MarcoZ) [out sick]]

Attachment: Bug 1644343 Part 3 - Make the box model understandable to screen reader users, r?yzen!,flod

This patch adds IDs to all the box divs so they can be referenced by ARIA attributes. The actual legend spans also act as region landmarks with an associated level so the nesting is relayed.

In addition, each of those boxes gets the buttons for its dimensions rendered in-place so for assistive technologies, this all follows a logical flow. aria-owns changes the accessibility tree so the nesting and associated properties are grouped together.

The actual buttons also receive an aria-label that is a combination of the button text and title, so screen reader users not only hear "0 button" without knowing immediately what that button actually belongs to. Title is secondary information.

Depends on D78952

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f9f69dac57be
Part 1 - Make layout properties accessible to screen readers, r=yzen
https://hg.mozilla.org/integration/autoland/rev/d4f83af5e524
Part 2 - Make the dimension information in the box model more explicit for screen readers, r=yzen,flod
https://hg.mozilla.org/integration/autoland/rev/2909e1179d0d
Part 3 - Make the box model understandable to screen reader users, r=yzen,flod

Comment 6

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/f9f69dac57be
https://hg.mozilla.org/mozilla-central/rev/d4f83af5e524
https://hg.mozilla.org/mozilla-central/rev/2909e1179d0d