From df2319c7483944f4543906b8d4f31a8a781a9677 Mon Sep 17 00:00:00 2001 From: Alex Stine Date: Thu, 17 Mar 2022 18:07:05 -0400 Subject: [PATCH 1/4] Add aria-description to block props explaining to users how to navigate or add child blocks. --- .../block-list/use-block-props/index.js | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) 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 d03cb5ecf70a1..2497c2eb9e5a5 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 @@ -72,6 +72,8 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { isPartOfSelection, adjustScrolling, enableAnimation, + blockListSettings, + hasChildBlocks, } = useSelect( ( select ) => { const { @@ -84,6 +86,8 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { isBlockMultiSelected, isAncestorMultiSelected, isFirstMultiSelectedBlock, + getBlockListSettings, + getBlockOrder, } = select( blockEditorStore ); const isSelected = isBlockSelected( clientId ); const isPartOfMultiSelection = @@ -104,6 +108,8 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { enableAnimation: ! isTyping() && getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD, + blockListSettings: getBlockListSettings( clientId ), + hasChildBlocks: getBlockOrder( clientId ).length > 0, }; }, [ clientId ] @@ -111,6 +117,21 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { // translators: %s: Type of block (i.e. Text, Image etc) const blockLabel = sprintf( __( 'Block: %s' ), blockTitle ); + const blockDescription = hasChildBlocks + ? sprintf( + // translators: 1: Block title to lowercase for better sentence structure. + __( + 'Press Escape followed by Left and Right Arrows to explore child blocks of the %s block.' + ), + blockTitle.toLowerCase() + ) + : sprintf( + // translators: 1: Block title to lowercase for better sentence structure. + __( + 'Press Tab followed by Enter to add a child block of the %s block.' + ), + blockTitle.toLowerCase() + ); const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : ''; const mergedRefs = useMergeRefs( [ props.ref, @@ -148,6 +169,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { tabIndex: 0, role: 'document', 'aria-label': blockLabel, + 'aria-description': blockListSettings ? blockDescription : undefined, 'data-block': clientId, 'data-type': name, 'data-title': blockTitle, From 11ab2ac513f7bfc34e8ba9716ed5486dd3e6f418 Mon Sep 17 00:00:00 2001 From: Alex Stine Date: Mon, 28 Mar 2022 19:57:23 -0400 Subject: [PATCH 2/4] Move functionality to hook. --- .../block-list/use-block-props/index.js | 24 +---------- .../use-block-screen-reader-description.js | 43 +++++++++++++++++++ 2 files changed, 45 insertions(+), 22 deletions(-) create mode 100644 packages/block-editor/src/components/block-list/use-block-props/use-block-screen-reader-description.js 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 2497c2eb9e5a5..b1c96e1d5eb1e 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 @@ -35,6 +35,7 @@ import { useScrollIntoView } from './use-scroll-into-view'; import { useBlockRefProvider } from './use-block-refs'; import { useMultiSelection } from './use-multi-selection'; import { useIntersectionObserver } from './use-intersection-observer'; +import { useBlockScreenReaderDescription } from './use-block-screen-reader-description'; import { store as blockEditorStore } from '../../../store'; /** @@ -72,8 +73,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { isPartOfSelection, adjustScrolling, enableAnimation, - blockListSettings, - hasChildBlocks, } = useSelect( ( select ) => { const { @@ -86,8 +85,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { isBlockMultiSelected, isAncestorMultiSelected, isFirstMultiSelectedBlock, - getBlockListSettings, - getBlockOrder, } = select( blockEditorStore ); const isSelected = isBlockSelected( clientId ); const isPartOfMultiSelection = @@ -108,8 +105,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { enableAnimation: ! isTyping() && getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD, - blockListSettings: getBlockListSettings( clientId ), - hasChildBlocks: getBlockOrder( clientId ).length > 0, }; }, [ clientId ] @@ -117,21 +112,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { // translators: %s: Type of block (i.e. Text, Image etc) const blockLabel = sprintf( __( 'Block: %s' ), blockTitle ); - const blockDescription = hasChildBlocks - ? sprintf( - // translators: 1: Block title to lowercase for better sentence structure. - __( - 'Press Escape followed by Left and Right Arrows to explore child blocks of the %s block.' - ), - blockTitle.toLowerCase() - ) - : sprintf( - // translators: 1: Block title to lowercase for better sentence structure. - __( - 'Press Tab followed by Enter to add a child block of the %s block.' - ), - blockTitle.toLowerCase() - ); const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : ''; const mergedRefs = useMergeRefs( [ props.ref, @@ -169,7 +149,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { tabIndex: 0, role: 'document', 'aria-label': blockLabel, - 'aria-description': blockListSettings ? blockDescription : undefined, + '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..5d7cdaa2624d4 --- /dev/null +++ b/packages/block-editor/src/components/block-list/use-block-props/use-block-screen-reader-description.js @@ -0,0 +1,43 @@ +/** + * 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 } = useSelect( + ( select ) => { + const { getBlockRootClientId, getBlockName, getBlock } = 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, + }; + }, + [ clientId ] + ); + let description; + if ( hasChildBlocks ) { + description = sprintf( + // Translators: 1: The block title to lowercase for good sentence structure. + __( 'Child block of %1$s.' ), + blockTitle.toLowerCase() + ); + } else { + description = __( 'Testing non-child block description.' ); + } + return description; +} From 35d528308b1eca72bf5257d0a3fc43d424938d82 Mon Sep 17 00:00:00 2001 From: Alex Stine Date: Mon, 28 Mar 2022 21:20:55 -0400 Subject: [PATCH 3/4] Fix description logic for new blocks without inner blocks. Remove announcement for blocks that do not need it. --- .../use-block-screen-reader-description.js | 40 +++++++++++++------ 1 file changed, 28 insertions(+), 12 deletions(-) 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 index 5d7cdaa2624d4..392e2470a2faa 100644 --- 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 @@ -10,11 +10,14 @@ import { useSelect } from '@wordpress/data'; import { store as blockEditorStore } from '../../../store'; export function useBlockScreenReaderDescription( clientId ) { - const { hasChildBlocks, blockTitle } = useSelect( + const { hasChildBlocks, blockTitle, canSupportChildBlocks } = useSelect( ( select ) => { - const { getBlockRootClientId, getBlockName, getBlock } = select( - blockEditorStore - ); + const { + getBlockRootClientId, + getBlockName, + getBlock, + getBlockListSettings, + } = select( blockEditorStore ); const clientIdToUse = getBlockRootClientId( clientId ); const blockName = getBlockName( clientIdToUse ? clientIdToUse : clientId @@ -25,19 +28,32 @@ export function useBlockScreenReaderDescription( clientId ) { getBlock( clientIdToUse ? clientIdToUse : clientId ) ?.innerBlocks?.length > 0, blockTitle: blockType?.title, + canSupportChildBlocks: getBlockListSettings( + clientIdToUse ? clientIdToUse : clientId + ), }; }, [ clientId ] ); let description; - if ( hasChildBlocks ) { - description = sprintf( - // Translators: 1: The block title to lowercase for good sentence structure. - __( 'Child block of %1$s.' ), - blockTitle.toLowerCase() - ); - } else { - description = __( 'Testing non-child block 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; } From faa6cf20d60dc843ae8f0eec7b042cd456b6f6b6 Mon Sep 17 00:00:00 2001 From: Alex Stine Date: Sat, 11 Jun 2022 23:04:51 -0500 Subject: [PATCH 4/4] Fix Prettier error. --- .../use-block-props/use-block-screen-reader-description.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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 index 392e2470a2faa..8c6d353eec07a 100644 --- 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 @@ -40,9 +40,7 @@ export function useBlockScreenReaderDescription( clientId ) { 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.' - ), + __( 'Press Escape key to navigate child blocks of %1$s.' ), blockTitle.toLowerCase() ); } else {