@wordpress/block-editor 11.4.0 → 11.5.0

package/src/components/inserter/media-tab/media-preview.js

@@ -0,0 +1,268 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__unstableCompositeItem as CompositeItem,
+	Tooltip,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	Spinner,
+	Modal,
+	Flex,
+	FlexItem,
+	Button,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo, useCallback, useState } from '@wordpress/element';
+import { cloneBlock } from '@wordpress/blocks';
+import { moreVertical, external } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { isBlobURL } from '@wordpress/blob';
+
+/**
+ * Internal dependencies
+ */
+import InserterDraggableBlocks from '../../inserter-draggable-blocks';
+import { getBlockAndPreviewFromMedia } from './utils';
+import { store as blockEditorStore } from '../../../store';
+
+const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const MAXIMUM_TITLE_LENGTH = 25;
+const MEDIA_OPTIONS_POPOVER_PROPS = {
+	position: 'bottom left',
+	className:
+		'block-editor-inserter__media-list__item-preview-options__popover',
+};
+
+function MediaPreviewOptions( { category, media } ) {
+	if ( ! category.getReportUrl ) {
+		return null;
+	}
+	const reportUrl = category.getReportUrl( media );
+	return (
+		<DropdownMenu
+			className="block-editor-inserter__media-list__item-preview-options"
+			label={ __( 'Options' ) }
+			popoverProps={ MEDIA_OPTIONS_POPOVER_PROPS }
+			icon={ moreVertical }
+		>
+			{ () => (
+				<MenuGroup>
+					<MenuItem
+						onClick={ () =>
+							window.open( reportUrl, '_blank' ).focus()
+						}
+						icon={ external }
+					>
+						{ sprintf(
+							/* translators: %s: The media type to report e.g: "image", "video", "audio" */
+							__( 'Report %s' ),
+							category.mediaType
+						) }
+					</MenuItem>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}
+
+function InsertExternalImageModal( { onClose, onSubmit } ) {
+	return (
+		<Modal
+			title={ __( 'Insert external image' ) }
+			onRequestClose={ onClose }
+			className="block-editor-inserter-media-tab-media-preview-inserter-external-image-modal"
+		>
+			<VStack spacing={ 3 }>
+				<p>
+					{ __(
+						'This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.'
+					) }
+				</p>
+				<p>
+					{ __(
+						'External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.'
+					) }
+				</p>
+			</VStack>
+			<Flex
+				className="block-editor-block-lock-modal__actions"
+				justify="flex-end"
+				expanded={ false }
+			>
+				<FlexItem>
+					<Button variant="tertiary" onClick={ onClose }>
+						{ __( 'Cancel' ) }
+					</Button>
+				</FlexItem>
+				<FlexItem>
+					<Button variant="primary" onClick={ onSubmit }>
+						{ __( 'Insert' ) }
+					</Button>
+				</FlexItem>
+			</Flex>
+		</Modal>
+	);
+}
+
+export function MediaPreview( { media, onClick, composite, category } ) {
+	const [ showExternalUploadModal, setShowExternalUploadModal ] =
+		useState( false );
+	const [ isHovered, setIsHovered ] = useState( false );
+	const [ isInserting, setIsInserting ] = useState( false );
+	const [ block, preview ] = useMemo(
+		() => getBlockAndPreviewFromMedia( media, category.mediaType ),
+		[ media, category.mediaType ]
+	);
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+	const mediaUpload = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
+		[]
+	);
+	const onMediaInsert = useCallback(
+		( previewBlock ) => {
+			// Prevent multiple uploads when we're in the process of inserting.
+			if ( isInserting ) {
+				return;
+			}
+			const clonedBlock = cloneBlock( previewBlock );
+			const { id, url, caption } = clonedBlock.attributes;
+			// Media item already exists in library, so just insert it.
+			if ( !! id ) {
+				onClick( clonedBlock );
+				return;
+			}
+			setIsInserting( true );
+			// Media item does not exist in library, so try to upload it.
+			// Fist fetch the image data. This may fail if the image host
+			// doesn't allow CORS with the domain.
+			// If this happens, we insert the image block using the external
+			// URL and let the user know about the possible implications.
+			window
+				.fetch( url )
+				.then( ( response ) => response.blob() )
+				.then( ( blob ) => {
+					mediaUpload( {
+						filesList: [ blob ],
+						additionalData: { caption },
+						onFileChange( [ img ] ) {
+							if ( isBlobURL( img.url ) ) {
+								return;
+							}
+							onClick( {
+								...clonedBlock,
+								attributes: {
+									...clonedBlock.attributes,
+									id: img.id,
+									url: img.url,
+								},
+							} );
+							createSuccessNotice(
+								__( 'Image uploaded and inserted.' ),
+								{ type: 'snackbar' }
+							);
+							setIsInserting( false );
+						},
+						allowedTypes: ALLOWED_MEDIA_TYPES,
+						onError( message ) {
+							createErrorNotice( message, { type: 'snackbar' } );
+							setIsInserting( false );
+						},
+					} );
+				} )
+				.catch( () => {
+					setShowExternalUploadModal( true );
+					setIsInserting( false );
+				} );
+		},
+		[
+			isInserting,
+			onClick,
+			mediaUpload,
+			createErrorNotice,
+			createSuccessNotice,
+		]
+	);
+	const title = media.title?.rendered || media.title;
+	let truncatedTitle;
+	if ( title.length > MAXIMUM_TITLE_LENGTH ) {
+		const omission = '...';
+		truncatedTitle =
+			title.slice( 0, MAXIMUM_TITLE_LENGTH - omission.length ) + omission;
+	}
+	const onMouseEnter = useCallback( () => setIsHovered( true ), [] );
+	const onMouseLeave = useCallback( () => setIsHovered( false ), [] );
+	return (
+		<>
+			<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>
+				{ ( { draggable, onDragStart, onDragEnd } ) => (
+					<div
+						className={ classnames(
+							'block-editor-inserter__media-list__list-item',
+							{
+								'is-hovered': isHovered,
+							}
+						) }
+						draggable={ draggable }
+						onDragStart={ onDragStart }
+						onDragEnd={ onDragEnd }
+					>
+						<Tooltip text={ truncatedTitle || title }>
+							{ /* Adding `is-hovered` class to the wrapper element is needed
+							because the options Popover is rendered outside of this node. */ }
+							<div
+								onMouseEnter={ onMouseEnter }
+								onMouseLeave={ onMouseLeave }
+							>
+								<CompositeItem
+									role="option"
+									as="div"
+									{ ...composite }
+									className="block-editor-inserter__media-list__item"
+									onClick={ () => onMediaInsert( block ) }
+									aria-label={ title }
+								>
+									<div className="block-editor-inserter__media-list__item-preview">
+										{ preview }
+										{ isInserting && (
+											<div className="block-editor-inserter__media-list__item-preview-spinner">
+												<Spinner />
+											</div>
+										) }
+									</div>
+								</CompositeItem>
+								{ ! isInserting && (
+									<MediaPreviewOptions
+										category={ category }
+										media={ media }
+									/>
+								) }
+							</div>
+						</Tooltip>
+					</div>
+				) }
+			</InserterDraggableBlocks>
+			{ showExternalUploadModal && (
+				<InsertExternalImageModal
+					onClose={ () => setShowExternalUploadModal( false ) }
+					onSubmit={ () => {
+						onClick( cloneBlock( block ) );
+						createSuccessNotice( __( 'Image inserted.' ), {
+							type: 'snackbar',
+						} );
+						setShowExternalUploadModal( false );
+					} }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/inserter/style.scss

@@ -660,6 +660,17 @@ $block-inserter-tabs-height: 44px;
 				margin: 0 auto;
 				max-width: 100%;
 			}
+
+			.block-editor-inserter__media-list__item-preview-spinner {
+				display: flex;
+				height: 100%;
+				width: 100%;
+				position: absolute;
+				justify-content: center;
+				background: rgba($white, 0.7);
+				align-items: center;
+				pointer-events: none;
+			}
 		}
 
 		&:focus .block-editor-inserter__media-list__item-preview {
@@ -686,3 +697,14 @@ $block-inserter-tabs-height: 44px;
 		height: 100%;
 	}
 }
+
+
+.block-editor-inserter-media-tab-media-preview-inserter-external-image-modal {
+	@include break-small() {
+		max-width: $break-mobile;
+	}
+
+	p {
+		margin: 0;
+	}
+}

package/src/components/inserter/test/__snapshots__/index.native.js.snap

@@ -2,21 +2,21 @@
 
 exports[`Inserter can add blocks adds new block at the end of post 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Inserter can add blocks after another block 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:more -->
@@ -30,7 +30,7 @@ exports[`Inserter can add blocks after another block 1`] = `
 
 exports[`Inserter can add blocks before another block 1`] = `
 "<!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -40,11 +40,11 @@ exports[`Inserter can add blocks before another block 1`] = `
 
 exports[`Inserter can add blocks creates a new Paragraph block tapping on the empty area below the last block 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -54,7 +54,7 @@ exports[`Inserter can add blocks creates a new Paragraph block tapping on the em
 
 exports[`Inserter can add blocks inserts between 2 existing blocks 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:more -->
@@ -62,17 +62,17 @@ exports[`Inserter can add blocks inserts between 2 existing blocks 1`] = `
 <!-- /wp:more -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Inserter can add blocks inserts block at the end of post when no block is selected 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:more -->
@@ -86,11 +86,11 @@ exports[`Inserter can add blocks to the beginning 1`] = `
 <!-- /wp:more -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -100,11 +100,11 @@ exports[`Inserter can add blocks to the beginning 1`] = `
 
 exports[`Inserter can add blocks to the end 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -52,7 +52,6 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			updateBlockAttributes( clientIds, newAttributes, true );
 		},
 		[
-			cleanEmptyObject,
 			getBlockAttributes,
 			getMultiSelectedBlockClientIds,
 			hasMultiSelection,

package/src/components/inspector-controls/fill.js

@@ -12,6 +12,7 @@ import {
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,6 +24,7 @@ export default function InspectorControlsFill( {
 	children,
 	group = 'default',
 	__experimentalGroup,
+	resetAllFilter,
 } ) {
 	if ( __experimentalGroup ) {
 		deprecated(
@@ -50,18 +52,40 @@ export default function InspectorControlsFill( {
 		<StyleProvider document={ document }>
 			<Fill>
 				{ ( fillProps ) => {
-					// Children passed to InspectorControlsFill will not have
-					// access to any React Context whose Provider is part of
-					// the InspectorControlsSlot tree. So we re-create the
-					// Provider in this subtree.
-					const value = ! isEmpty( fillProps ) ? fillProps : null;
 					return (
-						<ToolsPanelContext.Provider value={ value }>
-							{ children }
-						</ToolsPanelContext.Provider>
+						<ToolsPanelInspectorControl
+							fillProps={ fillProps }
+							children={ children }
+							resetAllFilter={ resetAllFilter }
+						/>
 					);
 				} }
 			</Fill>
 		</StyleProvider>
 	);
 }
+
+function ToolsPanelInspectorControl( { children, resetAllFilter, fillProps } ) {
+	const { registerResetAllFilter, deregisterResetAllFilter } = fillProps;
+	useEffect( () => {
+		if ( resetAllFilter && registerResetAllFilter ) {
+			registerResetAllFilter( resetAllFilter );
+		}
+		return () => {
+			if ( resetAllFilter && deregisterResetAllFilter ) {
+				deregisterResetAllFilter( resetAllFilter );
+			}
+		};
+	}, [ resetAllFilter, registerResetAllFilter, deregisterResetAllFilter ] );
+
+	// Children passed to InspectorControlsFill will not have
+	// access to any React Context whose Provider is part of
+	// the InspectorControlsSlot tree. So we re-create the
+	// Provider in this subtree.
+	const value = ! isEmpty( fillProps ) ? fillProps : null;
+	return (
+		<ToolsPanelContext.Provider value={ value }>
+			{ children }
+		</ToolsPanelContext.Provider>
+	);
+}

package/src/components/link-control/settings-drawer.js

@@ -11,6 +11,7 @@ import { settings as settingsIcon } from '@wordpress/icons';
 import { useReducedMotion, useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -46,7 +47,7 @@ function LinkSettingsDrawer( {
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }
 				icon={ settingsIcon }
-				label={ __( 'Toggle link settings' ) }
+				label={ __( 'Link Settings' ) }
 				aria-controls={ settingsDrawerId }
 			/>
 			<MaybeAnimatePresence>

package/src/components/link-control/settings.js

@@ -20,6 +20,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 
 	const theSettings = settings.map( ( setting ) => (
 		<ToggleControl
+			__nextHasNoMarginBottom
 			className="block-editor-link-control__setting"
 			key={ setting.id }
 			label={ setting.title }

package/src/components/link-control/style.scss

@@ -22,6 +22,20 @@ $preview-image-height: 140px;
 		width: 90vw;
 		max-width: $modal-min-width;
 	}
+
+	.show-icon-labels & {
+		.components-button.has-icon {
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			// Uses ::before as ::after is already used for active tab styling.
+			&::before {
+				content: attr(aria-label);
+			}
+		}
+	}
 }
 
 // Provides positioning context for reset button. Without this then when an
@@ -72,7 +86,7 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__search-error {
-	margin: -$grid-unit-20*0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
+	margin: -$grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
 }
 
 .block-editor-link-control__search-actions {
@@ -103,7 +117,7 @@ $preview-image-height: 140px;
 	}
 
 	&::before {
-		height: $grid-unit-20*0.5;
+		height: $grid-unit-20 * 0.5;
 		top: 0;
 		bottom: auto;
 	}
@@ -123,7 +137,7 @@ $preview-image-height: 140px;
 
 .block-editor-link-control__search-results {
 	margin: 0;
-	padding: $grid-unit-20*0.5 $grid-unit-20 $grid-unit-20*0.5;
+	padding: $grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20 * 0.5;
 	max-height: 200px;
 	overflow-y: auto; // allow results list to scroll
 
@@ -224,7 +238,6 @@ $preview-image-height: 140px;
 		max-height: 32px;
 	}
 
-
 	.block-editor-link-control__search-item-info,
 	.block-editor-link-control__search-item-title {
 		overflow: hidden;
@@ -344,16 +357,13 @@ $preview-image-height: 140px;
 	width: 100%;
 }
 
-
 .block-editor-link-control__search-item.is-fetching {
-
 	.block-editor-link-control__search-item-description {
 		&::before,
 		&::after {
 			animation: loadingpulse 1s linear infinite;
 			animation-delay: 0.5s; // avoid animating for fast network responses
 		}
-
 	}
 
 	.block-editor-link-control__search-item-image {
@@ -403,7 +413,7 @@ $preview-image-height: 140px;
 	&::before {
 		content: "";
 		position: absolute;
-		top: -#{$block-selected-child-margin*2};
+		top: -#{$block-selected-child-margin * 2};
 		left: 0;
 		display: block;
 		width: 100%;

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

@@ -1670,7 +1670,7 @@ describe( 'Addition Settings UI', () => {
 		render( <LinkControlConsumer /> );
 
 		const settingsToggle = screen.queryByRole( 'button', {
-			name: 'Toggle link settings',
+			name: 'Link Settings',
 			ariaControls: 'link-settings-1',
 		} );
 
@@ -1690,7 +1690,7 @@ describe( 'Addition Settings UI', () => {
 		const user = userEvent.setup();
 
 		const settingsToggle = screen.queryByRole( 'button', {
-			name: 'Toggle link settings',
+			name: 'Link Settings',
 			ariaControls: 'link-settings-1',
 		} );
 
@@ -2241,7 +2241,7 @@ describe( 'Controlling link title text', () => {
 
 async function toggleSettingsDrawer( user ) {
 	const settingsToggle = screen.queryByRole( 'button', {
-		name: 'Toggle link settings',
+		name: 'Link Settings',
 	} );
 
 	await user.click( settingsToggle );

package/src/components/list-view/block.js

@@ -27,6 +27,7 @@ import { sprintf, __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import ListViewLeaf from './leaf';
+import useListViewScrollIntoView from './use-list-view-scroll-into-view';
 import {
 	BlockMoverUpButton,
 	BlockMoverDownButton,
@@ -57,6 +58,7 @@ function ListViewBlock( {
 	isSyncedBranch,
 } ) {
 	const cellRef = useRef( null );
+	const rowRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const { clientId } = block;
 
@@ -220,6 +222,19 @@ function ListViewBlock( {
 		? selectedClientIds
 		: [ clientId ];
 
+	// Pass in a ref to the row, so that it can be scrolled
+	// into view when selected. For long lists, the placeholder for the
+	// selected block is also observed, within ListViewLeafPlaceholder.
+	useListViewScrollIntoView( {
+		isSelected,
+		rowItemRef: rowRef,
+		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 }
@@ -235,6 +250,7 @@ function ListViewBlock( {
 			data-block={ clientId }
 			isExpanded={ canExpand ? isExpanded : undefined }
 			aria-selected={ !! isSelected || forceSelectionContentLock }
+			ref={ rowRef }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
@@ -256,7 +272,9 @@ function ListViewBlock( {
 							siblingBlockCount={ siblingBlockCount }
 							level={ level }
 							ref={ ref }
-							tabIndex={ tabIndex }
+							tabIndex={
+								currentlyEditingBlockInCanvas ? 0 : tabIndex
+							}
 							onFocus={ onFocus }
 							isExpanded={ isExpanded }
 							selectedClientIds={ selectedClientIds }

package/src/components/list-view/branch.js

@@ -155,8 +155,6 @@ function ListViewBranch( props ) {
 
 				const isDragged = !! draggedClientIds?.includes( clientId );
 
-				const showBlock = isDragged || blockInView;
-
 				// Make updates to the selected or dragged blocks synchronous,
 				// but asynchronous for any other block.
 				const isSelected = isClientIdSelected(
@@ -165,6 +163,7 @@ function ListViewBranch( props ) {
 				);
 				const isSelectedBranch =
 					isBranchSelected || ( isSelected && hasNestedBlocks );
+				const showBlock = isDragged || blockInView || isSelected;
 				return (
 					<AsyncModeProvider key={ clientId } value={ ! isSelected }>
 						{ showBlock && (

package/src/components/list-view/expander.js

@@ -19,6 +19,7 @@ export default function ListViewExpander( { onClick } ) {
 			className="block-editor-list-view__expander"
 			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }
 			aria-hidden="true"
+			data-testid="list-view-expander"
 		>
 			<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />
 		</span>