diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js index cb731bbf227a8b..2d2f633637293a 100644 --- a/packages/block-editor/src/components/list-view/appender.js +++ b/packages/block-editor/src/components/list-view/appender.js @@ -14,6 +14,7 @@ import { store as blockEditorStore } from '../../store'; import useBlockDisplayTitle from '../block-title/use-block-display-title'; import { useListViewContext } from './context'; import Inserter from '../inserter'; +import AriaReferencedText from './aria-referenced-text'; export const Appender = forwardRef( ( { nestingLevel, blockCount, clientId, ...props }, ref ) => { @@ -90,12 +91,9 @@ export const Appender = forwardRef( } } } /> -
+ { description } -
+ ); } diff --git a/packages/block-editor/src/components/list-view/aria-referenced-text.js b/packages/block-editor/src/components/list-view/aria-referenced-text.js new file mode 100644 index 00000000000000..b5d7a73e8bcf52 --- /dev/null +++ b/packages/block-editor/src/components/list-view/aria-referenced-text.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { useRef, useEffect } from '@wordpress/element'; + +/** + * A component specifically designed to be used as an element referenced + * by ARIA attributes such as `aria-labelledby` or `aria-describedby`. + * + * @param {Object} props Props. + * @param {import('react').ReactNode} props.children + */ +export default function AriaReferencedText( { children, ...props } ) { + const ref = useRef(); + + useEffect( () => { + if ( ref.current ) { + // This seems like a no-op, but it fixes a bug in Firefox where + // it fails to recompute the text when only the text node changes. + // @see https://github.com/WordPress/gutenberg/pull/51035 + ref.current.textContent = ref.current.textContent; + } + }, [ children ] ); + + return ( + + ); +} diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 20a385537f9b8e..e9eb4a78276861 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -40,6 +40,7 @@ import { store as blockEditorStore } from '../../store'; import useBlockDisplayInformation from '../use-block-display-information'; import { useBlockLock } from '../block-lock'; import { unlock } from '../../lock-unlock'; +import AriaReferencedText from './aria-referenced-text'; function ListViewBlock( { block: { clientId }, @@ -297,12 +298,9 @@ function ListViewBlock( { ariaDescribedBy={ descriptionId } updateFocusAndSelection={ updateFocusAndSelection } /> -
+ { blockPositionDescription } -
+ ) } diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 5a4e80fa926fa2..082389f71d4a0e 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -340,11 +340,6 @@ } } -.block-editor-list-view-block-select-button__description, -.block-editor-list-view-appender__description { - display: none; -} - .block-editor-list-view-block__contents-cell, .block-editor-list-view-appender__cell { .block-editor-list-view-block__contents-container,