loading: Announce fullscreen LoadingBlanket assertively (#1916)

agriculturegovau · Jan 5, 2025 · 55637c9 · 55637c9
1 parent ddbcf4a
commit 55637c9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/.changeset/itchy-coats-argue.md b/.changeset/itchy-coats-argue.md
@@ -0,0 +1,5 @@
+---
+'@ag.ds-next/react': patch
+---
+
+loading: Announce `'fullscreen'` `LoadingBlanket` assertively.
diff --git a/packages/react/src/loading/LoadingBlanket.tsx b/packages/react/src/loading/LoadingBlanket.tsx
@@ -18,7 +18,9 @@ export const LoadingBlanket = ({
 	<LoadingBlanketContainer fullScreen={fullScreen}>
 		<LoadingBlanketContent>
 			<LoadingDots size={fullScreen ? 'lg' : 'md'} />
-			<LoadingBlanketLabel>{label}</LoadingBlanketLabel>
+			<LoadingBlanketLabel role={fullScreen ? 'alert' : 'status'}>
+				{label}
+			</LoadingBlanketLabel>
 		</LoadingBlanketContent>
 	</LoadingBlanketContainer>
 );
diff --git a/packages/react/src/loading/LoadingBlanketLabel.tsx b/packages/react/src/loading/LoadingBlanketLabel.tsx
@@ -3,10 +3,14 @@ import { Text } from '../text';
 
 export type LoadingBlanketLabelProps = {
 	children: ReactNode;
+	role: 'alert' | 'status';
 };
 
-export const LoadingBlanketLabel = ({ children }: LoadingBlanketLabelProps) => (
-	<Text fontSize="lg" fontWeight="bold" lineHeight="heading" role="status">
+export const LoadingBlanketLabel = ({
+	children,
+	role,
+}: LoadingBlanketLabelProps) => (
+	<Text fontSize="lg" fontWeight="bold" lineHeight="heading" role={role}>
 		{children}
 	</Text>
 );