Skip to content

Commit

Permalink
Improve accessibility of the Warning component in the block editor (W…
Browse files Browse the repository at this point in the history
…ordPress#67433)

* Enhance accessibility of the Warning component

* Fix: update test snapshot & optimize the useRef logic

* Fix: use optional chaining

Co-authored-by: sarthaknagoshe2002 <[email protected]>
Co-authored-by: afercia <[email protected]>
  • Loading branch information
3 people authored Dec 19, 2024
1 parent 7edfd3c commit 058632b
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 1 deletion.
14 changes: 13 additions & 1 deletion packages/block-editor/src/components/warning/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 058632b

Please sign in to comment.