Describe interface content region with the progress bar

WordPress · Aug 10, 2023 · 52e7767 · 52e7767
1 parent f05c0fd
commit 52e7767
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/edit-site/src/components/canvas-spinner/index.js b/packages/edit-site/src/components/canvas-spinner/index.js
@@ -13,7 +13,7 @@ import { useStylesPreviewColors } from '../global-styles/hooks';
 const { ProgressBar, Theme } = unlock( componentsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-export default function CanvasSpinner() {
+export default function CanvasSpinner( { id } ) {
 	const [ fallbackIndicatorColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const { highlightedColors } = useStylesPreviewColors();
@@ -23,7 +23,7 @@ export default function CanvasSpinner() {
 	return (
 		<div className="edit-site-canvas-spinner">
 			<Theme accent={ indicatorColor } background={ backgroundColor }>
-				<ProgressBar />
+				<ProgressBar id={ id } />
 			</Theme>
 		</div>
 	);

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import { EntityProvider } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -178,9 +179,14 @@ export default function Editor( { isLoading } ) {
 	// action in <URLQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
+	const loadingProgressId = useInstanceId(
+		CanvasSpinner,
+		'edit-site-editor__loading-progress'
+	);
+
 	return (
 		<>
-			{ isLoading ? <CanvasSpinner /> : null }
+			{ isLoading ? <CanvasSpinner id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			<EntityProvider kind="root" type="site">
 				<EntityProvider
@@ -232,6 +238,10 @@ export default function Editor( { isLoading } ) {
 									) }
 								</>
 							}
+							contentProps={ {
+								'aria-busy': 'true',
+								'aria-describedby': loadingProgressId,
+							} }
 							secondarySidebar={
 								isEditMode &&
 								( ( shouldShowInserter && (