[webkit-changes] [152141] trunk/Source/WebInspectorUI

Thu, 27 Jun 2013 17:16:28 -0700

Title: [152141] trunk/Source/WebInspectorUI
Revision
152141
Author
commit-qu...@webkit.org
Date
2013-06-27 17:17:22 -0700 (Thu, 27 Jun 2013)

Log Message

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

Patch by James Craig <ja...@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:

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (152140 => 152141)


--- trunk/Source/WebInspectorUI/ChangeLog	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/ChangeLog	2013-06-28 00:17:22 UTC (rev 152141)
@@ -1,5 +1,29 @@
 2013-06-27  James Craig  <ja...@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  <ja...@cookiecrook.com>
+
         Web Inspector: AX: Console log of the Inspector does not announce output for screen readers
         https://bugs.webkit.org/show_bug.cgi?id=115976

Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (152140 => 152141)


--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2013-06-28 00:17:22 UTC (rev 152141)
@@ -28,6 +28,7 @@
 localizedStrings["(anonymous function)"] = "(anonymous function)";
 localizedStrings["1 match"] = "1 match";
 localizedStrings["999+"] = "999+";
+localizedStrings["Activity Viewer"] = "Activity Viewer";
 localizedStrings["Add Attribute"] = "Add Attribute";
 localizedStrings["Add New"] = "Add New";
 localizedStrings["All"] = "All";
@@ -82,6 +83,7 @@
 localizedStrings["Console errors, click to show the Console"] = "Console errors, click to show the Console";
 localizedStrings["Console logs, click to show the Console"] = "Console logs, click to show the Console";
 localizedStrings["Console warnings, click to show the Console"] = "Console warnings, click to show the Console";
+localizedStrings["Content"] = "Content";
 localizedStrings["Continue script execution (%s or %s)"] = "Continue script execution (%s or %s)";
 localizedStrings["Cookies"] = "Cookies";
 localizedStrings["Copy Row"] = "Copy Row";

Modified: trunk/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js (152140 => 152141)


--- trunk/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js	2013-06-28 00:17:22 UTC (rev 152141)
@@ -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 @@
     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;

Modified: trunk/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js (152140 => 152141)


--- trunk/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js	2013-06-28 00:17:22 UTC (rev 152141)
@@ -29,7 +29,7 @@
 
     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);

Modified: trunk/Source/WebInspectorUI/UserInterface/DashboardManager.js (152140 => 152141)


--- trunk/Source/WebInspectorUI/UserInterface/DashboardManager.js	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/UserInterface/DashboardManager.js	2013-06-28 00:17:22 UTC (rev 152141)
@@ -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;

Modified: trunk/Source/WebInspectorUI/UserInterface/Main.js (152140 => 152141)


--- trunk/Source/WebInspectorUI/UserInterface/Main.js	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.js	2013-06-28 00:17:22 UTC (rev 152141)
@@ -144,6 +144,10 @@
     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 @@
     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);

Modified: trunk/Source/WebInspectorUI/UserInterface/NavigationBar.js (152140 => 152141)


--- trunk/Source/WebInspectorUI/UserInterface/NavigationBar.js	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/UserInterface/NavigationBar.js	2013-06-28 00:17:22 UTC (rev 152141)
@@ -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);

Modified: trunk/Source/WebInspectorUI/UserInterface/NavigationItem.js (152140 => 152141)


--- trunk/Source/WebInspectorUI/UserInterface/NavigationItem.js	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/UserInterface/NavigationItem.js	2013-06-28 00:17:22 UTC (rev 152141)
@@ -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)

Modified: trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js (152140 => 152141)


--- trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js	2013-06-28 00:17:22 UTC (rev 152141)
@@ -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 @@
         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);

Modified: trunk/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js (152140 => 152141)


--- trunk/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js	2013-06-28 00:17:22 UTC (rev 152141)
@@ -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 @@
 
     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 @@
 
         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

Modified: trunk/Source/WebInspectorUI/UserInterface/Sidebar.js (152140 => 152141)


--- trunk/Source/WebInspectorUI/UserInterface/Sidebar.js	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/UserInterface/Sidebar.js	2013-06-28 00:17:22 UTC (rev 152141)
@@ -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 @@
     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);

Modified: trunk/Source/WebInspectorUI/UserInterface/SidebarPanel.js (152140 => 152141)


--- trunk/Source/WebInspectorUI/UserInterface/SidebarPanel.js	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/UserInterface/SidebarPanel.js	2013-06-28 00:17:22 UTC (rev 152141)
@@ -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 @@
     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";

Modified: trunk/Source/WebInspectorUI/UserInterface/Toolbar.js (152140 => 152141)


--- trunk/Source/WebInspectorUI/UserInterface/Toolbar.js	2013-06-28 00:14:57 UTC (rev 152140)
+++ trunk/Source/WebInspectorUI/UserInterface/Toolbar.js	2013-06-28 00:17:22 UTC (rev 152141)
@@ -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;

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to