From 058632bff2352a331eb33984d21bb84ca307d876 Mon Sep 17 00:00:00 2001
From: Sarthak Nagoshe <83178197+sarthaknagoshe2002@users.noreply.github.com>
Date: Thu, 19 Dec 2024 14:20:11 +0530
Subject: [PATCH] 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>
---
 .../block-editor/src/components/warning/index.js   | 14 +++++++++++++-
 .../warning/test/__snapshots__/index.js.snap       |  2 ++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js
index 17a014107b43af..628a17d4f47899 100644
--- 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
index dbaba10e18efe6..57c384fab28ba3 100644
--- 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"