From 55c4bcf6f8baaaaeeb849ca7c9844001a67cee23 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Sun, 28 May 2023 13:43:11 +0800 Subject: [PATCH 1/4] Fix aria-describedby not updating content --- .../block-editor/src/components/list-view/appender.js | 8 +++----- packages/block-editor/src/components/list-view/block.js | 8 +++----- packages/block-editor/src/components/list-view/style.scss | 5 ----- 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js index cb731bbf227a8..0085af7c450f5 100644 --- a/packages/block-editor/src/components/list-view/appender.js +++ b/packages/block-editor/src/components/list-view/appender.js @@ -6,6 +6,7 @@ import { speak } from '@wordpress/a11y'; import { useSelect } from '@wordpress/data'; import { forwardRef, useEffect } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; +import { VisuallyHidden } from '@wordpress/components'; /** * Internal dependencies @@ -90,12 +91,9 @@ export const Appender = forwardRef( } } } /> -
+ { description } -
+ ); } diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 20a385537f9b8..f1de7d5b17e9f 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -10,6 +10,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; import { __experimentalTreeGridCell as TreeGridCell, __experimentalTreeGridItem as TreeGridItem, + VisuallyHidden, } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { moreVertical } from '@wordpress/icons'; @@ -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 5a4e80fa926fa..082389f71d4a0 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, From 97775b5115657c98aba03654dccb721b4737faf8 Mon Sep 17 00:00:00 2001 From: Alex Stine Date: Sun, 28 May 2023 17:26:55 -0500 Subject: [PATCH 2/4] Try aria-description. --- .../block-editor/src/components/list-view/appender.js | 9 +-------- .../src/components/list-view/block-select-button.js | 5 +++-- packages/block-editor/src/components/list-view/block.js | 9 +-------- 3 files changed, 5 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js index 0085af7c450f5..d2f02defbf7a3 100644 --- a/packages/block-editor/src/components/list-view/appender.js +++ b/packages/block-editor/src/components/list-view/appender.js @@ -1,12 +1,10 @@ /** * WordPress dependencies */ -import { useInstanceId } from '@wordpress/compose'; import { speak } from '@wordpress/a11y'; import { useSelect } from '@wordpress/data'; import { forwardRef, useEffect } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; -import { VisuallyHidden } from '@wordpress/components'; /** * Internal dependencies @@ -20,7 +18,6 @@ export const Appender = forwardRef( ( { nestingLevel, blockCount, clientId, ...props }, ref ) => { const { insertedBlock, setInsertedBlock } = useListViewContext(); - const instanceId = useInstanceId( Appender ); const { hideInserter } = useSelect( ( select ) => { const { getTemplateLock, __unstableGetEditorMode } = @@ -64,7 +61,6 @@ export const Appender = forwardRef( return null; } - const descriptionId = `list-view-appender__${ instanceId }`; const description = sprintf( /* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */ __( 'Append to %1$s block at position %2$d, Level %3$d' ), @@ -84,16 +80,13 @@ export const Appender = forwardRef( shouldDirectInsert={ false } __experimentalIsQuick { ...props } - toggleProps={ { 'aria-describedby': descriptionId } } + toggleProps={ { 'aria-description': description } } onSelectOrClose={ ( maybeInsertedBlock ) => { if ( maybeInsertedBlock?.clientId ) { setInsertedBlock( maybeInsertedBlock ); } } } /> - - { description } - ); } 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 ca5e414ae6576..df534d4438bb4 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 @@ -40,7 +40,7 @@ function ListViewBlockSelectButton( draggable, isExpanded, ariaLabel, - ariaDescribedBy, + ariaDescription, updateFocusAndSelection, }, ref @@ -138,7 +138,8 @@ function ListViewBlockSelectButton( draggable={ draggable } href={ `#block-${ clientId }` } aria-label={ ariaLabel } - aria-describedby={ ariaDescribedBy } + // eslint-disable-next-line jsx-a11y/aria-props + aria-description={ ariaDescription } aria-expanded={ isExpanded } > diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index f1de7d5b17e9f..808ab7d26af7e 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -10,9 +10,7 @@ import { hasBlockSupport } from '@wordpress/blocks'; import { __experimentalTreeGridCell as TreeGridCell, __experimentalTreeGridItem as TreeGridItem, - VisuallyHidden, } from '@wordpress/components'; -import { useInstanceId } from '@wordpress/compose'; import { moreVertical } from '@wordpress/icons'; import { useState, @@ -97,8 +95,6 @@ function ListViewBlock( { hasBlockSupport( blockName, '__experimentalToolbar', true ) && // Don't show the settings menu if block is disabled or content only. blockEditingMode === 'default'; - const instanceId = useInstanceId( ListViewBlock ); - const descriptionId = `list-view-block-select-button__${ instanceId }`; const blockPositionDescription = getBlockPositionDescription( position, siblingBlockCount, @@ -295,12 +291,9 @@ function ListViewBlock( { isExpanded={ canEdit ? isExpanded : undefined } selectedClientIds={ selectedClientIds } ariaLabel={ blockAriaLabel } - ariaDescribedBy={ descriptionId } + ariaDescription={ blockPositionDescription } updateFocusAndSelection={ updateFocusAndSelection } /> - - { blockPositionDescription } - ) } From efa7fddb01fc5fb1c414325f9d03776159ee6a1c Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Mon, 29 May 2023 09:55:36 +0800 Subject: [PATCH 3/4] Try a different approach --- .../src/components/list-view/appender.js | 7 +++++ .../list-view/aria-referenced-text.js | 30 +++++++++++++++++++ .../list-view/block-select-button.js | 5 ++-- .../src/components/list-view/block.js | 9 +++++- 4 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 packages/block-editor/src/components/list-view/aria-referenced-text.js diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js index d2f02defbf7a3..9124833a91286 100644 --- a/packages/block-editor/src/components/list-view/appender.js +++ b/packages/block-editor/src/components/list-view/appender.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { useInstanceId } from '@wordpress/compose'; import { speak } from '@wordpress/a11y'; import { useSelect } from '@wordpress/data'; import { forwardRef, useEffect } from '@wordpress/element'; @@ -13,11 +14,13 @@ 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 ) => { const { insertedBlock, setInsertedBlock } = useListViewContext(); + const instanceId = useInstanceId( Appender ); const { hideInserter } = useSelect( ( select ) => { const { getTemplateLock, __unstableGetEditorMode } = @@ -61,6 +64,7 @@ export const Appender = forwardRef( return null; } + const descriptionId = `list-view-appender__${ instanceId }`; const description = sprintf( /* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */ __( 'Append to %1$s block at position %2$d, Level %3$d' ), @@ -87,6 +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 0000000000000..b5d7a73e8bcf5 --- /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-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js index df534d4438bb4..ca5e414ae6576 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 @@ -40,7 +40,7 @@ function ListViewBlockSelectButton( draggable, isExpanded, ariaLabel, - ariaDescription, + ariaDescribedBy, updateFocusAndSelection, }, ref @@ -138,8 +138,7 @@ function ListViewBlockSelectButton( draggable={ draggable } href={ `#block-${ clientId }` } aria-label={ ariaLabel } - // eslint-disable-next-line jsx-a11y/aria-props - aria-description={ ariaDescription } + aria-describedby={ ariaDescribedBy } aria-expanded={ isExpanded } > diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index 808ab7d26af7e..e9eb4a7827686 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/packages/block-editor/src/components/list-view/block.js @@ -11,6 +11,7 @@ import { __experimentalTreeGridCell as TreeGridCell, __experimentalTreeGridItem as TreeGridItem, } from '@wordpress/components'; +import { useInstanceId } from '@wordpress/compose'; import { moreVertical } from '@wordpress/icons'; import { useState, @@ -39,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 }, @@ -95,6 +97,8 @@ function ListViewBlock( { hasBlockSupport( blockName, '__experimentalToolbar', true ) && // Don't show the settings menu if block is disabled or content only. blockEditingMode === 'default'; + const instanceId = useInstanceId( ListViewBlock ); + const descriptionId = `list-view-block-select-button__${ instanceId }`; const blockPositionDescription = getBlockPositionDescription( position, siblingBlockCount, @@ -291,9 +295,12 @@ function ListViewBlock( { isExpanded={ canEdit ? isExpanded : undefined } selectedClientIds={ selectedClientIds } ariaLabel={ blockAriaLabel } - ariaDescription={ blockPositionDescription } + ariaDescribedBy={ descriptionId } updateFocusAndSelection={ updateFocusAndSelection } /> + + { blockPositionDescription } + ) } From fc69115c428aee9f3bdb902004f97bf80c526105 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Mon, 29 May 2023 12:54:00 +0800 Subject: [PATCH 4/4] Fix missing prop --- packages/block-editor/src/components/list-view/appender.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js index 9124833a91286..2d2f633637293 100644 --- a/packages/block-editor/src/components/list-view/appender.js +++ b/packages/block-editor/src/components/list-view/appender.js @@ -84,7 +84,7 @@ export const Appender = forwardRef( shouldDirectInsert={ false } __experimentalIsQuick { ...props } - toggleProps={ { 'aria-description': description } } + toggleProps={ { 'aria-describedby': descriptionId } } onSelectOrClose={ ( maybeInsertedBlock ) => { if ( maybeInsertedBlock?.clientId ) { setInsertedBlock( maybeInsertedBlock );