Add role=application to list view to prevent browse mode triggering i…

…n 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 <[email protected]>
WordPress · Sep 21, 2022 · 201189e · 201189e
1 parent 5b5466e
commit 201189e
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 32 deletions.
diff --git 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
@@ -36,19 +36,21 @@ 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(
 	{
 		children,
 		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
@@ -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
@@ -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>"`;