Changeset 152141 in webkit
- Timestamp:
- Jun 27, 2013 5:17:22 PM (11 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 13 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r152136 r152141 1 2013-06-27 James Craig <james@cookiecrook.com> 2 3 Web Inspector: AX: Add container ARIA roles (toolbar, main, labeled regions, etc.) 4 so the layout is more discoverable to screen reader users 5 https://bugs.webkit.org/show_bug.cgi?id=118104 6 7 Reviewed by Timothy Hatcher. 8 9 Made the basic layout (toolbar, sidebars, main) of the Web Inspector understandable 10 and navigable with VoiceOver. 11 12 * Localizations/en.lproj/localizedStrings.js: 13 * UserInterface/ButtonNavigationItem.js: 14 * UserInterface/CSSStyleDetailsSidebarPanel.js: 15 * UserInterface/DashboardManager.js: 16 * UserInterface/Main.js: 17 * UserInterface/NavigationBar.js: 18 * UserInterface/NavigationItem.js: 19 * UserInterface/NavigationSidebarPanel.js: 20 * UserInterface/RadioButtonNavigationItem.js: 21 * UserInterface/Sidebar.js: 22 * UserInterface/SidebarPanel.js: 23 * UserInterface/Toolbar.js: 24 1 25 2013-06-27 James Craig <james@cookiecrook.com> 2 26 -
trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
r152136 r152141 29 29 localizedStrings["1 match"] = "1 match"; 30 30 localizedStrings["999+"] = "999+"; 31 localizedStrings["Activity Viewer"] = "Activity Viewer"; 31 32 localizedStrings["Add Attribute"] = "Add Attribute"; 32 33 localizedStrings["Add New"] = "Add New"; … … 83 84 localizedStrings["Console logs, click to show the Console"] = "Console logs, click to show the Console"; 84 85 localizedStrings["Console warnings, click to show the Console"] = "Console warnings, click to show the Console"; 86 localizedStrings["Content"] = "Content"; 85 87 localizedStrings["Continue script execution (%s or %s)"] = "Continue script execution (%s or %s)"; 86 88 localizedStrings["Cookies"] = "Cookies"; -
trunk/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js
r151453 r152141 24 24 */ 25 25 26 WebInspector.ButtonNavigationItem = function(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss ) {26 WebInspector.ButtonNavigationItem = function(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss, role, label) { 27 27 WebInspector.NavigationItem.call(this, identifier); 28 28 … … 33 33 34 34 this._element.addEventListener("click", this._mouseClicked.bind(this)); 35 36 this._element.setAttribute("role", role || "button"); 37 38 if (label) 39 this._element.setAttribute("aria-label", label); 35 40 36 41 this._imageWidth = imageWidth || 16; -
trunk/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js
r151453 r152141 30 30 this._selectedPanel = null; 31 31 32 this._navigationBar = new WebInspector.NavigationBar ;32 this._navigationBar = new WebInspector.NavigationBar(null, null, "tablist"); 33 33 this._navigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this); 34 34 this.element.appendChild(this._navigationBar.element); -
trunk/Source/WebInspectorUI/UserInterface/DashboardManager.js
r151453 r152141 27 27 WebInspector.Object.call(this); 28 28 29 this.toolbarItem = new WebInspector.NavigationItem("dashboard" );29 this.toolbarItem = new WebInspector.NavigationItem("dashboard", "group", WebInspector.UIString("Activity Viewer")); 30 30 this._view = new WebInspector.DashboardView(this.toolbarItem.element); 31 31 -
trunk/Source/WebInspectorUI/UserInterface/Main.js
r151918 r152141 145 145 this.toolbar.addEventListener(WebInspector.Toolbar.Event.DisplayModeDidChange, this._toolbarDisplayModeDidChange, this); 146 146 this.toolbar.addEventListener(WebInspector.Toolbar.Event.SizeModeDidChange, this._toolbarSizeModeDidChange, this); 147 148 var contentElement = document.getElementById("content"); 149 contentElement.setAttribute("role", "main"); 150 contentElement.setAttribute("aria-label", WebInspector.UIString("Content")); 147 151 148 152 this.contentBrowser = new WebInspector.ContentBrowser(document.getElementById("content-browser"), this); … … 166 170 this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.SidebarPanelSelected, this._navigationSidebarPanelSelected, this); 167 171 168 this.rightSidebar = this.detailsSidebar = new WebInspector.Sidebar(document.getElementById("details-sidebar"), WebInspector.Sidebar.Sides.Right );172 this.rightSidebar = this.detailsSidebar = new WebInspector.Sidebar(document.getElementById("details-sidebar"), WebInspector.Sidebar.Sides.Right, "group", WebInspector.UIString("Details")); 169 173 this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.CollapsedStateDidChange, this._sidebarCollapsedStateDidChange, this); 170 174 this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this); -
trunk/Source/WebInspectorUI/UserInterface/NavigationBar.js
r151453 r152141 24 24 */ 25 25 26 WebInspector.NavigationBar = function(element, navigationItems ) {26 WebInspector.NavigationBar = function(element, navigationItems, role, label) { 27 27 WebInspector.Object.call(this); 28 28 … … 30 30 this._element.classList.add(this.constructor.StyleClassName || WebInspector.NavigationBar.StyleClassName); 31 31 this._element.tabIndex = 0; 32 33 if (role) 34 this._element.setAttribute("role", role); 35 if (label) 36 this._element.setAttribute("aria-label", label); 32 37 33 38 this._element.addEventListener("focus", this._focus.bind(this), false); -
trunk/Source/WebInspectorUI/UserInterface/NavigationItem.js
r151453 r152141 24 24 */ 25 25 26 WebInspector.NavigationItem = function(identifier ) {26 WebInspector.NavigationItem = function(identifier, role, label) { 27 27 WebInspector.Object.call(this); 28 28 … … 30 30 31 31 this._element = document.createElement("div"); 32 33 if (role) 34 this._element.setAttribute("role", role); 35 if (label) 36 this._element.setAttribute("aria-label", label); 32 37 33 38 var classNames = this._classNames; -
trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js
r151453 r152141 24 24 */ 25 25 26 WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, keyboardShortcutKey, autoPruneOldTopLevelResourceTreeElements, autoHideToolbarItemWhenEmpty, wantsTopOverflowShadow, element ) {26 WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, keyboardShortcutKey, autoPruneOldTopLevelResourceTreeElements, autoHideToolbarItemWhenEmpty, wantsTopOverflowShadow, element, role, label) { 27 27 if (keyboardShortcutKey) 28 28 this._keyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, keyboardShortcutKey, this.toggle.bind(this)); … … 36 36 } 37 37 38 WebInspector.SidebarPanel.call(this, identifier, displayName, showToolTip, hideToolTip, image, element );38 WebInspector.SidebarPanel.call(this, identifier, displayName, showToolTip, hideToolTip, image, element, role, label || displayName); 39 39 40 40 this.element.classList.add(WebInspector.NavigationSidebarPanel.StyleClassName); -
trunk/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js
r151453 r152141 25 25 26 26 WebInspector.RadioButtonNavigationItem = function(identifier, toolTip, image, imageWidth, imageHeight) { 27 WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, imageWidth, imageHeight );27 WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, imageWidth, imageHeight, null, "tab"); 28 28 }; 29 29 … … 44 44 set selected(flag) 45 45 { 46 if (flag) 46 if (flag) { 47 47 this.element.classList.add(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName); 48 else 48 this.element.setAttribute("aria-selected", "true"); 49 } else { 49 50 this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName); 51 this.element.setAttribute("aria-selected", "false"); 52 } 50 53 }, 51 54 … … 86 89 var isSelected = this.selected; 87 90 88 if (!isSelected) 91 if (!isSelected) { 89 92 this.element.classList.add(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName); 93 this.element.setAttribute("aria-selected", "true"); 94 } 90 95 91 96 var selectedWidth = this.element.offsetWidth; … … 93 98 this.element.style.minWidth = selectedWidth + "px"; 94 99 95 if (!isSelected) 100 if (!isSelected) { 96 101 this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName); 102 this.element.setAttribute("aria-selected", "false"); 103 } 97 104 }, 98 105 -
trunk/Source/WebInspectorUI/UserInterface/Sidebar.js
r151453 r152141 24 24 */ 25 25 26 WebInspector.Sidebar = function(element, side, sidebarPanels ) {26 WebInspector.Sidebar = function(element, side, sidebarPanels, role, label) { 27 27 WebInspector.Object.call(this); 28 28 … … 34 34 this._element.classList.add(WebInspector.Sidebar.CollapsedStyleClassName); 35 35 this._element.classList.add(this._side); 36 37 this._element.setAttribute("role", role || "group"); 38 if (label) 39 this._element.setAttribute("aria-label", label); 36 40 37 41 this._resizeElement = document.createElement("div"); -
trunk/Source/WebInspectorUI/UserInterface/SidebarPanel.js
r151453 r152141 24 24 */ 25 25 26 WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideToolTip, image, element ) {26 WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideToolTip, image, element, role, label) { 27 27 WebInspector.Object.call(this); 28 28 … … 36 36 this._element.classList.add(WebInspector.SidebarPanel.StyleClassName); 37 37 this._element.classList.add(identifier); 38 39 this._element.setAttribute("role", role || "group"); 40 this._element.setAttribute("aria-label", label || displayName); 41 38 42 }; 39 43 -
trunk/Source/WebInspectorUI/UserInterface/Toolbar.js
r151453 r152141 25 25 26 26 WebInspector.Toolbar = function(element, navigationItems) { 27 WebInspector.NavigationBar.call(this, element, navigationItems );27 WebInspector.NavigationBar.call(this, element, navigationItems, "toolbar"); 28 28 29 29 this.displayMode = WebInspector.Toolbar.DisplayMode.IconAndLabelVertical;
Note: See TracChangeset
for help on using the changeset viewer.