fix(Alert): Add aria-live 'polite' or 'assertive' based on severity

Altinn · Jun 28, 2023 · 369162f · 369162f
1 parent 01184f7
commit 369162f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/layout/Alert/Alert.tsx b/src/layout/Alert/Alert.tsx
@@ -8,6 +8,14 @@ import type { PropsFromGenericComponent } from 'src/layout';
 export type AlertProps = PropsFromGenericComponent<'Alert'>;
 
 import styles from 'src/layout/Alert/Alert.module.css';
+import type { AlertSeverity } from 'src/layout/Alert/types';
+
+function calculateAriaLive(severity: AlertSeverity): 'polite' | 'assertive' {
+  if (severity === 'warning' || severity === 'danger') {
+    return 'assertive';
+  }
+  return 'polite';
+}
 
 export const Alert = ({ node }: AlertProps) => {
   const { severity, useAsAlert, textResourceBindings } = node.item;
@@ -20,7 +28,7 @@ export const Alert = ({ node }: AlertProps) => {
     <AlertDesignSystem
       severity={severity}
       role={useAsAlert ? 'alert' : undefined}
-      aria-live={useAsAlert ? 'polite' : undefined}
+      aria-live={useAsAlert ? calculateAriaLive(severity) : undefined}
       aria-label={useAsAlert ? title : undefined}
     >
       <span className={styles.title}>{title}</span>

diff --git a/src/layout/Alert/types.d.ts b/src/layout/Alert/types.d.ts
@@ -1,7 +1,9 @@
 import type { ILayoutCompBase } from 'src/layout/layout';
 
+export type AlertSeverity = 'success' | 'warning' | 'danger' | 'info';
+
 export interface ILayoutCompAlertBase {
-  severity: 'success' | 'warning' | 'danger' | 'info';
+  severity: AlertSeverity;
   useAsAlert?: boolean;
 }