diff --git a/front_end/core/i18n/locales/en-US.json b/front_end/core/i18n/locales/en-US.json index 07f8f16493..16154c06ec 100644 --- a/front_end/core/i18n/locales/en-US.json +++ b/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" }, diff --git a/front_end/core/i18n/locales/en-XL.json b/front_end/core/i18n/locales/en-XL.json index 081ba3c814..f74743a79d 100644 --- a/front_end/core/i18n/locales/en-XL.json +++ b/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̂óôĺŝ" }, diff --git a/front_end/panels/elements/ElementsPanel.ts b/front_end/panels/elements/ElementsPanel.ts index 2acf8d5187..3d70ce4579 100644 --- a/front_end/panels/elements/ElementsPanel.ts +++ b/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'); diff --git a/front_end/panels/elements/components/ElementsBreadcrumbs.ts b/front_end/panels/elements/components/ElementsBreadcrumbs.ts index 17d911dd8d..940ace4e5d 100644 --- a/front_end/panels/elements/components/ElementsBreadcrumbs.ts +++ b/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` -