Improve the Block editor warning accessibility and design

[afercia]

Description

The block editor Warning component can be improved in terms of accessibility and design.

1
When the Warning renders in the editor, it's only a visual warning. There's no speak message or ARIA role=alert that would make the warning message be automatically announced by screen readers.

2
The design could be improved. Screenshot:

Step-by-step reproduction instructions

I tested one of the implementation of the Warning, that is the MultipleUsageWarning component:

• Create a post and add a More block.
• Select the block and Copy either via the keyboard Copy shortcut or via the equivalent command in the block toolbar Options menu.
• Click the bottom part of the post to get the default block.
• Paste the copied More block.
• Observe the MultipleUsageWarning appears.
• Observe there's no screen reader announcement.
• Observe the Warning design could be improved.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[sarthaknagoshe2002]

@afercia I have raised a PR to resolve this issue, please have a look 😇

[afercia]

The attempted fix in #67433 may need to be reverted because autofocusing the Warning may introduce other problems.

A special, but not uncommon, case to address is when multiple warnings may be rendered at the same time.

Thinking at an alternative approach, the key points to address are:

• Do not move focus to the Warning.
• The Warning should be announced to screen readers. At the very least, the editor should notify screen readers that there are warning messages on the page.
• There should be a way for keyboard users to easily navigate to the Warning, especially when it contains action button. Otherwise, ethe currently focused element could be dozens of Tab presses away from the rendered Warnining. In this scenario, navigating to the warning would be very difficult.

Considering the above, what about the following:

• Trigger a generic speak message when the Warning component renders. Something like the following:

	useEffect( () => {
		speak( __( 'There are warnings. Press xyz to navigate through the warnings' ) );
	}, [] );

• In case of multiple warnings, only the last speak would be announced so that's not a problem.
• Provide a mechanism to navigate through all the warnings by using a keyboard shortcut.

Pinging @joedolson for any feedback or better ideas 🙏🏻