Bug 1439925 - Make the breadcrumbs container a proper toolbar for screen readers, and fix the localization include for its label, r?gl
MozReview-Commit-ID: 14mRxfE2ucx
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -36,23 +36,23 @@
var { BrowserLoader } = Cu.import("resource://devtools/client/shared/browser-loader.js", {});
}
</script>
<!-- In content, inspector.js is mapped to the dynamically generated webpack bundle -->
<script type="application/javascript" src="inspector.js" defer="true"></script>
</head>
<body class="theme-body" role="application">
- <div class="inspector-responsive-container theme-body inspector">
+ <div class="inspector-responsive-container theme-body inspector"
+ data-localization-bundle="devtools/client/locales/inspector.properties">
<!-- Main Panel Content -->
<div id="inspector-main-content" class="devtools-main-content" style="visibility: hidden;">
<!-- Toolbar -->
- <div id="inspector-toolbar" class="devtools-toolbar" nowindowdrag="true"
- data-localization-bundle="devtools/client/locales/inspector.properties">
+ <div id="inspector-toolbar" class="devtools-toolbar" nowindowdrag="true">
<button id="inspector-element-add-button" class="devtools-button"
data-localization="title=inspectorAddNode.label"></button>
<div class="devtools-toolbar-spacer"></div>
<span id="inspector-searchlabel"></span>
<div id="inspector-search" class="devtools-searchbox has-clear-btn">
<input id="inspector-searchbox" class="devtools-searchinput"
type="search"
data-localization="placeholder=inspectorSearchHTML.label3"/>
@@ -61,17 +61,17 @@
<button id="inspector-eyedropper-toggle" class="devtools-button"></button>
<div id="inspector-sidebar-toggle-box"></div>
</div>
<!-- Markup Container -->
<div id="markup-box"></div>
<div id="inspector-breadcrumbs-toolbar" class="devtools-toolbar">
<div id="inspector-breadcrumbs" class="breadcrumbs-widget-container"
- role="group" data-localization="aria-label=inspector.breadcrumbs.label" tabindex="0"></div>
+ role="toolbar" data-localization="aria-label=inspector.breadcrumbs.label" tabindex="0"></div>
</div>
</div>
<!-- Splitter -->
<div id="inspector-splitter-box"></div>
<!-- Split Sidebar Container -->
<div id="inspector-rules-container">
@@ -80,18 +80,17 @@
<!-- Sidebar Container -->
<div id="inspector-sidebar-container">
<div id="inspector-sidebar" hidden="true"></div>
</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">
+ <div id="sidebar-panel-ruleview" class="theme-sidebar inspector-tabpanel">
<div id="ruleview-toolbar-container" class="devtools-toolbar">
<div id="ruleview-toolbar">
<div class="devtools-searchbox has-clear-btn">
<input id="ruleview-searchbox"
class="devtools-filterinput devtools-rule-searchbox"
type="search"
data-localization="placeholder=inspector.filterStyles.placeholder"/>
<button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></button>
@@ -111,18 +110,17 @@
</div>
<div id="ruleview-container" class="ruleview">
<div id="ruleview-container-focusable" tabindex="-1">
</div>
</div>
</div>
- <div id="sidebar-panel-computedview" class="theme-sidebar inspector-tabpanel"
- data-localization-bundle="devtools/client/locales/inspector.properties">
+ <div id="sidebar-panel-computedview" class="theme-sidebar inspector-tabpanel">
<div id="computed-toolbar" class="devtools-toolbar">
<div class="devtools-searchbox has-clear-btn">
<input id="computed-searchbox"
class="devtools-filterinput devtools-rule-searchbox"
type="search"
data-localization="placeholder=inspector.filterStyles.placeholder"/>
<button id="computed-searchinput-clear" class="devtools-searchinput-clear"></button>
</div>