fix(toast): ensure closed toasts do not trigger axe warnings

When a Toast's content is only defined on open, its accessible name cannot be computed and is
"empty" while closed. This causes an axe issue when more than one Toast is rendered on a page with
undefined content as their accessible name is not "unique". This fix ensures that the region is
aria-hidden while closed and aria-labelledby is only set when the Toast is opened.

src/components/toast/components.test-pw.tsx

@@ -53,6 +53,26 @@ export const ToastWhenOtherModalRenders = ({
   );
 };
 
+export const ToastWithConditionalContent = ({
+  ...props
+}: Partial<ToastProps>) => {
+  const [isOpen1, setIsOpen1] = useState(false);
+  const [isOpen2, setIsOpen2] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setIsOpen1(!isOpen1)}>Open Toast 1</Button>
+      <Button onClick={() => setIsOpen2(!isOpen2)}>Open Toast 2</Button>
+
+      <Toast open={isOpen1} {...props}>
+        {isOpen1 && "Toast 1"}
+      </Toast>
+      <Toast open={isOpen2} {...props}>
+        {isOpen2 && "Toast 2"}
+      </Toast>
+    </>
+  );
+};
+
 export const ToastAllAlign = ({ ...props }: Partial<ToastProps>) => {
   return (
     <>

src/components/toast/toast-test.stories.tsx

@@ -8,7 +8,7 @@ import Dialog from "../dialog";
 
 export default {
   title: "Toast/Test",
-  includeStories: ["Default", "Visual", "ToastWhenOtherModalRenders"],
+  excludeStories: ["TopAndBottom"],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -368,3 +368,23 @@ export const ToastWhenOtherModalRenders = () => {
     </>
   );
 };
+
+export const ToastWithConditionalContent = ({
+  ...props
+}: Partial<ToastProps>) => {
+  const [isOpen1, setIsOpen1] = useState(false);
+  const [isOpen2, setIsOpen2] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setIsOpen1(!isOpen1)}>Open Toast 1</Button>
+      <Button onClick={() => setIsOpen2(!isOpen2)}>Open Toast 2</Button>
+
+      <Toast open={isOpen1} {...props}>
+        {isOpen1 && "Toast 1"}
+      </Toast>
+      <Toast open={isOpen2} {...props}>
+        {isOpen2 && "Toast 2"}
+      </Toast>
+    </>
+  );
+};

src/components/toast/toast.component.tsx

@@ -111,6 +111,9 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
     const focusedElementBeforeOpening = useRef<HTMLElement | null>(null);
 
     const [tabIndex, setTabIndex] = useState<number | undefined>(0);
+    const ariaLabelledBy = `${!isNotice && toastIconId.current} ${
+      toastContentId.current
+    }`;
 
     let refToPass = toastRef;
     if (ref && typeof ref === "object" && "current" in ref) {
@@ -266,9 +269,8 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
           isNotice={isNotice}
           data-role="toast-wrapper"
           role="region"
-          aria-labelledby={`${!isNotice && toastIconId.current} ${
-            toastContentId.current
-          }`}
+          aria-hidden={!open}
+          aria-labelledby={open ? ariaLabelledBy : undefined}
         >
           <TransitionGroup>{renderToastContent()}</TransitionGroup>
         </ToastWrapper>

src/components/toast/toast.pw.tsx

@@ -5,6 +5,7 @@ import { ToastProps } from ".";
 import {
   ToastComponent,
   ToastWhenOtherModalRenders,
+  ToastWithConditionalContent,
   ToastAllAlign,
 } from "./components.test-pw";
 import {
@@ -320,4 +321,19 @@ test.describe("Accessibility tests for Toast component", () => {
 
     await checkAccessibility(page);
   });
+
+  test("passes accessibility checks when multiple Toasts only have content when opened", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<ToastWithConditionalContent />);
+
+    // check accessibility when both toasts are closed and have undefined content
+    await checkAccessibility(page);
+
+    await button(page).nth(0).click();
+
+    // check accessibility when first toast is open and has defined content
+    await checkAccessibility(page, toastComponent(page));
+  });
 });

src/components/toast/toast.test.tsx

@@ -345,6 +345,22 @@ test("should render with provided `data-` attributes", () => {
   expect(toast).toHaveAttribute("data-element", "toast-element");
 });
 
+test("should render with accessible name when Toast is open", () => {
+  render(<Toast open>foobar</Toast>);
+
+  const toast = screen.getByRole("region");
+
+  expect(toast).toHaveAccessibleName("Success foobar");
+});
+
+test("should not render an accessible region when Toast is closed", () => {
+  render(<Toast open={false}>foobar</Toast>);
+
+  const toast = screen.queryByRole("region");
+
+  expect(toast).not.toBeInTheDocument();
+});
+
 test("should allow custom data props to be passed to close button to be passed via `closeButtonDataProps`", () => {
   render(
     <Toast