Block Editor List View: use anchor elements instead of buttons (#35655)

* Switching from using Button to an anchor tags for List View tree items.

* Let's not use the HTML anchor here as it's not reliable in the editor.

* Updating e2e test selectors

* Updating e2e test selectors

* The `href` attribute triggers the browser's native HTML drag operations.
When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
We need to clear any HTML drag data to prevent `pasteHandler` from calling inside `useOnBlockDrop`.

* Using the Button's component's anchor tag, given that we're passing an href.
This allows us to remove the custom CSS for the native anchor element.

* Adding key event handlers for space and enter. This is to persist button element behaviour, even though we're switching to an anchor element.
Forcing a tabIndex of `0` so the anchor elements are tabbable.

* Reverting back to Space key since we've added a keyboard event for Space.

Reinstate tabIndex

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

@@ -19,6 +19,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { getBlockPositionDescription } from './utils';
 import BlockTitle from '../block-title';
 import ListViewExpander from './expander';
+import { SPACE, ENTER } from '@wordpress/keycodes';
 
 function ListViewBlockSelectButton(
 	{
@@ -47,6 +48,22 @@ function ListViewBlockSelectButton(
 		level
 	);
 
+	// The `href` attribute triggers the browser's native HTML drag operations.
+	// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
+	// We need to clear any HTML drag data to prevent `pasteHandler` from firing
+	// inside the `useOnBlockDrop` hook.
+	const onDragStartHandler = ( event ) => {
+		event.dataTransfer.clearData();
+		onDragStart( event );
+	};
+
+	function onKeyDownHandler( event ) {
+		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
+			event.preventDefault();
+			onClick( event );
+		}
+	}
+
 	return (
 		<>
 			<Button
@@ -55,13 +72,15 @@ function ListViewBlockSelectButton(
 					className
 				) }
 				onClick={ onClick }
+				onKeyDown={ onKeyDownHandler }
 				aria-describedby={ descriptionId }
 				ref={ ref }
 				tabIndex={ tabIndex }
 				onFocus={ onFocus }
-				onDragStart={ onDragStart }
+				onDragStart={ onDragStartHandler }
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
+				href={ `#block-${ clientId }` }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />

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

@@ -21,7 +21,7 @@ describe( 'Columns', () => {
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const columnBlockMenuItem = (
 			await page.$x(
-				'//button[contains(concat(" ", @class, " "), " block-editor-list-view-block-select-button ")][text()="Column"]'
+				'//a[contains(concat(" ", @class, " "), " block-editor-list-view-block-select-button ")][text()="Column"]'
 			)
 		 )[ 0 ];
 		await columnBlockMenuItem.click();

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

@@ -131,7 +131,7 @@ describe( 'Cover', () => {
 		// Select the cover block.By default the child paragraph gets selected.
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		await page.click(
-			'.block-editor-list-view-block__contents-container button'
+			'.block-editor-list-view-block__contents-container a'
 		);
 
 		const heightInput = (

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

@@ -51,7 +51,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const columnsBlockMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Columns')]"
+				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Columns')]"
 			)
 		 )[ 0 ];
 		await columnsBlockMenuItem.click();
@@ -75,7 +75,7 @@ describe( 'Navigating the block hierarchy', () => {
 		// Navigate to the last column block.
 		const lastColumnsBlockMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Column')]"
+				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Column')]"
 			)
 		 )[ 3 ];
 		await lastColumnsBlockMenuItem.click();
@@ -188,7 +188,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
 		const groupMenuItem = (
 			await page.$x(
-				"//button[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Group')]"
+				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Group')]"
 			)
 		 )[ 0 ];
 		await groupMenuItem.click();

packages/e2e-tests/specs/editor/various/list-view.test.js

@@ -42,12 +42,12 @@ describe( 'List view', () => {
 		await pressKeyWithModifier( 'access', 'o' );
 
 		const paragraphBlock = await page.waitForXPath(
-			'//button[contains(., "Paragraph")][@draggable="true"]'
+			'//a[contains(., "Paragraph")][@draggable="true"]'
 		);
 
 		// Drag above the heading block
 		const headingBlock = await page.waitForXPath(
-			'//button[contains(., "Heading")][@draggable="true"]'
+			'//a[contains(., "Heading")][@draggable="true"]'
 		);
 
 		await dragAndDrop( paragraphBlock, headingBlock, -5 );

packages/e2e-tests/specs/experiments/document-settings.test.js

@@ -60,7 +60,7 @@ describe( 'Document Settings', () => {
 					'.edit-post-header-toolbar__list-view-toggle'
 				);
 				const headerTemplatePartListViewButton = await page.waitForXPath(
-					'//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
+					'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
 				);
 				headerTemplatePartListViewButton.click();
 				await page.click(

packages/e2e-tests/specs/experiments/multi-entity-saving.test.js

@@ -249,7 +249,7 @@ describe( 'Multi-entity save flow', () => {
 			// Select the header template part via list view.
 			await page.click( '.edit-site-header-toolbar__list-view-toggle' );
 			const headerTemplatePartListViewButton = await page.waitForXPath(
-				'//button[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
+				'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "Header")]'
 			);
 			headerTemplatePartListViewButton.click();
 			await page.click( 'button[aria-label="Close list view sidebar"]' );