Web Inspector: AX: Add container ARIA roles (toolbar, main, labeled r…

…egions, etc.) so the layout is more discoverable to screen reader users https://bugs.webkit.org/show_bug.cgi?id=118104 Patch by James Craig <james@cookiecrook.com> on 2013-06-27 Reviewed by Timothy Hatcher. Made the basic layout (toolbar, sidebars, main) of the Web Inspector understandable and navigable with VoiceOver. * Localizations/en.lproj/localizedStrings.js: * UserInterface/ButtonNavigationItem.js: * UserInterface/CSSStyleDetailsSidebarPanel.js: * UserInterface/DashboardManager.js: * UserInterface/Main.js: * UserInterface/NavigationBar.js: * UserInterface/NavigationItem.js: * UserInterface/NavigationSidebarPanel.js: * UserInterface/RadioButtonNavigationItem.js: * UserInterface/Sidebar.js: * UserInterface/SidebarPanel.js: * UserInterface/Toolbar.js: Canonical link: https://commits.webkit.org/136200@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@152141 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Jun 28, 2013 · 555d02e · 555d02e
1 parent 45d543c
commit 555d02e
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 16 deletions.
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,27 @@
+2013-06-27  James Craig  <james@cookiecrook.com>
+
+        Web Inspector: AX: Add container ARIA roles (toolbar, main, labeled regions, etc.) 
+        so the layout is more discoverable to screen reader users
+        https://bugs.webkit.org/show_bug.cgi?id=118104
+
+        Reviewed by Timothy Hatcher.
+
+        Made the basic layout (toolbar, sidebars, main) of the Web Inspector understandable
+        and navigable with VoiceOver.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/ButtonNavigationItem.js:
+        * UserInterface/CSSStyleDetailsSidebarPanel.js:
+        * UserInterface/DashboardManager.js:
+        * UserInterface/Main.js:
+        * UserInterface/NavigationBar.js:
+        * UserInterface/NavigationItem.js:
+        * UserInterface/NavigationSidebarPanel.js:
+        * UserInterface/RadioButtonNavigationItem.js:
+        * UserInterface/Sidebar.js:
+        * UserInterface/SidebarPanel.js:
+        * UserInterface/Toolbar.js:
+
 2013-06-27  James Craig  <james@cookiecrook.com>
 
         Web Inspector: AX: Console log of the Inspector does not announce output for screen readers

diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
diff --git a/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js
@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.ButtonNavigationItem = function(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss) {
+WebInspector.ButtonNavigationItem = function(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss, role, label) {
     WebInspector.NavigationItem.call(this, identifier);
 
     console.assert(identifier);
@@ -32,6 +32,11 @@ WebInspector.ButtonNavigationItem = function(identifier, toolTipOrLabel, image,
     this.toolTip = toolTipOrLabel;
 
     this._element.addEventListener("click", this._mouseClicked.bind(this));
+
+    this._element.setAttribute("role", role || "button");
+
+    if (label) 
+        this._element.setAttribute("aria-label", label);
 
     this._imageWidth = imageWidth || 16;
     this._imageHeight = imageHeight || 16;

diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js
@@ -29,7 +29,7 @@ WebInspector.CSSStyleDetailsSidebarPanel = function()
 
     this._selectedPanel = null;
 
-    this._navigationBar = new WebInspector.NavigationBar;
+    this._navigationBar = new WebInspector.NavigationBar(null, null, "tablist");
     this._navigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
     this.element.appendChild(this._navigationBar.element);
 

diff --git a/Source/WebInspectorUI/UserInterface/DashboardManager.js b/Source/WebInspectorUI/UserInterface/DashboardManager.js
@@ -26,7 +26,7 @@
 WebInspector.DashboardManager = function() {
     WebInspector.Object.call(this);
 
-    this.toolbarItem = new WebInspector.NavigationItem("dashboard");
+    this.toolbarItem = new WebInspector.NavigationItem("dashboard", "group", WebInspector.UIString("Activity Viewer"));
     this._view = new WebInspector.DashboardView(this.toolbarItem.element);
 
     this._waitingForFirstMainResourceToStartTrackingSize = true;

diff --git a/Source/WebInspectorUI/UserInterface/Main.js b/Source/WebInspectorUI/UserInterface/Main.js
@@ -144,6 +144,10 @@ WebInspector.contentLoaded = function()
     this.toolbar = new WebInspector.Toolbar(document.getElementById("toolbar"));
     this.toolbar.addEventListener(WebInspector.Toolbar.Event.DisplayModeDidChange, this._toolbarDisplayModeDidChange, this);
     this.toolbar.addEventListener(WebInspector.Toolbar.Event.SizeModeDidChange, this._toolbarSizeModeDidChange, this);
+
+    var contentElement = document.getElementById("content");
+    contentElement.setAttribute("role", "main");
+    contentElement.setAttribute("aria-label", WebInspector.UIString("Content"));
 
     this.contentBrowser = new WebInspector.ContentBrowser(document.getElementById("content-browser"), this);
     this.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentRepresentedObjectsDidChange, this._contentBrowserRepresentedObjectsDidChange, this);
@@ -165,7 +169,7 @@ WebInspector.contentLoaded = function()
     this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
     this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.SidebarPanelSelected, this._navigationSidebarPanelSelected, this);
 
-    this.rightSidebar = this.detailsSidebar = new WebInspector.Sidebar(document.getElementById("details-sidebar"), WebInspector.Sidebar.Sides.Right);
+    this.rightSidebar = this.detailsSidebar = new WebInspector.Sidebar(document.getElementById("details-sidebar"), WebInspector.Sidebar.Sides.Right, "group", WebInspector.UIString("Details"));
     this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.CollapsedStateDidChange, this._sidebarCollapsedStateDidChange, this);
     this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
     this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.SidebarPanelSelected, this._detailsSidebarPanelSelected, this);

diff --git a/Source/WebInspectorUI/UserInterface/NavigationBar.js b/Source/WebInspectorUI/UserInterface/NavigationBar.js
@@ -23,12 +23,17 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.NavigationBar = function(element, navigationItems) {
+WebInspector.NavigationBar = function(element, navigationItems, role, label) {
     WebInspector.Object.call(this);
 
     this._element = element || document.createElement("div");
     this._element.classList.add(this.constructor.StyleClassName || WebInspector.NavigationBar.StyleClassName);
     this._element.tabIndex = 0;
+
+    if (role)
+        this._element.setAttribute("role", role);
+    if (label)
+        this._element.setAttribute("aria-label", label);
 
     this._element.addEventListener("focus", this._focus.bind(this), false);
     this._element.addEventListener("blur", this._blur.bind(this), false);

diff --git a/Source/WebInspectorUI/UserInterface/NavigationItem.js b/Source/WebInspectorUI/UserInterface/NavigationItem.js
@@ -23,12 +23,17 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.NavigationItem = function(identifier) {
+WebInspector.NavigationItem = function(identifier, role, label) {
     WebInspector.Object.call(this);
 
     this._identifier = identifier || null;
 
     this._element = document.createElement("div");
+
+    if (role) 
+        this._element.setAttribute("role", role);
+    if (label)
+        this._element.setAttribute("aria-label", label);
 
     var classNames = this._classNames;
     for (var i = 0; i < classNames.length; ++i)

diff --git a/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js b/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js
@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, keyboardShortcutKey, autoPruneOldTopLevelResourceTreeElements, autoHideToolbarItemWhenEmpty, wantsTopOverflowShadow, element) {
+WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, keyboardShortcutKey, autoPruneOldTopLevelResourceTreeElements, autoHideToolbarItemWhenEmpty, wantsTopOverflowShadow, element, role, label) {
     if (keyboardShortcutKey)
         this._keyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, keyboardShortcutKey, this.toggle.bind(this));
 
@@ -35,7 +35,7 @@ WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, k
         var hideToolTip = WebInspector.UIString("Hide the %s navigation sidebar").format(displayName);
     }
 
-    WebInspector.SidebarPanel.call(this, identifier, displayName, showToolTip, hideToolTip, image, element);
+    WebInspector.SidebarPanel.call(this, identifier, displayName, showToolTip, hideToolTip, image, element, role, label || displayName);
 
     this.element.classList.add(WebInspector.NavigationSidebarPanel.StyleClassName);
 

diff --git a/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js
@@ -24,7 +24,7 @@
  */
 
 WebInspector.RadioButtonNavigationItem = function(identifier, toolTip, image, imageWidth, imageHeight) {
-    WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, imageWidth, imageHeight);
+    WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, imageWidth, imageHeight, null, "tab");
 };
 
 WebInspector.RadioButtonNavigationItem.StyleClassName = "radio";
@@ -43,10 +43,13 @@ WebInspector.RadioButtonNavigationItem.prototype = {
 
     set selected(flag)
     {
-        if (flag)
+        if (flag) {
             this.element.classList.add(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
-        else
+            this.element.setAttribute("aria-selected", "true");
+        } else {
             this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+            this.element.setAttribute("aria-selected", "false");
+        }
     },
 
     get active()
@@ -85,15 +88,19 @@ WebInspector.RadioButtonNavigationItem.prototype = {
 
         var isSelected = this.selected;
 
-        if (!isSelected)
+        if (!isSelected) {
             this.element.classList.add(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+            this.element.setAttribute("aria-selected", "true");
+        }
 
         var selectedWidth = this.element.offsetWidth;
         if (selectedWidth)
             this.element.style.minWidth = selectedWidth + "px";
 
-        if (!isSelected)
+        if (!isSelected) {
             this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+            this.element.setAttribute("aria-selected", "false");
+        }
     },
 
     // Private

diff --git a/Source/WebInspectorUI/UserInterface/Sidebar.js b/Source/WebInspectorUI/UserInterface/Sidebar.js
@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.Sidebar = function(element, side, sidebarPanels) {
+WebInspector.Sidebar = function(element, side, sidebarPanels, role, label) {
     WebInspector.Object.call(this);
 
     console.assert(!side || side === WebInspector.Sidebar.Sides.Left || side === WebInspector.Sidebar.Sides.Right);
@@ -34,6 +34,10 @@ WebInspector.Sidebar = function(element, side, sidebarPanels) {
     this._element.classList.add(WebInspector.Sidebar.CollapsedStyleClassName);
     this._element.classList.add(this._side);
 
+    this._element.setAttribute("role", role || "group");
+    if (label)
+        this._element.setAttribute("aria-label", label);
+
     this._resizeElement = document.createElement("div");
     this._resizeElement.classList.add(WebInspector.Sidebar.ResizeElementStyleClassName);
     this._resizeElement.addEventListener("mousedown", this._resizerMouseDown.bind(this), false);

diff --git a/Source/WebInspectorUI/UserInterface/SidebarPanel.js b/Source/WebInspectorUI/UserInterface/SidebarPanel.js
@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideToolTip, image, element) {
+WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideToolTip, image, element, role, label) {
     WebInspector.Object.call(this);
 
     this._identifier = identifier;
@@ -35,6 +35,10 @@ WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideT
     this._element = element || document.createElement("div");
     this._element.classList.add(WebInspector.SidebarPanel.StyleClassName);
     this._element.classList.add(identifier);
+
+    this._element.setAttribute("role", role || "group");
+    this._element.setAttribute("aria-label", label || displayName);
+
 };
 
 WebInspector.SidebarPanel.StyleClassName = "panel";

diff --git a/Source/WebInspectorUI/UserInterface/Toolbar.js b/Source/WebInspectorUI/UserInterface/Toolbar.js
@@ -24,7 +24,7 @@
  */
 
 WebInspector.Toolbar = function(element, navigationItems) {
-    WebInspector.NavigationBar.call(this, element, navigationItems);
+    WebInspector.NavigationBar.call(this, element, navigationItems, "toolbar");
 
     this.displayMode = WebInspector.Toolbar.DisplayMode.IconAndLabelVertical;
     this.sizeMode = WebInspector.Toolbar.SizeMode.Normal;