Fix screen readers not announcing updated aria-describedby in Firef…

…ox (WordPress#51035) * Fix aria-describedby not updating content * Try aria-description. * Try a different approach * Fix missing prop --------- Co-authored-by: Alex Stine <[email protected]>
pewresearch · Jul 13, 2023 · 97e3972 · 97e3972
1 parent bba52a3
commit 97e3972
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 15 deletions.
diff --git 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(
 						}
 					} }
 				/>
-				<div
-					className="list-view-appender__description"
-					id={ descriptionId }
-				>
+				<AriaReferencedText id={ descriptionId }>
 					{ description }
-				</div>
+				</AriaReferencedText>
 			</div>
 		);
 	}

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
@@ -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 (
+		<div hidden { ...props } ref={ ref }>
+			{ children }
+		</div>
+	);
+}
diff --git 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 }
 						/>
-						<div
-							className="block-editor-list-view-block-select-button__description"
-							id={ descriptionId }
-						>
+						<AriaReferencedText id={ descriptionId }>
 							{ blockPositionDescription }
-						</div>
+						</AriaReferencedText>
 					</div>
 				) }
 			</TreeGridCell>

diff --git 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,