more e2e fixes

packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -102,9 +102,7 @@ export function useFocusFirstElement( clientId ) {
 			// We must wait for the placeholder content to load.
 			setTimeout( () => {
 				// Find all text fields within the placeholder.
-				candidates = focus.tabbable
-					.find( target.shadowRoot )
-					.filter( ( node ) => isTextField( node ) );
+				candidates = focus.tabbable.find( target.shadowRoot );
 				target = ( isReverse ? last : first )( candidates ) || target;
 				placeCaretAtHorizontalEdge( target, isReverse );
 			} );

packages/block-editor/src/components/embedded-admin-context/index.js

@@ -45,15 +45,17 @@ export default function EmbeddedAdminContext( props ) {
 
 		function onKeyDown( event ) {
 			if ( element !== event.path[ 0 ] ) return;
+			if ( event.keyCode !== ENTER && event.keyCode !== SPACE ) return;
 
-			if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
-				focus.focusable.find( root )[ 0 ].focus();
-				event.preventDefault();
-			} else if ( event.keyCode === ESCAPE ) {
-				root.host.focus();
-				event.preventDefault();
-				event.stopPropagation();
-			}
+			focus.focusable.find( root )[ 0 ].focus();
+			event.preventDefault();
+		}
+
+		function onRootKeyDown( event ) {
+			if ( event.keyCode !== ESCAPE ) return;
+
+			root.host.focus();
+			event.preventDefault();
 		}
 
 		let timeoutId;
@@ -69,11 +71,13 @@ export default function EmbeddedAdminContext( props ) {
 
 		root.addEventListener( 'focusin', onFocusIn );
 		root.addEventListener( 'focusout', onFocusOut );
+		root.addEventListener( 'keydown', onRootKeyDown );
 		element.addEventListener( 'keydown', onKeyDown );
 		element.addEventListener( 'mousedown', onMouseDown );
 		return () => {
 			root.removeEventListener( 'focusin', onFocusIn );
 			root.removeEventListener( 'focusout', onFocusOut );
+			root.removeEventListener( 'keydown', onRootKeyDown );
 			element.removeEventListener( 'keydown', onKeyDown );
 			element.removeEventListener( 'mousedown', onMouseDown );
 			clearTimeout( timeoutId );

packages/e2e-tests/specs/editor/blocks/columns.test.js

@@ -16,10 +16,6 @@ describe( 'Columns', () => {
 
 	it( 'restricts all blocks inside the columns block', async () => {
 		await insertBlock( 'Columns' );
-		// Navigate into the placeholder and activate the 50/50 option.
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Space' );
-		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Space' );
 		await closeGlobalBlockInserter();

packages/e2e-tests/specs/editor/blocks/table.test.js

@@ -23,14 +23,10 @@ async function changeCellAlignment( align ) {
 async function createTable( columnCount, rowCount ) {
 	await insertBlock( 'Table' );
 
-	// Navigate into the placeholder.
-	await page.keyboard.press( 'ArrowDown' );
-	await page.keyboard.press( 'Space' );
-
-	// Navigate to "Column count"
-	await page.keyboard.press( 'Tab' );
-
-	if ( columnCount ) await page.keyboard.type( columnCount );
+	if ( columnCount ) {
+		await page.keyboard.press( 'Backspace' );
+		await page.keyboard.type( columnCount );
+	}
 
 	// Navigate to "Row count"
 	await page.keyboard.press( 'Tab' );

packages/e2e-tests/specs/editor/plugins/image-size.test.js

@@ -30,10 +30,7 @@ describe( 'changing image size', () => {
 	it( 'should insert and change my image size', async () => {
 		await insertBlock( 'Image' );
 
-		// Navigate into the placeholder and activate the Media Library option.
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Space' );
-		await page.keyboard.press( 'Tab' );
+		// Tab to the Media Library option.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Space' );
 

packages/e2e-tests/specs/editor/various/block-deletion.test.js

@@ -190,6 +190,7 @@ describe( 'deleting all blocks', () => {
 		// Add and remove a block.
 		await insertBlock( 'Image' );
 		await page.waitForSelector( 'figure[data-type="core/image"]' );
+		await page.click( 'figure[data-type="core/image"]' );
 		await page.keyboard.press( 'Backspace' );
 
 		// Verify there is no selected block.

packages/e2e-tests/specs/editor/various/embedding.test.js

@@ -3,7 +3,6 @@
  */
 import {
 	clickBlockAppender,
-	clickButton,
 	createEmbeddingMatcher,
 	createJSONResponse,
 	createNewPost,
@@ -190,22 +189,43 @@ describe( 'Embedding content', () => {
 
 		// Valid provider; invalid content. Should render failed, edit state.
 		await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );
-		await page.waitForSelector(
-			'input[value="https://twitter.com/wooyaygutenberg123454312"]'
-		);
+		await page.waitForFunction( () => {
+			const embedPlaceholders = document.querySelectorAll(
+				'.wp-block-embed [role="button"]'
+			);
+			const lastEmbedPlaceholder =
+				embedPlaceholders[ embedPlaceholders.length - 1 ];
+			return lastEmbedPlaceholder?.shadowRoot.querySelector(
+				'input[value="https://twitter.com/wooyaygutenberg123454312"]'
+			);
+		} );
 
 		// WordPress invalid content. Should render failed, edit state.
 		await insertEmbed( 'https://wordpress.org/gutenberg/handbook/' );
-		await page.waitForSelector(
-			'input[value="https://wordpress.org/gutenberg/handbook/"]'
-		);
+		await page.waitForFunction( () => {
+			const embedPlaceholders = document.querySelectorAll(
+				'.wp-block-embed [role="button"]'
+			);
+			const lastEmbedPlaceholder =
+				embedPlaceholders[ embedPlaceholders.length - 1 ];
+			return lastEmbedPlaceholder?.shadowRoot.querySelector(
+				'input[value="https://wordpress.org/gutenberg/handbook/"]'
+			);
+		} );
 
 		// Provider whose oembed API has gone wrong. Should render failed, edit
 		// state.
 		await insertEmbed( 'https://twitter.com/thatbunty' );
-		await page.waitForSelector(
-			'input[value="https://twitter.com/thatbunty"]'
-		);
+		await page.waitForFunction( () => {
+			const embedPlaceholders = document.querySelectorAll(
+				'.wp-block-embed [role="button"]'
+			);
+			const lastEmbedPlaceholder =
+				embedPlaceholders[ embedPlaceholders.length - 1 ];
+			return lastEmbedPlaceholder?.shadowRoot.querySelector(
+				'input[value="https://twitter.com/thatbunty"]'
+			);
+		} );
 
 		// WordPress content that can be embedded. Should render valid figure
 		// element.
@@ -234,15 +254,22 @@ describe( 'Embedding content', () => {
 		// URL that can't be embedded.
 		await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );
 
-		// Wait for the request to fail and present an error. Since placeholder
-		// has styles applied which depend on resize observer, wait for the
-		// expected size class to settle before clicking, since otherwise a race
-		// condition could occur on the placeholder layout vs. click intent.
-		await page.waitForSelector(
-			'.components-placeholder.is-large .components-placeholder__error'
+		await page.waitForFunction( () => {
+			const embedPlaceholders = document.querySelectorAll(
+				'.wp-block-embed [role="button"]'
+			);
+			const lastEmbedPlaceholder =
+				embedPlaceholders[ embedPlaceholders.length - 1 ];
+			return lastEmbedPlaceholder?.shadowRoot.querySelector(
+				'input[value="https://twitter.com/wooyaygutenberg123454312"]'
+			);
+		} );
+
+		const handle = await page.evaluateHandle(
+			`document.querySelector('.wp-block-embed [role="button"]').shadowRoot.querySelector('.components-placeholder__error').lastElementChild`
 		);
+		await handle.click( handle );
 
-		await clickButton( 'Convert to link' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -257,13 +284,16 @@ describe( 'Embedding content', () => {
 		// URL that can't be embedded.
 		await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );
 
-		// Wait for the request to fail and present an error. Since placeholder
-		// has styles applied which depend on resize observer, wait for the
-		// expected size class to settle before clicking, since otherwise a race
-		// condition could occur on the placeholder layout vs. click intent.
-		await page.waitForSelector(
-			'.components-placeholder.is-large .components-placeholder__error'
-		);
+		await page.waitForFunction( () => {
+			const embedPlaceholders = document.querySelectorAll(
+				'.wp-block-embed [role="button"]'
+			);
+			const lastEmbedPlaceholder =
+				embedPlaceholders[ embedPlaceholders.length - 1 ];
+			return lastEmbedPlaceholder?.shadowRoot.querySelector(
+				'input[value="https://twitter.com/wooyaygutenberg123454312"]'
+			);
+		} );
 
 		// Set up a different mock to make sure that try again actually does make the request again.
 		await setUpResponseMocking( [
@@ -276,7 +306,10 @@ describe( 'Embedding content', () => {
 				),
 			},
 		] );
-		await clickButton( 'Try again' );
+		const handle = await page.evaluateHandle(
+			`document.querySelector('.wp-block-embed [role="button"]').shadowRoot.querySelector('button.is-secondary')`
+		);
+		await handle.click( handle );
 		await page.waitForSelector( 'figure.wp-block-embed' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );

packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js

@@ -97,6 +97,8 @@ describe( 'Toolbar roving tabindex', () => {
 
 	it( 'ensures table block toolbar uses roving tabindex', async () => {
 		await insertBlock( 'Table' );
+		await page.keyboard.press( 'Escape' );
+		await page.keyboard.press( 'ArrowUp' );
 		await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' );
 		// Move focus to the first toolbar item
 		await page.keyboard.press( 'Home' );