diff --git a/editor.planx.uk/src/@planx/components/DateInput/Public.test.tsx b/editor.planx.uk/src/@planx/components/DateInput/Public.test.tsx index a683cd6195..52d654a1b2 100644 --- 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 index 211cdc5bf9..e54d5d3b4d 100644 --- 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 index 7600899b2c..c71d037b4d 100644 --- 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 - + {error && error}