List View: remove the sticky position icon tooltip (#63850)

* List View: remove tooltip around the "position: sticky" icon * List view: add "position" information to the block accessible description text * Apply feedback --- Co-authored-by: ciampo <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Jul 24, 2024 · 0b94a19 · 0b94a19
1 parent c5f3dd5
commit 0b94a19
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 19 deletions.
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -10,12 +10,10 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
-	Tooltip,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
-import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -65,14 +63,6 @@ function ListViewBlockSelectButton(
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
-	const positionLabel = blockInformation?.positionLabel
-		? sprintf(
-				// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
-				__( 'Position: %1$s' ),
-				blockInformation.positionLabel
-		  )
-		: '';
-
 	// 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
@@ -136,10 +126,10 @@ function ListViewBlockSelectButton(
 						</Truncate>
 					</span>
 				) }
-				{ positionLabel && isSticky && (
-					<Tooltip text={ positionLabel }>
+				{ isSticky && (
+					<span className="block-editor-list-view-block-select-button__sticky">
 						<Icon icon={ pinSmall } />
-					</Tooltip>
+					</span>
 				) }
 				{ images.length ? (
 					<span

diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -465,8 +465,10 @@ function ListViewBlock( {
 		level
 	);
 
-	const blockPropertiesDescription =
-		getBlockPropertiesDescription( isLocked );
+	const blockPropertiesDescription = getBlockPropertiesDescription(
+		blockInformation,
+		isLocked
+	);
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -562,7 +564,12 @@ function ListViewBlock( {
 							ariaDescribedBy={ descriptionId }
 						/>
 						<AriaReferencedText id={ descriptionId }>
-							{ `${ blockPositionDescription } ${ blockPropertiesDescription }` }
+							{ [
+								blockPositionDescription,
+								blockPropertiesDescription,
+							]
+								.filter( Boolean )
+								.join( ' ' ) }
 						</AriaReferencedText>
 					</div>
 				) }

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
@@ -416,7 +416,8 @@
 		background: rgba($black, 0.3);
 	}
 
-	.block-editor-list-view-block-select-button__lock {
+	.block-editor-list-view-block-select-button__lock,
+	.block-editor-list-view-block-select-button__sticky {
 		line-height: 0;
 	}
 

diff --git a/packages/block-editor/src/components/list-view/utils.js b/packages/block-editor/src/components/list-view/utils.js
@@ -13,8 +13,19 @@ export const getBlockPositionDescription = ( position, siblingCount, level ) =>
 		level
 	);
 
-export const getBlockPropertiesDescription = ( isLocked ) =>
-	isLocked ? __( 'This block is locked.' ) : '';
+export const getBlockPropertiesDescription = ( blockInformation, isLocked ) =>
+	[
+		blockInformation?.positionLabel
+			? `${ sprintf(
+					// translators: %s: Position of selected block, e.g. "Sticky" or "Fixed".
+					__( 'Position: %s' ),
+					blockInformation.positionLabel
+			  ) }.`
+			: undefined,
+		isLocked ? __( 'This block is locked.' ) : undefined,
+	]
+		.filter( Boolean )
+		.join( ' ' );
 
 /**
  * Returns true if the client ID occurs within the block selection or multi-selection,