[webkit-changes] [152309] branches/safari-537-branch/Source/WebInspectorUI

Tue, 02 Jul 2013 12:24:16 -0700

Title: [152309] branches/safari-537-branch/Source/WebInspectorUI

Diff

Modified: branches/safari-537-branch/Source/WebInspectorUI/ChangeLog (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/ChangeLog	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/ChangeLog	2013-07-02 19:24:35 UTC (rev 152309)
@@ -1,5 +1,33 @@
 2013-07-02  Lucas Forschler  <[email protected]>
 
+        Merge r152141
+
+    2013-06-27  James Craig  <[email protected]>
+
+            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-07-02  Lucas Forschler  <[email protected]>
+
         Merge r152136
 
     2013-06-27  James Craig  <[email protected]>

Modified: branches/safari-537-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js	2013-07-02 19:24:35 UTC (rev 152309)
@@ -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: branches/safari-537-branch/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js	2013-07-02 19:24:35 UTC (rev 152309)
@@ -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: branches/safari-537-branch/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js	2013-07-02 19:24:35 UTC (rev 152309)
@@ -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: branches/safari-537-branch/Source/WebInspectorUI/UserInterface/DashboardManager.js (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/UserInterface/DashboardManager.js	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/UserInterface/DashboardManager.js	2013-07-02 19:24:35 UTC (rev 152309)
@@ -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: branches/safari-537-branch/Source/WebInspectorUI/UserInterface/Main.js (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/UserInterface/Main.js	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/UserInterface/Main.js	2013-07-02 19:24:35 UTC (rev 152309)
@@ -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: branches/safari-537-branch/Source/WebInspectorUI/UserInterface/NavigationBar.js (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/UserInterface/NavigationBar.js	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/UserInterface/NavigationBar.js	2013-07-02 19:24:35 UTC (rev 152309)
@@ -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: branches/safari-537-branch/Source/WebInspectorUI/UserInterface/NavigationItem.js (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/UserInterface/NavigationItem.js	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/UserInterface/NavigationItem.js	2013-07-02 19:24:35 UTC (rev 152309)
@@ -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: branches/safari-537-branch/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js	2013-07-02 19:24:35 UTC (rev 152309)
@@ -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: branches/safari-537-branch/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js	2013-07-02 19:24:35 UTC (rev 152309)
@@ -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: branches/safari-537-branch/Source/WebInspectorUI/UserInterface/Sidebar.js (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/UserInterface/Sidebar.js	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/UserInterface/Sidebar.js	2013-07-02 19:24:35 UTC (rev 152309)
@@ -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: branches/safari-537-branch/Source/WebInspectorUI/UserInterface/SidebarPanel.js (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/UserInterface/SidebarPanel.js	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/UserInterface/SidebarPanel.js	2013-07-02 19:24:35 UTC (rev 152309)
@@ -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: branches/safari-537-branch/Source/WebInspectorUI/UserInterface/Toolbar.js (152308 => 152309)


--- branches/safari-537-branch/Source/WebInspectorUI/UserInterface/Toolbar.js	2013-07-02 19:21:27 UTC (rev 152308)
+++ branches/safari-537-branch/Source/WebInspectorUI/UserInterface/Toolbar.js	2013-07-02 19:24:35 UTC (rev 152309)
@@ -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
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to