Closed
Bug 1439925
Opened 6 years ago
Closed 6 years ago
[Accessibility] Change the role of the breadcrumb container to "toolbar" and give it a spoken label
Categories
(DevTools :: Inspector, defect)
DevTools
Inspector
Tracking
(firefox60 fixed)
RESOLVED
FIXED
Firefox 60
Tracking | Status | |
---|---|---|
firefox60 | --- | fixed |
People
(Reporter: MarcoZ, Assigned: MarcoZ)
References
(Blocks 1 open bug)
Details
(Keywords: access)
Attachments
(1 file)
The breadcrumb toolbar is a bit difficult for screen reader users to grasp if it doesn't contain the proper hints. Visually this might be clear what it is, but screen readers need a little help. STR: 1. With NVDA and Firefox on Windows, load any page. 2. Right-click any element and select "Inspect Element". 3. Once the tree has focus, press Tab once. Result: You land in the breadcrumbs toolbar on the button that represents the currently selected element. Expected: NVDA should indicate that this is the breadcrumbs toolbar. Actual: It speaks the word "Grouping" and the label and role of the button. To accomplish this: 1. Change the role of the div with ID "inspector-breadcrumbs" from "group" to "toolbar". 2. Give it a name by assigning a localizable string via aria-label to it that says something like "Breadcrumbs" or another human-understandable name for this particular toolbar. The word "toolbar" itself will be provided by the changed role above.
Assignee | ||
Comment 1•6 years ago
|
||
Turns out the breadcrumbs label was already there, but the string wasn't being picked up from the localization bundle because the declaration of that was not covering the breadcrumbs div. Patch coming up.
Assignee: nobody → mzehe
Comment hidden (mozreview-request) |
Comment 3•6 years ago
|
||
mozreview-review |
Comment on attachment 8952984 [details] Bug 1439925 - Make the breadcrumbs container a proper toolbar for screen readers, and fix the localization include for its label, https://reviewboard.mozilla.org/r/222240/#review228306 ::: devtools/client/inspector/inspector.xhtml:89 (Diff revision 1) > </div> > > <!-- Sidebar Panel Definitions --> > <div id="tabpanels" style="visibility: collapse"> > <div id="sidebar-panel-ruleview" class="theme-sidebar inspector-tabpanel" > data-localization-bundle="devtools/client/locales/inspector.properties"> I think we can remove the data-localization-bundle here now that we moved the data-localization-bundle to the main content container. ::: devtools/client/inspector/inspector.xhtml:120 (Diff revision 1) > </div> > </div> > </div> > > <div id="sidebar-panel-computedview" class="theme-sidebar inspector-tabpanel" > data-localization-bundle="devtools/client/locales/inspector.properties"> Same as above about removing the data-localization-bundle
Attachment #8952984 -
Flags: review?(gl) → review+
Comment hidden (mozreview-request) |
Pushed by mzehe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/5de6951d543f Make the breadcrumbs container a proper toolbar for screen readers, and fix the localization include for its label, r=gl
Comment 6•6 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/5de6951d543f
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 60
Updated•6 years ago
|
Product: Firefox → DevTools
You need to log in
before you can comment on or make changes to this bug.
Description
•