977244 - [a11y] style inspector [rule view] needs some a11y love

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, defect, P2)

Description

[Rob Campbell [:rc] (:robcee)]

The Style Inspector aka Rule View right now is not very useful from an a11y standpoint.

It presents itself as some groups of lists with rule names and possibly no values.

One suggestion could be to convert these lists into rows of labels and textboxes. Alternately, we could add aria-labels to the rules and values.

Keyboard navigation through the rule view is currently impossible.

Comment 1

[Marco Zehe (:MarcoZ)]

This is a larger project and not done in five minutes. Setting to P2 for now.

Comment 2

[Yura Zenevich [:yzen] (please use "needinfo")]

This is still an outstanding issue. What we want is to add the necessary semantics to the rules view. It can either be a list/listbox or tree view semantics. I believe firebug has a tree.

Comment 3

[Nancy Pang [:npang]]

Attachment: Bug 977244 - [a11y] Style inspector [rule view] needs some a11y love.

Review commit: https://reviewboard.mozilla.org/r/107540/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/107540/

Comment 4

[Nancy Pang [:npang]]

Attachment: Bug 977244 - [a11y] Style inspector [rule view] needs some a11y love.

Review commit: https://reviewboard.mozilla.org/r/107948/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/107948/

Comment 5

[Nancy Pang [:npang]]

Attachment: Bug 977244 - [a11y] Style inspector [rule view] needs some a11y love.

Refactored

Review commit: https://reviewboard.mozilla.org/r/107952/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/107952/

Comment 6

[Yura Zenevich [:yzen] (please use "needinfo")]

Comment on attachment 8831381 [details]
Bug 977244 - [a11y] Style inspector [rule view] needs some a11y love.

https://reviewboard.mozilla.org/r/107952/#review109786

I believe you mentioned you wanted some early feedback. Sorry if I remembered wrong :) 

* Current section should be scrolled into view when arrowing up and down. There is a utility in devtools that does that I believe.
* When you use role group you can't really add anything to the role value (e.g. index). Simply role="group"
* We definitely need focus for groups
* Have to tab twice to get away from the rule view container (I think it's some scrollable thing that is also focusable)
* When entering a group, we get into CSS rule edit mode. Is it possible to just focus instead of activating an input?
* Focused checkbox needs style
* Focused expand trianle needs style
* When in an expandable row, the whole row should listen for left/right keys to collapse/expand the style.
* Probably not everything in the group should be a tree item. I think only the things that are list items should.

I think this is a good start :)

::: devtools/client/inspector/inspector.xhtml:102
(Diff revision 1)
>              <div id="ruleview-command-toolbar">
>                <button id="ruleview-add-rule-button" data-localization="title=inspector.addRule.tooltip" class="devtools-button"></button>
>                <button id="pseudo-class-panel-toggle" data-localization="title=inspector.togglePseudo.tooltip" class="devtools-button"></button>
>              </div>
>            </div>
>            <div id="pseudo-class-panel" hidden="true">

Comment 7

[Patrick Brosset <:pbro>]

Unassigning this bug since it has been 2 years with no updates and the assigned account is no longer active.

Comment 8

[Dhruvi Butti]

Hey! I am an Outreachy applicant. Could you please assign it to me.
Thank you
Dhruvi

Comment 9

[Yura Zenevich [:yzen] (please use "needinfo")]

Hi Dhruvi, this issue is probably not the best first bug, it's a little ill defined too. Would you be interested in taking a look at bug 1529687 for example? If so feel free to comment there and I'll assign it to you.

Comment 10

[Mellina Y.]

Hi everyone,

Can I work on this?

Thanks!

Comment 11

[Marco Zehe (:MarcoZ)]

Attachment: Bug 977244 - Make the rules view easier to navigate with a screen reader, r?yzen

To give the whole rules view more structure:

1. Make the container a document so screen readers invoke their reading mode.
2. Give the different section headers a proper heading role.
3. Make each separate item an article so screen readers can navigate them more easily.
4. Give the expander twisty for the pseudo classes a proper label that adjusts depending on whether pseudo classes are expanded or collapsed. Also make it a button for screen readers.

This patch does not attempt to simulate any advanced navigation via the keyboard.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/be296969313c
Make the rules view easier to navigate with a screen reader, r=yzen

Comment 13

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/be296969313c