Add landmark roles and labels to major UI elements

Screenshot: https://imgur.com/a/ccuRojg
Doc:
https://docs.google.com/document/d/18MDV-zD1bNr8hmcLw7WV3-CMX_nFnmM-yxR0Dp3Ct5s/
Fixed: 1215298
Change-Id: I8997fc6238e114dae0587348babf13da8a2bf52a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3157956
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Johan Bay <jobay@chromium.org>

front_end/core/i18n/locales/en-US.json

@@ -3965,6 +3965,9 @@
   "panels/elements/components/AdornerSettingsPane.ts | settingsTitle": {
     "message": "Show badges"
   },
+  "panels/elements/components/ElementsBreadcrumbs.ts | breadcrumbs": {
+    "message": "DOM tree breadcrumbs"
+  },
   "panels/elements/components/ElementsBreadcrumbsUtils.ts | text": {
     "message": "(text)"
   },
@@ -4103,6 +4106,9 @@
   "panels/elements/ElementsPanel.ts | computed": {
     "message": "Computed"
   },
+  "panels/elements/ElementsPanel.ts | domTreeExplorer": {
+    "message": "DOM tree explorer"
+  },
   "panels/elements/ElementsPanel.ts | elementStateS": {
     "message": "Element state: {PH1}"
   },
@@ -4124,6 +4130,12 @@
   "panels/elements/ElementsPanel.ts | showComputedStylesSidebar": {
     "message": "Show Computed Styles sidebar"
   },
+  "panels/elements/ElementsPanel.ts | sidePanelContent": {
+    "message": "Side panel content"
+  },
+  "panels/elements/ElementsPanel.ts | sidePanelToolbar": {
+    "message": "Side panel toolbar"
+  },
   "panels/elements/ElementsPanel.ts | styles": {
     "message": "Styles"
   },
@@ -11606,6 +11618,12 @@
   "ui/legacy/InspectorView.ts | devToolsLanguageMissmatch": {
     "message": "DevTools is now available in {PH1}!"
   },
+  "ui/legacy/InspectorView.ts | drawer": {
+    "message": "Tool drawer"
+  },
+  "ui/legacy/InspectorView.ts | mainToolbar": {
+    "message": "Main toolbar"
+  },
   "ui/legacy/InspectorView.ts | moreTools": {
     "message": "More Tools"
   },

front_end/core/i18n/locales/en-XL.json

@@ -3965,6 +3965,9 @@
   "panels/elements/components/AdornerSettingsPane.ts | settingsTitle": {
     "message": "Ŝh́ôẃ b̂ád̂ǵêś"
   },
+  "panels/elements/components/ElementsBreadcrumbs.ts | breadcrumbs": {
+    "message": "D̂ÓM̂ t́r̂éê b́r̂éâd́ĉŕûḿb̂ś"
+  },
   "panels/elements/components/ElementsBreadcrumbsUtils.ts | text": {
     "message": "(t̂éx̂t́)"
   },
@@ -4103,6 +4106,9 @@
   "panels/elements/ElementsPanel.ts | computed": {
     "message": "Ĉóm̂ṕût́êd́"
   },
+  "panels/elements/ElementsPanel.ts | domTreeExplorer": {
+    "message": "D̂ÓM̂ t́r̂éê éx̂ṕl̂ór̂ér̂"
+  },
   "panels/elements/ElementsPanel.ts | elementStateS": {
     "message": "Êĺêḿêńt̂ śt̂át̂é: {PH1}"
   },
@@ -4124,6 +4130,12 @@
   "panels/elements/ElementsPanel.ts | showComputedStylesSidebar": {
     "message": "Ŝh́ôẃ Ĉóm̂ṕût́êd́ Ŝt́ŷĺêś ŝíd̂éb̂ár̂"
   },
+  "panels/elements/ElementsPanel.ts | sidePanelContent": {
+    "message": "Ŝíd̂é p̂án̂él̂ ćôńt̂én̂t́"
+  },
+  "panels/elements/ElementsPanel.ts | sidePanelToolbar": {
+    "message": "Ŝíd̂é p̂án̂él̂ t́ôól̂b́âŕ"
+  },
   "panels/elements/ElementsPanel.ts | styles": {
     "message": "Ŝt́ŷĺêś"
   },
@@ -11606,6 +11618,12 @@
   "ui/legacy/InspectorView.ts | devToolsLanguageMissmatch": {
     "message": "D̂év̂T́ôól̂ś îś n̂óŵ áv̂áîĺâb́l̂é îń {PH1}!"
   },
+  "ui/legacy/InspectorView.ts | drawer": {
+    "message": "T̂óôĺ d̂ŕâẃêŕ"
+  },
+  "ui/legacy/InspectorView.ts | mainToolbar": {
+    "message": "M̂áîń t̂óôĺb̂ár̂"
+  },
   "ui/legacy/InspectorView.ts | moreTools": {
     "message": "M̂ór̂é T̂óôĺŝ"
   },

front_end/panels/elements/ElementsPanel.ts

@@ -124,6 +124,18 @@ const UIStrings = {
   * @example {::after, ::before} PH1
   */
   elementStateS: 'Element state: {PH1}',
+  /**
+  * @description Accessible name for side panel toolbar.
+  */
+  sidePanelToolbar: 'Side panel toolbar',
+  /**
+  * @description Accessible name for side panel contents.
+  */
+  sidePanelContent: 'Side panel content',
+  /**
+  * @description Accessible name for the DOM tree explorer view.
+  */
+  domTreeExplorer: 'DOM tree explorer',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsPanel.ts', UIStrings);
@@ -205,6 +217,9 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     stackElement.appendChild(this.contentElementInternal);
     stackElement.appendChild(crumbsContainer);
 
+    UI.ARIAUtils.markAsMain(this.contentElementInternal);
+    UI.ARIAUtils.setAccessibleName(this.contentElementInternal, i18nString(UIStrings.domTreeExplorer));
+
     this.splitWidget.setMainWidget(this.searchableViewInternal);
     this.splitMode = null;
 
@@ -987,6 +1002,14 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       this.splitWidget.installResizer(tabbedPane.headerElement());
     }
 
+    const headerElement = tabbedPane.headerElement();
+    UI.ARIAUtils.markAsNavigation(headerElement);
+    UI.ARIAUtils.setAccessibleName(headerElement, i18nString(UIStrings.sidePanelToolbar));
+
+    const contentElement = tabbedPane.tabbedPaneContentElement();
+    UI.ARIAUtils.markAsComplementary(contentElement);
+    UI.ARIAUtils.setAccessibleName(contentElement, i18nString(UIStrings.sidePanelContent));
+
     const stylesView = new UI.View.SimpleView(i18nString(UIStrings.styles));
     this.sidebarPaneView.appendView(stylesView);
     stylesView.element.classList.add('flex-auto');

front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -2,9 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../../../core/i18n/i18n.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
 import elementsBreadcrumbsStyles from './elementsBreadcrumbs.css.js';
 
 import type {UserScrollPosition} from './ElementsBreadcrumbsUtils.js';
@@ -15,6 +17,16 @@ import type {DOMNode} from './Helper.js';
 import {NodeText} from './NodeText.js';
 import type {NodeTextData} from './NodeText.js';
 
+const UIStrings = {
+  /**
+  * @description Accessible name for DOM tree breadcrumb navigation.
+  */
+  breadcrumbs: 'DOM tree breadcrumbs',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/elements/components/ElementsBreadcrumbs.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export class NodeSelectedEvent extends Event {
   static readonly eventName = 'breadcrumbsnodeselected';
   legacyDomNode: SDK.DOMModel.DOMNode;
@@ -264,7 +276,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(LitHtml.html`
-        <nav class="crumbs">
+        <nav class="crumbs" aria-label="${i18nString(UIStrings.breadcrumbs)}">
           ${this.renderOverflowButton('left', this.userScrollPosition === 'start')}
 
           <div class="crumbs-window" @scroll=${this.onCrumbsWindowScroll}>

front_end/ui/legacy/ARIAUtils.ts

@@ -108,6 +108,18 @@ export function markAsListitem(element: Element): void {
   element.setAttribute('role', 'listitem');
 }
 
+export function markAsMain(element: Element): void {
+  element.setAttribute('role', 'main');
+}
+
+export function markAsComplementary(element: Element): void {
+  element.setAttribute('role', 'complementary');
+}
+
+export function markAsNavigation(element: Element): void {
+  element.setAttribute('role', 'navigation');
+}
+
 /**
  * Must contain children whose role is option.
  */

front_end/ui/legacy/InspectorView.ts

@@ -51,6 +51,7 @@ import type {TabbedViewLocation, View, ViewLocation, ViewLocationResolver} from
 import {ViewManager} from './ViewManager.js';
 import type {Widget} from './Widget.js';
 import {VBox, WidgetFocusRestorer} from './Widget.js';
+import * as ARIAUtils from './ARIAUtils.js';
 
 const UIStrings = {
   /**
@@ -97,6 +98,14 @@ const UIStrings = {
    * @example {German} PH1
    */
   setToSpecificLanguage: 'Switch DevTools to {PH1}',
+  /**
+  *@description The aria label for main toolbar
+  */
+  mainToolbar: 'Main toolbar',
+  /**
+  *@description The aria label for the drawer.
+  */
+  drawer: 'Tool drawer',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/InspectorView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -142,6 +151,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.drawerTabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this.tabSelected, this);
     this.drawerTabbedPane.setTabDelegate(this.tabDelegate);
 
+    const drawerElement = this.drawerTabbedPane.element;
+    ARIAUtils.markAsComplementary(drawerElement);
+    ARIAUtils.setAccessibleName(drawerElement, i18nString(UIStrings.drawer));
+
     this.drawerSplitWidget.installResizer(this.drawerTabbedPane.headerElement());
     this.drawerSplitWidget.setSidebarWidget(this.drawerTabbedPane);
     this.drawerTabbedPane.rightToolbar().appendToolbarItem(closeDrawerButton);
@@ -159,6 +172,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.tabbedPane.setAccessibleName(i18nString(UIStrings.panels));
     this.tabbedPane.setTabDelegate(this.tabDelegate);
 
+    const mainHeaderElement = this.tabbedPane.headerElement();
+    ARIAUtils.markAsNavigation(mainHeaderElement);
+    ARIAUtils.setAccessibleName(mainHeaderElement, i18nString(UIStrings.mainToolbar));
+
     // Store the initial selected panel for use in launch histograms
     Host.userMetrics.setLaunchPanel(this.tabbedPane.selectedTabId);
 

front_end/ui/legacy/TabbedPane.ts

@@ -204,6 +204,10 @@ export class TabbedPane extends VBox {
     return this.headerElementInternal;
   }
 
+  tabbedPaneContentElement(): Element {
+    return this.contentElementInternal;
+  }
+
   isTabCloseable(id: string): boolean {
     const tab = this.tabsById.get(id);
     return tab ? tab.isCloseable() : false;