fix(a11y): Use role="alert" as default value for ErrorWrapper (#2974

)
theopensystemslab · Apr 3, 2024 · 77a5056 · 77a5056
1 parent 5b642e6
commit 77a5056
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/editor.planx.uk/src/@planx/components/DateInput/Public.test.tsx b/editor.planx.uk/src/@planx/components/DateInput/Public.test.tsx
@@ -179,7 +179,7 @@ it("should not have any accessibility violations whilst in the error state", asy
   // Main ErrorWrapper does display, and is in error state
   await waitFor(() => expect(mainErrorMessage).not.toBeEmptyDOMElement());
   const [mainErrorWrapper, ..._rest] = screen.getAllByTestId("error-wrapper");
-  expect(mainErrorWrapper).toHaveAttribute("role", "status");
+  expect(mainErrorWrapper).toHaveAttribute("role", "alert");
 
   const results = await axe(container);
   expect(results).toHaveNoViolations();

diff --git a/editor.planx.uk/src/@planx/components/TextInput/Public.test.tsx b/editor.planx.uk/src/@planx/components/TextInput/Public.test.tsx
@@ -160,5 +160,5 @@ it("should change the role of the ErrorWrapper when an invalid input is given",
   user.click(screen.getByTestId("continue-button"));
 
   expect(errorWrapper).not.toBeEmptyDOMElement();
-  expect(errorWrapper).toHaveAttribute("role", "status");
+  expect(errorWrapper).toHaveAttribute("role", "alert");
 });
diff --git a/editor.planx.uk/src/ui/shared/ErrorWrapper.tsx b/editor.planx.uk/src/ui/shared/ErrorWrapper.tsx
@@ -10,6 +10,9 @@ export interface Props {
   error?: string;
   children?: ReactElement;
   id?: string;
+  // "alert" - important and time-sensitive information (e.g. invalid input feedback)
+  // "status" - advisory information which does not interrupt focus (e.g. file upload status)
+  role?: "alert" | "status";
 }
 
 const Root = styled(Box, {
@@ -35,7 +38,12 @@ const ErrorText = styled(Typography)(({ theme }) => ({
   fontWeight: FONT_WEIGHT_SEMI_BOLD,
 }));
 
-export default function ErrorWrapper({ id, error, children }: Props): FCReturn {
+export default function ErrorWrapper({
+  id,
+  error,
+  children,
+  role = "alert",
+}: Props): FCReturn {
   const inputId = id ? `${ERROR_MESSAGE}-${id}` : undefined;
   const { trackInputErrors } = useAnalyticsTracking();
 
@@ -44,8 +52,7 @@ export default function ErrorWrapper({ id, error, children }: Props): FCReturn {
   }, [error, trackInputErrors]);
 
   return (
-    // role="status" immediately announces the error to screenreaders without interrupting focus
-    <Root error={error} role="status" data-testid="error-wrapper">
+    <Root error={error} role={role} data-testid="error-wrapper">
       <ErrorText id={inputId} data-testid={inputId} variant="body1">
         {error && error}
       </ErrorText>