Devtools: Add aria-label for tab panel view container

Issue: tab panel relies on its view container to set the default focus on initial
load or capture focus in the case of losing focus, since it doesn't have an aria
label, screen reader reads out the whole content of the tab panel.

This change add an aria-label for each view container as "${tab-title} panel".


Bug: 963183
Change-Id: Id17b9c259b35c61a1f6cf0035ef206b2c2f2e2d1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1871822
Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Junyi Xiao <juxiao@microsoft.com>

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,

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.<!TabbedPaneTab>} */
     this._tabs = [];

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);
   }
 

front_end/ui/ui_strings.grdp

@@ -201,6 +201,9 @@
   <message name="IDS_DEVTOOLS_894dab8359b886762113f6b64ce9f107" desc="Text on a button to replace all instances with input text for the ctrl+F search bar">
     Replace all
   </message>
+  <message name="IDS_DEVTOOLS_8ca37a9854bdfeea9616a8f52ff6f9de" desc="Aria label for the tab panel view container">
+    <ph name="VIEW_TITLE__">$1s<ex>Sensors</ex></ph> panel
+  </message>
   <message name="IDS_DEVTOOLS_8e44b2127a4fb456a78feced6731a496" desc="Text to indicate the current match index and the total number of matches for the ctrl+F search bar">
     <ph name="CURRENTMATCHINDEX____">$1d<ex>2</ex></ph> of <ph name="MATCHES">$2d<ex>3</ex></ph>
   </message>