DOM: exclude inert elements from focus.focusable (WordPress#75172)

Author: ellatrix

packages/block-editor/src/components/writing-flow/use-arrow-nav.js

@@ -114,10 +114,6 @@ export function getClosestTabbable(
 	}
 
 	function isTabCandidate( node ) {
-		if ( node.closest( '[inert]' ) ) {
-			return;
-		}
-
 		// Skip if there's only one child that is content editable (and thus a
 		// better candidate).
 		if (

packages/dom/src/focusable.js

@@ -107,6 +107,11 @@ export function find( context, { sequential = false } = {} ) {
 			return false;
 		}
 
+		// Elements inside an inert subtree are not focusable.
+		if ( element.closest( '[inert]' ) ) {
+			return false;
+		}
+
 		const { nodeName } = element;
 		if ( 'AREA' === nodeName ) {
 			return isValidFocusableArea(

packages/dom/src/test/focusable.js

@@ -157,5 +157,35 @@ describe( 'focusable', () => {
 
 			expect( find( node ) ).toEqual( [] );
 		} );
+
+		it( 'ignores elements inside inert containers', () => {
+			const node = createElement( 'div' );
+			const inertDiv = createElement( 'div' );
+			inertDiv.setAttribute( 'inert', '' );
+			const input = createElement( 'input' );
+			inertDiv.appendChild( input );
+			node.appendChild( inertDiv );
+
+			expect( find( node ) ).toEqual( [] );
+		} );
+
+		it( 'returns focusable elements outside inert containers', () => {
+			const node = createElement( 'div' );
+
+			// Inert container with input
+			const inertDiv = createElement( 'div' );
+			inertDiv.setAttribute( 'inert', '' );
+			const inertInput = createElement( 'input' );
+			inertDiv.appendChild( inertInput );
+			node.appendChild( inertDiv );
+
+			// Non-inert input
+			const visibleInput = createElement( 'input' );
+			node.appendChild( visibleInput );
+
+			const focusable = find( node );
+			expect( focusable ).toHaveLength( 1 );
+			expect( focusable[ 0 ] ).toBe( visibleInput );
+		} );
 	} );
 } );