From 57f033561fe0d35b51e1c2825a466852cdc1ee4e Mon Sep 17 00:00:00 2001
From: Junyi Xiao <juxiao@microsoft.com>
Date: Mon, 21 Oct 2019 15:45:51 -0700
Subject: [PATCH] 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    | 8 ++++++++
 front_end/ui/TabbedPane.js   | 1 -
 front_end/ui/ViewManager.js  | 2 ++
 front_end/ui/ui_strings.grdp | 3 +++
 4 files changed, 13 insertions(+), 1 deletion(-)

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.<!TabbedPaneTab>} */
     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 @@
   <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>