List view: Allow selected block to override roving tabindex (#48339)

* Allow tabindex to switch for selected block overriding roving tabindex provider.

* Remove pointless tabindex changes. Add a way to detect when block is selected in canvas and not multi-selected.

* Fix typo.

Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>

* Add E2E test.

* Remove diff.

---------

Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com>

packages/block-editor/src/components/list-view/block.js

@@ -231,6 +231,10 @@ function ListViewBlock( {
 		selectedClientIds,
 	} );
 
+	// Detect if there is a block in the canvas currently being edited and multi-selection is not happening.
+	const currentlyEditingBlockInCanvas =
+		isSelected && selectedClientIds.length === 1;
+
 	return (
 		<ListViewLeaf
 			className={ classes }
@@ -268,7 +272,9 @@ function ListViewBlock( {
 							siblingBlockCount={ siblingBlockCount }
 							level={ level }
 							ref={ ref }
-							tabIndex={ tabIndex }
+							tabIndex={
+								currentlyEditingBlockInCanvas ? 0 : tabIndex
+							}
 							onFocus={ onFocus }
 							isExpanded={ isExpanded }
 							selectedClientIds={ selectedClientIds }

test/e2e/specs/editor/various/list-view.spec.js

@@ -42,7 +42,7 @@ test.describe( 'List View', () => {
 			] );
 
 		// Drag the paragraph above the heading.
-		const paragraphBlockItem = await listView.getByRole( 'gridcell', {
+		const paragraphBlockItem = listView.getByRole( 'gridcell', {
 			name: 'Paragraph link',
 		} );
 		const headingBlockItem = listView.getByRole( 'gridcell', {
@@ -507,4 +507,58 @@ test.describe( 'List View', () => {
 		await pageUtils.pressKeyWithModifier( 'access', 'o' );
 		await expect( listView ).not.toBeVisible();
 	} );
+
+	test( 'should place focus on the currently selected block in the canvas', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Insert a couple of blocks of different types.
+		await editor.insertBlock( { name: 'core/image' } );
+		await editor.insertBlock( { name: 'core/heading' } );
+		await editor.insertBlock( { name: 'core/paragraph' } );
+
+		// Open List View.
+		await pageUtils.pressKeyWithModifier( 'access', 'o' );
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+
+		// The last inserted block should be selected.
+		await expect(
+			listView.getByRole( 'gridcell', {
+				name: 'Paragraph link',
+				selected: true,
+			} )
+		).toBeVisible();
+
+		// Go to the image block in List View.
+		await pageUtils.pressKeyTimes( 'ArrowUp', 2 );
+		await expect(
+			listView
+				.getByRole( 'gridcell', {
+					name: 'Image link',
+				} )
+				.getByRole( 'link', { includeHidden: true } )
+		).toBeFocused();
+
+		// Select the image block in the canvas.
+		await page.keyboard.press( 'Enter' );
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+		await expect(
+			imageBlock.getByRole( 'button', { name: 'Upload' } )
+		).toBeFocused();
+
+		// Triggering the List View shortcut should result in the image block gaining focus.
+		await pageUtils.pressKeyWithModifier( 'access', 'o' );
+		await expect(
+			listView
+				.getByRole( 'gridcell', {
+					name: 'Image link',
+				} )
+				.getByRole( 'link', { includeHidden: true } )
+		).toBeFocused();
+	} );
 } );