Changeset 152141 in webkit


Ignore:
Timestamp:
Jun 27, 2013 5:17:22 PM (11 years ago)
Author:
commit-queue@webkit.org
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 <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:
Location:
trunk/Source/WebInspectorUI
Files:
13 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebInspectorUI/ChangeLog

    r152136 r152141  
     12013-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
    1252013-06-27  James Craig  <james@cookiecrook.com>
    226
  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r152136 r152141  
    2929localizedStrings["1 match"] = "1 match";
    3030localizedStrings["999+"] = "999+";
     31localizedStrings["Activity Viewer"] = "Activity Viewer";
    3132localizedStrings["Add Attribute"] = "Add Attribute";
    3233localizedStrings["Add New"] = "Add New";
     
    8384localizedStrings["Console logs, click to show the Console"] = "Console logs, click to show the Console";
    8485localizedStrings["Console warnings, click to show the Console"] = "Console warnings, click to show the Console";
     86localizedStrings["Content"] = "Content";
    8587localizedStrings["Continue script execution (%s or %s)"] = "Continue script execution (%s or %s)";
    8688localizedStrings["Cookies"] = "Cookies";
  • trunk/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js

    r151453 r152141  
    2424 */
    2525
    26 WebInspector.ButtonNavigationItem = function(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss) {
     26WebInspector.ButtonNavigationItem = function(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss, role, label) {
    2727    WebInspector.NavigationItem.call(this, identifier);
    2828
     
    3333
    3434    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);
    3540
    3641    this._imageWidth = imageWidth || 16;
  • trunk/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js

    r151453 r152141  
    3030    this._selectedPanel = null;
    3131
    32     this._navigationBar = new WebInspector.NavigationBar;
     32    this._navigationBar = new WebInspector.NavigationBar(null, null, "tablist");
    3333    this._navigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
    3434    this.element.appendChild(this._navigationBar.element);
  • trunk/Source/WebInspectorUI/UserInterface/DashboardManager.js

    r151453 r152141  
    2727    WebInspector.Object.call(this);
    2828
    29     this.toolbarItem = new WebInspector.NavigationItem("dashboard");
     29    this.toolbarItem = new WebInspector.NavigationItem("dashboard", "group", WebInspector.UIString("Activity Viewer"));
    3030    this._view = new WebInspector.DashboardView(this.toolbarItem.element);
    3131
  • trunk/Source/WebInspectorUI/UserInterface/Main.js

    r151918 r152141  
    145145    this.toolbar.addEventListener(WebInspector.Toolbar.Event.DisplayModeDidChange, this._toolbarDisplayModeDidChange, this);
    146146    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"));
    147151
    148152    this.contentBrowser = new WebInspector.ContentBrowser(document.getElementById("content-browser"), this);
     
    166170    this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.SidebarPanelSelected, this._navigationSidebarPanelSelected, this);
    167171
    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"));
    169173    this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.CollapsedStateDidChange, this._sidebarCollapsedStateDidChange, this);
    170174    this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
  • trunk/Source/WebInspectorUI/UserInterface/NavigationBar.js

    r151453 r152141  
    2424 */
    2525
    26 WebInspector.NavigationBar = function(element, navigationItems) {
     26WebInspector.NavigationBar = function(element, navigationItems, role, label) {
    2727    WebInspector.Object.call(this);
    2828
     
    3030    this._element.classList.add(this.constructor.StyleClassName || WebInspector.NavigationBar.StyleClassName);
    3131    this._element.tabIndex = 0;
     32   
     33    if (role)
     34        this._element.setAttribute("role", role);
     35    if (label)
     36        this._element.setAttribute("aria-label", label);
    3237
    3338    this._element.addEventListener("focus", this._focus.bind(this), false);
  • trunk/Source/WebInspectorUI/UserInterface/NavigationItem.js

    r151453 r152141  
    2424 */
    2525
    26 WebInspector.NavigationItem = function(identifier) {
     26WebInspector.NavigationItem = function(identifier, role, label) {
    2727    WebInspector.Object.call(this);
    2828
     
    3030
    3131    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);
    3237
    3338    var classNames = this._classNames;
  • trunk/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js

    r151453 r152141  
    2424 */
    2525
    26 WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, keyboardShortcutKey, autoPruneOldTopLevelResourceTreeElements, autoHideToolbarItemWhenEmpty, wantsTopOverflowShadow, element) {
     26WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, keyboardShortcutKey, autoPruneOldTopLevelResourceTreeElements, autoHideToolbarItemWhenEmpty, wantsTopOverflowShadow, element, role, label) {
    2727    if (keyboardShortcutKey)
    2828        this._keyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, keyboardShortcutKey, this.toggle.bind(this));
     
    3636    }
    3737
    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);
    3939
    4040    this.element.classList.add(WebInspector.NavigationSidebarPanel.StyleClassName);
  • trunk/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js

    r151453 r152141  
    2525
    2626WebInspector.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");
    2828};
    2929
     
    4444    set selected(flag)
    4545    {
    46         if (flag)
     46        if (flag) {
    4747            this.element.classList.add(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
    48         else
     48            this.element.setAttribute("aria-selected", "true");
     49        } else {
    4950            this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
     51            this.element.setAttribute("aria-selected", "false");
     52        }
    5053    },
    5154
     
    8689        var isSelected = this.selected;
    8790
    88         if (!isSelected)
     91        if (!isSelected) {
    8992            this.element.classList.add(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
     93            this.element.setAttribute("aria-selected", "true");
     94        }
    9095
    9196        var selectedWidth = this.element.offsetWidth;
     
    9398            this.element.style.minWidth = selectedWidth + "px";
    9499
    95         if (!isSelected)
     100        if (!isSelected) {
    96101            this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
     102            this.element.setAttribute("aria-selected", "false");
     103        }
    97104    },
    98105
  • trunk/Source/WebInspectorUI/UserInterface/Sidebar.js

    r151453 r152141  
    2424 */
    2525
    26 WebInspector.Sidebar = function(element, side, sidebarPanels) {
     26WebInspector.Sidebar = function(element, side, sidebarPanels, role, label) {
    2727    WebInspector.Object.call(this);
    2828
     
    3434    this._element.classList.add(WebInspector.Sidebar.CollapsedStyleClassName);
    3535    this._element.classList.add(this._side);
     36
     37    this._element.setAttribute("role", role || "group");
     38    if (label)
     39        this._element.setAttribute("aria-label", label);
    3640
    3741    this._resizeElement = document.createElement("div");
  • trunk/Source/WebInspectorUI/UserInterface/SidebarPanel.js

    r151453 r152141  
    2424 */
    2525
    26 WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideToolTip, image, element) {
     26WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideToolTip, image, element, role, label) {
    2727    WebInspector.Object.call(this);
    2828
     
    3636    this._element.classList.add(WebInspector.SidebarPanel.StyleClassName);
    3737    this._element.classList.add(identifier);
     38
     39    this._element.setAttribute("role", role || "group");
     40    this._element.setAttribute("aria-label", label || displayName);
     41
    3842};
    3943
  • trunk/Source/WebInspectorUI/UserInterface/Toolbar.js

    r151453 r152141  
    2525
    2626WebInspector.Toolbar = function(element, navigationItems) {
    27     WebInspector.NavigationBar.call(this, element, navigationItems);
     27    WebInspector.NavigationBar.call(this, element, navigationItems, "toolbar");
    2828
    2929    this.displayMode = WebInspector.Toolbar.DisplayMode.IconAndLabelVertical;
Note: See TracChangeset for help on using the changeset viewer.