Skip to content

Commit 684d482

Browse files
ciampociampo
committed
Notice: Let consumers announce errors explicitly
1 parent ee3b175 commit 684d482

21 files changed

Lines changed: 172 additions & 57 deletions

File tree

‎package-lock.json‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/customize-widgets/CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
### Bug Fixes
66

7-
- Error boundary: Announce only the error message instead of the entire notice and its action labels. ([#82737](https://github.com/WordPress/gutenberg/pull/82737))
7+
- Error boundary: Explicitly announce the error title and description, excluding action labels. ([#82737](https://github.com/WordPress/gutenberg/pull/82737))
88
- Open the Welcome Guide from a plain menu item instead of a preference toggle, so the Options menu no longer announces "Preference activated - Welcome Guide" ([#82395](https://github.com/WordPress/gutenberg/pull/82395)).
99

1010
## 5.55.0 (2026-09-10)

‎packages/customize-widgets/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
},
4040
"wpScript": true,
4141
"dependencies": {
42+
"@wordpress/a11y": "file:../a11y",
4243
"@wordpress/admin-ui": "file:../admin-ui",
4344
"@wordpress/base-styles": "file:../base-styles",
4445
"@wordpress/block-editor": "file:../block-editor",

‎packages/customize-widgets/src/components/error-boundary/index.jsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component } from '@wordpress/element';
2+
import { speak } from '@wordpress/a11y';
23
import { __ } from '@wordpress/i18n';
34
// eslint-disable-next-line @wordpress/use-recommended-components -- The fallback UI renders outside the editor's notice system.
45
import { Card, CollapsibleCard, Notice, Stack, Text } from '@wordpress/ui';
@@ -125,6 +126,12 @@ export default class ErrorBoundary extends Component {
125126
}
126127

127128
componentDidCatch( error, errorInfo ) {
129+
speak(
130+
__(
131+
'The editor has crashed. An unknown error occurred. Reload your browser to try again, or copy the error to report the problem or search.'
132+
),
133+
'assertive'
134+
);
128135
this.setState( { componentStack: errorInfo?.componentStack } );
129136
doAction( 'editor.ErrorBoundary.errorLogged', error, errorInfo );
130137
}
@@ -149,7 +156,7 @@ export default class ErrorBoundary extends Component {
149156
<Notice.Title>
150157
{ __( 'The editor has crashed' ) }
151158
</Notice.Title>
152-
<Notice.Description role="alert">
159+
<Notice.Description>
153160
{ __(
154161
'An unknown error occurred. Reload your browser to try again, or copy the error to report the problem or search.'
155162
) }

‎packages/customize-widgets/src/components/error-boundary/test/error-boundary.jsdom.test.jsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { describe, expect, it, vi } from 'vitest';
22
import { render, screen } from '@testing-library/react';
3+
import { speak } from '@wordpress/a11y';
34
import * as wpHooks from '@wordpress/hooks';
45
import ErrorBoundary from '../index';
56

7+
vi.mock( import( '@wordpress/a11y' ), () => ( { speak: vi.fn() } ) );
8+
69
const theError = new Error( 'Kaboom' );
710

811
const ChildComponent = () => {
@@ -11,18 +14,19 @@ const ChildComponent = () => {
1114

1215
describe( 'Error Boundary', () => {
1316
describe( 'when error is thrown from a Child component', () => {
14-
it( 'keeps recovery actions outside the error alert', () => {
17+
it( 'announces the error title and description without action labels', () => {
1518
render(
1619
<ErrorBoundary>
1720
<ChildComponent />
1821
</ErrorBoundary>
1922
);
2023

2124
expect( console ).toHaveErrored();
22-
const alert = screen.getByRole( 'alert' );
23-
expect( alert ).toHaveTextContent(
24-
/^An unknown error occurred\. Reload your browser to try again, or copy the error to report the problem or search\.$/
25+
expect( speak ).toHaveBeenCalledExactlyOnceWith(
26+
'The editor has crashed. An unknown error occurred. Reload your browser to try again, or copy the error to report the problem or search.',
27+
'assertive'
2528
);
29+
expect( screen.queryByRole( 'alert' ) ).not.toBeInTheDocument();
2630
const copyError = screen.getByRole( 'button', {
2731
name: 'Copy error',
2832
} );

‎packages/edit-widgets/CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
### Bug Fixes
66

7-
- Error boundary: Announce only the error message instead of the entire notice and its action labels. ([#82737](https://github.com/WordPress/gutenberg/pull/82737))
7+
- Error boundary: Explicitly announce the error title and description, excluding action labels. ([#82737](https://github.com/WordPress/gutenberg/pull/82737))
88
- Open the Welcome Guide from a plain menu item instead of a preference toggle, so the Options menu no longer announces "Preference activated - Welcome Guide" ([#82395](https://github.com/WordPress/gutenberg/pull/82395)).
99

1010
## 6.55.0 (2026-09-10)

‎packages/edit-widgets/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
]
4848
},
4949
"dependencies": {
50+
"@wordpress/a11y": "file:../a11y",
5051
"@wordpress/admin-ui": "file:../admin-ui",
5152
"@wordpress/api-fetch": "file:../api-fetch",
5253
"@wordpress/base-styles": "file:../base-styles",

‎packages/edit-widgets/src/components/error-boundary/index.jsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component } from '@wordpress/element';
2+
import { speak } from '@wordpress/a11y';
23
import { __ } from '@wordpress/i18n';
34
// eslint-disable-next-line @wordpress/use-recommended-components -- The fallback UI renders outside the editor's notice system.
45
import { Card, CollapsibleCard, Notice, Stack, Text } from '@wordpress/ui';
@@ -125,6 +126,12 @@ export default class ErrorBoundary extends Component {
125126
}
126127

127128
componentDidCatch( error, errorInfo ) {
129+
speak(
130+
__(
131+
'The editor has crashed. An unknown error occurred. Reload your browser to try again, or copy the error to report the problem or search.'
132+
),
133+
'assertive'
134+
);
128135
this.setState( { componentStack: errorInfo?.componentStack } );
129136
doAction( 'editor.ErrorBoundary.errorLogged', error, errorInfo );
130137
}
@@ -149,7 +156,7 @@ export default class ErrorBoundary extends Component {
149156
<Notice.Title>
150157
{ __( 'The editor has crashed' ) }
151158
</Notice.Title>
152-
<Notice.Description role="alert">
159+
<Notice.Description>
153160
{ __(
154161
'An unknown error occurred. Reload your browser to try again, or copy the error to report the problem or search.'
155162
) }

‎packages/edit-widgets/src/components/error-boundary/test/error-boundary.jsdom.test.jsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { describe, expect, it, vi } from 'vitest';
22
import { render, screen } from '@testing-library/react';
3+
import { speak } from '@wordpress/a11y';
34
import * as wpHooks from '@wordpress/hooks';
45
import ErrorBoundary from '../index';
56

7+
vi.mock( import( '@wordpress/a11y' ), () => ( { speak: vi.fn() } ) );
8+
69
const theError = new Error( 'Kaboom' );
710

811
const ChildComponent = () => {
@@ -11,18 +14,19 @@ const ChildComponent = () => {
1114

1215
describe( 'Error Boundary', () => {
1316
describe( 'when error is thrown from a Child component', () => {
14-
it( 'keeps recovery actions outside the error alert', () => {
17+
it( 'announces the error title and description without action labels', () => {
1518
render(
1619
<ErrorBoundary>
1720
<ChildComponent />
1821
</ErrorBoundary>
1922
);
2023

2124
expect( console ).toHaveErrored();
22-
const alert = screen.getByRole( 'alert' );
23-
expect( alert ).toHaveTextContent(
24-
/^An unknown error occurred\. Reload your browser to try again, or copy the error to report the problem or search\.$/
25+
expect( speak ).toHaveBeenCalledExactlyOnceWith(
26+
'The editor has crashed. An unknown error occurred. Reload your browser to try again, or copy the error to report the problem or search.',
27+
'assertive'
2528
);
29+
expect( screen.queryByRole( 'alert' ) ).not.toBeInTheDocument();
2630
const copyError = screen.getByRole( 'button', {
2731
name: 'Copy error',
2832
} );

‎packages/editor/CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
### Bug Fixes
1212

13-
- Error boundary: Announce only the error message instead of the entire notice and its action labels. ([#82737](https://github.com/WordPress/gutenberg/pull/82737))
13+
- Error boundary: Explicitly announce the error title and description, excluding action labels. ([#82737](https://github.com/WordPress/gutenberg/pull/82737))
1414
- Notes: Focus the text field when editing a note ([#81930](https://github.com/WordPress/gutenberg/pull/81930)).
1515
- Template panel: Hide edit and create actions from users who can't create templates. ([#82858](https://github.com/WordPress/gutenberg/pull/82858))
1616
- Featured image field: Only register it for the post types a theme lists in its `post-thumbnails` support, matching the classic panel. ([#82773](https://github.com/WordPress/gutenberg/pull/82773))

0 commit comments

Comments
 (0)