diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 96c246c30dec9a..f99183c59948fb 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Internal + +- `ListView`: Compute the block visibility label once in `ListViewBlock` and pass it down to `ListViewBlockSelectButton`, removing a duplicated `useSelect`/`getBlockVisibilityLabel` call and clarifying that the label is exposed to assistive technology through the row's `aria-describedby` ([#78640](https://github.com/WordPress/gutenberg/pull/78640)). + ## 15.20.0 (2026-05-27) ### Bug Fixes 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 index 43beb40b38d5ec..8d31d7888beaf7 100644 --- a/packages/block-editor/src/components/list-view/block-select-button.js +++ b/packages/block-editor/src/components/list-view/block-select-button.js @@ -36,7 +36,6 @@ import { useBlockLock } from '../block-lock'; import useListViewImages from './use-list-view-images'; import { store as blockEditorStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import { getBlockVisibilityLabel } from '../block-visibility'; const { Badge: WCBadge } = unlock( componentsPrivateApis ); @@ -55,6 +54,7 @@ function ListViewBlockSelectButton( draggable, isExpanded, ariaDescribedBy, + visibilityLabel, }, ref ) { @@ -64,14 +64,10 @@ function ListViewBlockSelectButton( context: 'list-view', } ); const { isLocked } = useBlockLock( clientId ); - const { hasPatternName, blockVisibility } = useSelect( + const hasPatternName = useSelect( ( select ) => { const { getBlockAttributes } = unlock( select( blockEditorStore ) ); - const attributes = getBlockAttributes( clientId ); - return { - hasPatternName: !! attributes?.metadata?.patternName, - blockVisibility: attributes?.metadata?.blockVisibility, - }; + return !! getBlockAttributes( clientId )?.metadata?.patternName; }, [ clientId ] ); @@ -80,9 +76,6 @@ function ListViewBlockSelectButton( const isSticky = blockInformation?.positionType === 'sticky'; const images = useListViewImages( { clientId, isExpanded } ); - // Determine visibility label from blockVisibility metadata - const visibilityLabel = getBlockVisibilityLabel( blockVisibility ); - // 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 @@ -166,9 +159,12 @@ function ListViewBlockSelectButton( ) : null } { !! visibilityLabel && ( - // TODO: `visibilityLabel` is not exposed to - // assistive technology — the trigger is - // `aria-hidden`, so the label is sighted-hover-only. + // The tooltip below is a sighted-hover affordance for + // the (decorative) visibility icon. The same + // `visibilityLabel` is exposed to assistive technology + // via the row's `aria-describedby`, which references the + // hidden `AriaReferencedText` rendered by the parent + // `ListViewBlock`. { [