Accessibility issue: Toasts aren't announced by screen readers

[matsaaj]

What's wrong?

Toast messages aren't announced by screen readers (WCAG 4.1.3 failure).

How to reproduce?

Steps to reproduce the behavior:

1. Enable VoiceOver
2. Go to https://spor.vy.no/components/toast
3. Trigger a Toast by clicking any "Show toast"-button

What did you expect to happen, and what happened instead?

Contents of the Toast should be be announced by the screen reader, instead nothing happens.

Additional info

The Toast does have role="status" and aria-atomic="true" which means it should be announced by screen readers.

I believe the bug is caused by the Toast container and contents being injected into the DOM at the same time, because if you first add the Toast to DOM and then change the contents afterwards it will be correctly announced by the screen reader.

Working example (but not a good solution to the problem):

export const BaseToast = ({ children, variant, id }: BaseToastProps) => {
  const styles = useStyleConfig("Toast", { variant });
  const [content, setContent] = useState<any>('')

  setTimeout(() => {
    setContent(children) // <-- Force contents to change after toast container has been added to DOM
  }, 0)

  return (
    <Flex sx={styles} id={id}>
      <ToastIcon variant={variant} />
      {content}
    </Flex>
  );
};

[alicemacl]

Dette er heller ikke fikset i den nye oppdateringen av Chakra. Legger til link til oppgaven vi har i Spor 12 epic