diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index 17ea149b61da7..09f25449fb2bb 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -33,6 +33,7 @@ import { useEventHandlers } from './use-selected-block-event-handlers'; import { useNavModeExit } from './use-nav-mode-exit'; import { useBlockRefProvider } from './use-block-refs'; import { useIntersectionObserver } from './use-intersection-observer'; +import { useBlockScreenReaderDescription } from './use-block-screen-reader-description'; import { store as blockEditorStore } from '../../../store'; /** @@ -148,6 +149,7 @@ export function useBlockProps( tabIndex: 0, role: 'document', 'aria-label': blockLabel, + 'aria-description': useBlockScreenReaderDescription( clientId ), 'data-block': clientId, 'data-type': name, 'data-title': blockTitle, diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-screen-reader-description.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-screen-reader-description.js new file mode 100644 index 0000000000000..8c6d353eec07a --- /dev/null +++ b/packages/block-editor/src/components/block-list/use-block-props/use-block-screen-reader-description.js @@ -0,0 +1,57 @@ +/** + * WordPress dependencies + */ +import { sprintf, __ } from '@wordpress/i18n'; +import { getBlockType } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../../store'; + +export function useBlockScreenReaderDescription( clientId ) { + const { hasChildBlocks, blockTitle, canSupportChildBlocks } = useSelect( + ( select ) => { + const { + getBlockRootClientId, + getBlockName, + getBlock, + getBlockListSettings, + } = select( blockEditorStore ); + const clientIdToUse = getBlockRootClientId( clientId ); + const blockName = getBlockName( + clientIdToUse ? clientIdToUse : clientId + ); + const blockType = getBlockType( blockName ); + return { + hasChildBlocks: + getBlock( clientIdToUse ? clientIdToUse : clientId ) + ?.innerBlocks?.length > 0, + blockTitle: blockType?.title, + canSupportChildBlocks: getBlockListSettings( + clientIdToUse ? clientIdToUse : clientId + ), + }; + }, + [ clientId ] + ); + let description; + if ( canSupportChildBlocks ) { + if ( hasChildBlocks ) { + description = sprintf( + // Translators: 1: The block title to lowercase for good sentence structure. + __( 'Press Escape key to navigate child blocks of %1$s.' ), + blockTitle.toLowerCase() + ); + } else { + description = sprintf( + // Translators: 1: The block title to lowercase for good sentence structure. + __( + 'Press Tab followed by Enter keys to add a child block to %s.' + ), + blockTitle.toLowerCase() + ); + } + } + return description; +}