Improve accessibility of the Warning component in the block editor (#…

…67433) * Enhance accessibility of the Warning component * Fix: update test snapshot & optimize the useRef logic * Fix: use optional chaining Co-authored-by: sarthaknagoshe2002 <sarthaknagoshe2002@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org>
WordPress · Dec 19, 2024 · 058632b · 058632b · github-actions · Dec 19, 2024
1 parent 7edfd3c
commit 058632b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js
@@ -9,11 +9,23 @@ import clsx from 'clsx';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
+import { useEffect, useRef } from '@wordpress/element';
 
 function Warning( { className, actions, children, secondaryActions } ) {
+	const alertRef = useRef();
+
+	useEffect( () => {
+		alertRef.current?.focus();
+	}, [] );
+
 	return (
 		<div style={ { display: 'contents', all: 'initial' } }>
-			<div className={ clsx( className, 'block-editor-warning' ) }>
+			<div
+				className={ clsx( className, 'block-editor-warning' ) }
+				tabIndex="0"
+				ref={ alertRef }
+				role="alert"
+			>
 				<div className="block-editor-warning__contents">
 					<p className="block-editor-warning__message">
 						{ children }

diff --git a/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap
@@ -7,6 +7,8 @@ exports[`Warning should match snapshot 1`] = `
   >
     <div
       class="block-editor-warning"
+      role="alert"
+      tabindex="0"
     >
       <div
         class="block-editor-warning__contents"