When I test the following JSX, I don’t see an aria-live attribute added to the HTML output in the editor
JSX
<Notice status="warning" politeness="polite" isDismissible={false}> Here is a test notice</Notice>
HTML
<div class="components-notice is-warning"><div data-wp-c16t="true" data-wp-component="VisuallyHidden" class="components-visually-hidden ec-fd-ad-ac-adbdbfb-0 e19lxcc00" style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; overflow-wrap: normal;">Warning notice</div><div class="components-notice__content">Here is a test notice<div class="components-notice__actions"></div></div></div>
The aria-live attribute is missing because the @wordpress/components Notice component isn’t applying politeness=”polite” as expected, likely a bug.
Quick Fix
Wrap the Notice in a <div> with aria-live:
jsx
Copy
import { Notice } from ‘@wordpress/components’;
function AccessibleNotice() {
return (
<div aria-live=”polite” role=”status” aria-atomic=”true”>
<Notice status=”warning” politeness=”polite” isDismissible={false}>
Here is a test notice
</Notice>
</div>
);
}
Steps
Test: Verify with NVDA/VoiceOver; ensure the notice is announced.
Check Version: Update WordPress (e.g., 6.6.2) and Gutenberg (e.g., 18.0+). Retest original JSX.
Report Bug: If still missing, file an issue on Gutenberg GitHub with your JSX, HTML output, and versions.
. Reason: moved to Accessibility, since this is an accessibility issue
