@wordpress/block-editor 14.14.0 → 14.14.2

package/src/components/link-control/test/index.js

@@ -139,7 +139,7 @@ describe( 'Basic rendering', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		expect( searchInput ).toBeVisible();
@@ -150,7 +150,7 @@ describe( 'Basic rendering', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		expect( searchInput ).toBeVisible();
@@ -175,7 +175,7 @@ describe( 'Basic rendering', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Simulate searching for a term.
@@ -290,7 +290,7 @@ describe( 'Basic rendering', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Simulate searching for a term.
@@ -304,7 +304,7 @@ describe( 'Basic rendering', () => {
 			render( <LinkControl value={ { url: 'https://example.com' } } /> );
 
 			expect(
-				screen.queryByRole( 'combobox', { name: 'Search or type URL' } )
+				screen.queryByRole( 'combobox', { name: 'Link' } )
 			).not.toBeInTheDocument();
 		} );
 
@@ -317,7 +317,7 @@ describe( 'Basic rendering', () => {
 			);
 
 			expect(
-				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
+				screen.getByRole( 'combobox', { name: 'Link' } )
 			).toBeVisible();
 		} );
 
@@ -335,7 +335,7 @@ describe( 'Basic rendering', () => {
 			await user.click( editButton );
 
 			expect(
-				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
+				screen.getByRole( 'combobox', { name: 'Link' } )
 			).toBeVisible();
 
 			// If passed `forceIsEditingLink` of `false` while editing, should
@@ -348,7 +348,7 @@ describe( 'Basic rendering', () => {
 			);
 
 			expect(
-				screen.queryByRole( 'combobox', { name: 'Search or type URL' } )
+				screen.queryByRole( 'combobox', { name: 'Link' } )
 			).not.toBeInTheDocument();
 		} );
 
@@ -438,7 +438,7 @@ describe( 'Basic rendering', () => {
 
 			// Should revert back to editing mode.
 			expect(
-				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
+				screen.getByRole( 'combobox', { name: 'Link' } )
 			).toBeVisible();
 		} );
 	} );
@@ -461,7 +461,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Simulate searching for a term.
@@ -487,7 +487,7 @@ describe( 'Searching for a link', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Search or type URL',
+				name: 'Link',
 			} );
 
 			// Simulate searching for a term.
@@ -538,7 +538,7 @@ describe( 'Searching for a link', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Search or type URL',
+				name: 'Link',
 			} );
 
 			// Simulate searching for a term.
@@ -571,7 +571,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Simulate searching for a term.
@@ -616,7 +616,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Simulate searching for a term.
@@ -635,7 +635,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Simulate searching for a term.
@@ -667,7 +667,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Simulate searching for a term.
@@ -699,7 +699,7 @@ describe( 'Manual link entry', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Search or type URL',
+				name: 'Link',
 			} );
 
 			// Simulate searching for a term.
@@ -735,7 +735,7 @@ describe( 'Manual link entry', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Search or type URL',
+					name: 'Link',
 				} );
 
 				if ( searchString.length ) {
@@ -769,7 +769,7 @@ describe( 'Manual link entry', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Search or type URL',
+					name: 'Link',
 				} );
 
 				// Remove the existing link.
@@ -852,7 +852,7 @@ describe( 'Manual link entry', () => {
 			await toggleSettingsDrawer( user );
 
 			let searchInput = screen.getByRole( 'combobox', {
-				name: 'Search or type URL',
+				name: 'Link',
 			} );
 
 			let textInput = screen.getByRole( 'textbox', {
@@ -889,7 +889,7 @@ describe( 'Manual link entry', () => {
 
 			// Re-query the inputs as they have been replaced.
 			searchInput = screen.getByRole( 'combobox', {
-				name: 'Search or type URL',
+				name: 'Link',
 			} );
 
 			textInput = screen.getByRole( 'textbox', {
@@ -937,7 +937,7 @@ describe( 'Manual link entry', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Search or type URL',
+					name: 'Link',
 				} );
 
 				// Simulate searching for a term.
@@ -973,7 +973,7 @@ describe( 'Link submission', () => {
 		render( <LinkControlConsumer /> );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		const submitButton = screen.getByRole( 'button', {
@@ -1012,7 +1012,7 @@ describe( 'Link submission', () => {
 		render( <LinkControlConsumer /> );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		const createSubmitButton = screen.queryByRole( 'button', {
@@ -1059,9 +1059,9 @@ describe( 'Default search suggestions', () => {
 		// Verify input has no value has default suggestions should only show
 		// when this does not have a value.
 		// Search Input UI.
-		expect(
-			screen.getByRole( 'combobox', { name: 'Search or type URL' } )
-		).toHaveValue( '' );
+		expect( screen.getByRole( 'combobox', { name: 'Link' } ) ).toHaveValue(
+			''
+		);
 
 		// Ensure only called once as a guard against potential infinite
 		// re-render loop within `componentDidUpdate` calling `updateSuggestions`
@@ -1091,7 +1091,7 @@ describe( 'Default search suggestions', () => {
 		await user.click( currentLinkBtn );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Search input is set to the URL value.
@@ -1115,7 +1115,7 @@ describe( 'Default search suggestions', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Simulate searching for a term.
@@ -1155,7 +1155,7 @@ describe( 'Default search suggestions', () => {
 		render( <LinkControl showInitialSuggestions /> );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		const searchResultsField = screen.queryByRole( 'listbox', {
@@ -1215,7 +1215,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Search or type URL',
+				name: 'Link',
 			} );
 
 			// Simulate searching for a term.
@@ -1285,7 +1285,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Simulate searching for a term.
@@ -1338,7 +1338,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Simulate searching for a term.
@@ -1385,7 +1385,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Simulate searching for a term.
@@ -1410,7 +1410,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Search or type URL',
+					name: 'Link',
 				} );
 
 				const searchResultsField = screen.queryByRole( 'listbox' );
@@ -1431,7 +1431,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Search or type URL',
+				name: 'Link',
 			} );
 
 			const searchResultsField = screen.queryByRole( 'listbox' );
@@ -1455,7 +1455,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Search or type URL',
+					name: 'Link',
 				} );
 
 				// Simulate searching for a term.
@@ -1490,7 +1490,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Search Input UI.
 			searchInput = screen.getByRole( 'combobox', {
-				name: 'Search or type URL',
+				name: 'Link',
 			} );
 
 			// Simulate searching for a term.
@@ -1507,7 +1507,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			await user.click( createButton );
 
 			searchInput = screen.getByRole( 'combobox', {
-				name: 'Search or type URL',
+				name: 'Link',
 			} );
 
 			const errorNotice = screen.getAllByText(
@@ -1586,7 +1586,7 @@ describe( 'Selecting links', () => {
 		await user.click( currentLinkBtn );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 		currentLinkUI = screen.queryByRole( 'group', {
 			name: 'Manage link',
@@ -1630,7 +1630,7 @@ describe( 'Selecting links', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Search or type URL',
+					name: 'Link',
 				} );
 
 				// Simulate searching for a term.
@@ -1692,7 +1692,7 @@ describe( 'Selecting links', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Search or type URL',
+					name: 'Link',
 				} );
 
 				// Simulate searching for a term.
@@ -1783,7 +1783,7 @@ describe( 'Selecting links', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Search or type URL',
+				name: 'Link',
 			} );
 
 			// Step down into the search results, highlighting the first result item.
@@ -1841,7 +1841,7 @@ describe( 'Selecting links', () => {
 
 			// focus the search input
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Search or type URL',
+				name: 'Link',
 			} );
 
 			fireEvent.focus( searchInput );
@@ -2064,7 +2064,7 @@ describe( 'Post types', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 		} );
 
 		// Simulate searching for a term.
@@ -2093,7 +2093,7 @@ describe( 'Post types', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Search or type URL',
+				name: 'Link',
 			} );
 
 			// Simulate searching for a term.

package/src/components/media-replace-flow/test/index.js

@@ -110,7 +110,7 @@ describe( 'General media replace flow', () => {
 		);
 
 		const mediaURLInput = screen.getByRole( 'combobox', {
-			name: 'Search or type URL',
+			name: 'Link',
 			expanded: false,
 		} );
 

package/src/components/writing-flow/use-tab-nav.js

@@ -15,7 +15,7 @@ import { isInSameBlock, isInsideRootBlock } from '../../utils/dom';
 import { unlock } from '../../lock-unlock';
 
 export default function useTabNav() {
-	const container = useRef();
+	const containerRef = /** @type {typeof useRef<HTMLElement>} */ ( useRef )();
 	const focusCaptureBeforeRef = useRef();
 	const focusCaptureAfterRef = useRef();
 
@@ -36,21 +36,21 @@ export default function useTabNav() {
 
 	function onFocusCapture( event ) {
 		const canvasElement =
-			container.current.ownerDocument === event.target.ownerDocument
-				? container.current
-				: container.current.ownerDocument.defaultView.frameElement;
+			containerRef.current.ownerDocument === event.target.ownerDocument
+				? containerRef.current
+				: containerRef.current.ownerDocument.defaultView.frameElement;
 
 		// Do not capture incoming focus if set by us in WritingFlow.
 		if ( noCaptureRef.current ) {
 			noCaptureRef.current = null;
 		} else if ( hasMultiSelection() ) {
-			container.current.focus();
+			containerRef.current.focus();
 		} else if ( getSelectedBlockClientId() ) {
 			if ( getLastFocus()?.current ) {
 				getLastFocus().current.focus();
 			} else {
 				// Handles when the last focus has not been set yet, or has been cleared by new blocks being added via the inserter.
-				container.current
+				containerRef.current
 					.querySelector(
 						`[data-block="${ getSelectedBlockClientId() }"]`
 					)
@@ -64,13 +64,13 @@ export default function useTabNav() {
 
 			// If we have section within the section root, focus the first one.
 			if ( sectionBlocks.length ) {
-				container.current
+				containerRef.current
 					.querySelector( `[data-block="${ sectionBlocks[ 0 ] }"]` )
 					.focus();
 			}
 			// If we don't have any section blocks, focus the section root.
 			else if ( sectionRootClientId ) {
-				container.current
+				containerRef.current
 					.querySelector( `[data-block="${ sectionRootClientId }"]` )
 					.focus();
 			} else {
@@ -82,8 +82,7 @@ export default function useTabNav() {
 				// eslint-disable-next-line no-bitwise
 				event.target.compareDocumentPosition( canvasElement ) &
 				event.target.DOCUMENT_POSITION_FOLLOWING;
-			const tabbables = focus.tabbable.find( container.current );
-
+			const tabbables = focus.tabbable.find( containerRef.current );
 			if ( tabbables.length ) {
 				const next = isBefore
 					? tabbables[ 0 ]
@@ -125,20 +124,26 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( ! hasMultiSelection() && ! getSelectedBlockClientId() ) {
+			if (
+				// Bails in case the focus capture elements aren’t present. They
+				// may be omitted to avoid silent tab stops in preview mode.
+				// See: https://github.com/WordPress/gutenberg/pull/59317
+				! focusCaptureAfterRef.current ||
+				! focusCaptureBeforeRef.current
+			) {
 				return;
 			}
 
-			const isShift = event.shiftKey;
+			const { target, shiftKey: isShift } = event;
 			const direction = isShift ? 'findPrevious' : 'findNext';
-			const nextTabbable = focus.tabbable[ direction ]( event.target );
+			const nextTabbable = focus.tabbable[ direction ]( target );
 
 			// We want to constrain the tabbing to the block and its child blocks.
 			// If the preceding form element is within a different block,
 			// such as two sibling image blocks in the placeholder state,
 			// we want shift + tab from the first form element to move to the image
 			// block toolbar and not the previous image block's form element.
-			const currentBlock = event.target.closest( '[data-block]' );
+			const currentBlock = target.closest( '[data-block]' );
 			const isElementPartOfSelectedBlock =
 				currentBlock &&
 				nextTabbable &&
@@ -157,7 +162,6 @@ export default function useTabNav() {
 			) {
 				return;
 			}
-
 			const next = isShift ? focusCaptureBeforeRef : focusCaptureAfterRef;
 
 			// Disable focus capturing on the focus capture element, so it
@@ -180,6 +184,7 @@ export default function useTabNav() {
 			// the writing flow wrapper.
 			if (
 				! event.relatedTarget &&
+				event.target.hasAttribute( 'data-block' ) &&
 				ownerDocument.activeElement === ownerDocument.body &&
 				getBlockCount() === 0
 			) {
@@ -204,7 +209,7 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( container.current === event.target ) {
+			if ( containerRef.current === event.target ) {
 				return;
 			}
 
@@ -233,7 +238,7 @@ export default function useTabNav() {
 		};
 	}, [] );
 
-	const mergedRefs = useMergeRefs( [ container, ref ] );
+	const mergedRefs = useMergeRefs( [ containerRef, ref ] );
 
 	return [ before, mergedRefs, after ];
 }