Add live region to page

src/components/form/Form.test.tsx

@@ -44,7 +44,7 @@ describe(Form.name, () => {
  ({ container } = render(<FormWithInputs/>));
 
  form = screen.getByRole("form");
- liveRegion = screen.getByTestId("live-region");
+ liveRegion = screen.getByTestId("form-live-region");
  });
 
  test("has no AxE violations", async () => {
@@ -83,7 +83,7 @@ describe(Form.name, () => {
  render(<FormWithInputs validator={() => nameErrorMessage}/>);
 
  form = screen.getByRole("form");
- liveRegion = screen.getByTestId("live-region");
+ liveRegion = screen.getByTestId("form-live-region");
 
  nameInput = within(form).getByRole("textbox", { name: "Name" });
  ageInput = within(form).getByRole("textbox", { name: "Age" });
@@ -132,7 +132,7 @@ describe(Form.name, () => {
  render(<FormWithInputs/>);
 
  form = screen.getByRole("form");
- liveRegion = screen.getByTestId("live-region");
+ liveRegion = screen.getByTestId("form-live-region");
 
  nameInput = within(form).getByRole("textbox", { name: "Name" });
  ageInput = within(form).getByRole("textbox", { name: "Age" });
@@ -265,4 +265,4 @@ const FormWithInputs = (props: { validator?: Validator }) => {
  </Form>
  </>
  );
-};
+};

src/components/form/Form.tsx

@@ -68,20 +68,21 @@ export const Form = ({ children, ariaLabelledBy, submitEndpoint, successMessage
  }, [postFormData, onSubmitObservable]);
 
  return (<div className={"form-container"}>
- {showSuccessMessage && <UserMessageNotification message={successMessage} clearMessage={removeResponseMessage}
- ref={responseMessage} className={"success"}/>
+ {showSuccessMessage &&
+ <UserMessageNotification message={successMessage} clearMessage={removeResponseMessage}
+ ref={responseMessage} className={"success"}/>
  }
 
  {errorMessage && <UserMessageNotification message={errorMessage} clearMessage={removeResponseMessage}
- ref={responseMessage} className={"error"}/>
+  ref={responseMessage} className={"error"}/>
  }
  <form onSubmit={onSubmit} aria-labelledby={ariaLabelledBy} className={"form"}
  data-testid={"form-component"}>
  <FormProvider onSubmit={onSubmitObservable}>
  {children}
  </FormProvider>
  <button type={"submit"} className={"form-submit"} disabled={submitting}>Submit</button>
- <div aria-live={"polite"} ref={liveRegion} data-testid={"live-region"}>
+ <div aria-live={"polite"} ref={liveRegion} data-testid={"form-live-region"}>
  {submitting && <span>Submitting...</span>}
  </div>
  </form>
@@ -99,4 +100,4 @@ function extractFormData(form: HTMLFormElement) {
  }
 
  return output;
-}
+}

src/pages/Page.test.tsx

@@ -18,6 +18,7 @@ describe(Page.name, () => {
  });
 
  describe("under normal conditions", () => {
+ let liveRegion: HTMLDivElement;
 
  beforeEach(() => {
  render(
@@ -27,6 +28,7 @@ describe(Page.name, () => {
  </Page>
  </ContextProvider>
  );
+
  });
 
  test("sets the document title", () => {
@@ -42,6 +44,12 @@ describe(Page.name, () => {
  expect(documentStateUpdated).toBe(true);
  });
  });
+
+ test("displays an empty live region on mount", () => {
+ liveRegion = screen.getByTestId("page-live-region");
+ expect(liveRegion).toHaveAttribute("aria-live", "polite");
+ expect(liveRegion.textContent).toBe("");
+ });
  });
 
  describe("under error conditions", () => {
@@ -104,4 +112,4 @@ const ContextProvider = ({ children, freshDocument }: { freshDocument: boolean }
  {children}
  </DocumentStateContext.Provider>
  );
-};
+};

src/pages/Page.tsx

@@ -28,6 +28,7 @@ export const Page = ({ title, children }: PageProps) => {
  <HeadingCheck/>
  <div className={"page-container"}>
  {children}
+ <div aria-live={"polite"} data-testid={"page-live-region"}/>
  </div>
  </>);
 };
@@ -57,4 +58,4 @@ const HeadingCheck = () => {
  return (<>
  {error && process.env.NODE_ENV !== "production" && <ErrorMessageNotification message={error}/>}
  </>);
-};
+};