diff --git a/front_end/ui/ARIAUtils.js b/front_end/ui/ARIAUtils.js index 365f3b93f1..d34de1f1b6 100644 --- a/front_end/ui/ARIAUtils.js +++ b/front_end/ui/ARIAUtils.js @@ -99,6 +99,13 @@ export function markAsTab(element) { element.setAttribute('role', 'tab'); } +/** + * @param {!Element} element + */ +export function markAsTabpanel(element) { + element.setAttribute('role', 'tabpanel'); +} + /** * @param {!Element} element */ @@ -508,6 +515,7 @@ self.UI.ARIAUtils = { markAsMenuButton, markAsProgressBar, markAsTab, + markAsTabpanel, markAsTree, markAsTreeitem, markAsTextBox, diff --git a/front_end/ui/TabbedPane.js b/front_end/ui/TabbedPane.js index e0ef4ea547..feb04d33cf 100644 --- a/front_end/ui/TabbedPane.js +++ b/front_end/ui/TabbedPane.js @@ -46,7 +46,6 @@ export default class TabbedPane extends UI.VBox { this._tabsElement.setAttribute('role', 'tablist'); this._tabsElement.addEventListener('keydown', this._keyDown.bind(this), false); this._contentElement = this.contentElement.createChild('div', 'tabbed-pane-content'); - this._contentElement.setAttribute('role', 'tabpanel'); this._contentElement.createChild('slot'); /** @type {!Array.} */ this._tabs = []; diff --git a/front_end/ui/ViewManager.js b/front_end/ui/ViewManager.js index 32264cbc9d..1af86a55cd 100644 --- a/front_end/ui/ViewManager.js +++ b/front_end/ui/ViewManager.js @@ -171,6 +171,8 @@ export class _ContainerWidget extends UI.VBox { this.element.classList.add('flex-auto', 'view-container', 'overflow-auto'); this._view = view; this.element.tabIndex = -1; + UI.ARIAUtils.markAsTabpanel(this.element); + UI.ARIAUtils.setAccessibleName(this.element, ls`${view.title()} panel`); this.setDefaultFocusedElement(this.element); } diff --git a/front_end/ui/ui_strings.grdp b/front_end/ui/ui_strings.grdp index 5a861bfe23..8c0421e48e 100644 --- a/front_end/ui/ui_strings.grdp +++ b/front_end/ui/ui_strings.grdp @@ -201,6 +201,9 @@ Replace all + + $1sSensors panel + $1d2 of $2d3