From 201189e079f2e274dedbc0ef7e7a7ec7968c60bd Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Sep 2022 16:20:39 +0800
Subject: [PATCH] Add role=application to list view to prevent browse mode
 triggering in NVDA (#44291)

* Add role=application to list view to prevent browse mode triggering in NVDA

* Move the aria-label to application role.

* Add aria-label back to table for now. This broke too many E2E and this fix should make release.

* Update snapshots

Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com>
---
 .../src/components/list-view/index.js         |  1 +
 packages/components/src/tree-grid/index.js    | 37 +++++++++++-------
 .../tree-grid/test/__snapshots__/cell.js.snap | 38 ++++++++++---------
 .../test/__snapshots__/index.js.snap          |  2 +-
 4 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
index bd077eb3cb8239..7166b594c276c2 100644
--- a/packages/block-editor/src/components/list-view/index.js
+++ b/packages/block-editor/src/components/list-view/index.js
@@ -188,6 +188,7 @@ function ListView(
 				onCollapseRow={ collapseRow }
 				onExpandRow={ expandRow }
 				onFocusRow={ focusRow }
+				applicationAriaLabel={ __( 'Block navigation structure' ) }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch
diff --git a/packages/components/src/tree-grid/index.js b/packages/components/src/tree-grid/index.js
index d73e3c69166981..3d500b45c80237 100644
--- a/packages/components/src/tree-grid/index.js
+++ b/packages/components/src/tree-grid/index.js
@@ -36,12 +36,13 @@ function getRowFocusables( rowElement ) {
  * Renders both a table and tbody element, used to create a tree hierarchy.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
- * @param {Object}    props               Component props.
- * @param {WPElement} props.children      Children to be rendered.
- * @param {Function}  props.onExpandRow   Callback to fire when row is expanded.
- * @param {Function}  props.onCollapseRow Callback to fire when row is collapsed.
- * @param {Function}  props.onFocusRow    Callback to fire when moving focus to a different row.
- * @param {Object}    ref                 A ref to the underlying DOM table element.
+ * @param {Object}    props                      Component props.
+ * @param {WPElement} props.children             Children to be rendered.
+ * @param {Function}  props.onExpandRow          Callback to fire when row is expanded.
+ * @param {Function}  props.onCollapseRow        Callback to fire when row is collapsed.
+ * @param {Function}  props.onFocusRow           Callback to fire when moving focus to a different row.
+ * @param {string}    props.applicationAriaLabel Label to use for the application role.
+ * @param {Object}    ref                        A ref to the underlying DOM table element.
  */
 function TreeGrid(
 	{
@@ -49,6 +50,7 @@ function TreeGrid(
 		onExpandRow = () => {},
 		onCollapseRow = () => {},
 		onFocusRow = () => {},
+		applicationAriaLabel,
 		...props
 	},
 	ref
@@ -286,14 +288,21 @@ function TreeGrid(
 	/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 	return (
 		<RovingTabIndexContainer>
-			<table
-				{ ...props }
-				role="treegrid"
-				onKeyDown={ onKeyDown }
-				ref={ ref }
-			>
-				<tbody>{ children }</tbody>
-			</table>
+			{
+				// Prevent browser mode from triggering in NVDA by wrapping List View
+				// in a role=application wrapper.
+				// see: https://github.com/WordPress/gutenberg/issues/43729
+			 }
+			<div role="application" aria-label={ applicationAriaLabel }>
+				<table
+					{ ...props }
+					role="treegrid"
+					onKeyDown={ onKeyDown }
+					ref={ ref }
+				>
+					<tbody>{ children }</tbody>
+				</table>
+			</div>
 		</RovingTabIndexContainer>
 	);
 	/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */
diff --git a/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap b/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap
index 23d0568807b04d..7817c3259bf5aa 100644
--- a/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap
+++ b/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap
@@ -1,23 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TreeGridCell uses a child render function to render children 1`] = `
-<table
-  onKeyDown={[Function]}
-  role="treegrid"
+<div
+  role="application"
 >
-  <tbody>
-    <tr>
-      <td
-        role="gridcell"
-      >
-        <button
-          className="my-button"
-          onFocus={[Function]}
+  <table
+    onKeyDown={[Function]}
+    role="treegrid"
+  >
+    <tbody>
+      <tr>
+        <td
+          role="gridcell"
         >
-          Click Me!
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
+          <button
+            className="my-button"
+            onFocus={[Function]}
+          >
+            Click Me!
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;
diff --git a/packages/components/src/tree-grid/test/__snapshots__/index.js.snap b/packages/components/src/tree-grid/test/__snapshots__/index.js.snap
index db862583f22e01..f493168bdb933e 100644
--- a/packages/components/src/tree-grid/test/__snapshots__/index.js.snap
+++ b/packages/components/src/tree-grid/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<table role=\\"treegrid\\"><tbody><tr role=\\"row\\" aria-level=\\"1\\" aria-posinset=\\"1\\" aria-setsize=\\"1\\"><td role=\\"gridcell\\">Test</td></tr></tbody></table>"`;
+exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<div role=\\"application\\"><table role=\\"treegrid\\"><tbody><tr role=\\"row\\" aria-level=\\"1\\" aria-posinset=\\"1\\" aria-setsize=\\"1\\"><td role=\\"gridcell\\">Test</td></tr></tbody></table></div>"`;