Closed Bug 1439925 Opened 4 years ago Closed 4 years ago

[Accessibility] Change the role of the breadcrumb container to "toolbar" and give it a spoken label


(DevTools :: Inspector, defect)

Not set


(firefox60 fixed)

Firefox 60
Tracking Status
firefox60 --- fixed


(Reporter: MarcoZ, Assigned: MarcoZ)


(Blocks 1 open bug)


(Keywords: access)


(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.

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.
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 on attachment 8952984 [details]
Bug 1439925 - Make the breadcrumbs container a proper toolbar for screen readers, and fix the localization include for its label,

::: 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/">

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/">

Same as above about removing the data-localization-bundle
Attachment #8952984 - Flags: review?(gl) → review+
Pushed by
Make the breadcrumbs container a proper toolbar for screen readers, and fix the localization include for its label, r=gl
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 60
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.