Closed Bug 977244 Opened 9 years ago Closed 3 years ago

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


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



(firefox79 fixed)

Firefox 79
Tracking Status
firefox79 --- fixed


(Reporter: rcampbell, Assigned: MarcoZ, Mentored)


(Blocks 1 open bug)



(2 files, 2 obsolete files)

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.
This is a larger project and not done in five minutes. Setting to P2 for now.
Priority: -- → P2
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.
Blocks: 1242686
Component: Developer Tools: Inspector → Developer Tools: CSS Rules Inspector
Assignee: nobody → yzenevich
Assignee: yzenevich → npang
Attachment #8830834 - Attachment is obsolete: true
Attachment #8830834 - Flags: review?(yzenevich)
Attachment #8831380 - Attachment is obsolete: true
Attachment #8831380 - Flags: review?(yzenevich)
Comment on attachment 8831381 [details]
Bug 977244 - [a11y] Style inspector [rule view] needs some a11y love.

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">
Attachment #8831381 - Flags: review?(yzenevich)
Product: Firefox → DevTools

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

Assignee: npang → nobody

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

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.

Hi everyone,

Can I work on this?


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.

Assignee: nobody → mzehe
Pushed by
Make the rules view easier to navigate with a screen reader, r=yzen
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 79
Regressions: 1645013
QA Whiteboard: [qa-79b-p2]
You need to log in before you can comment on or make changes to this bug.