[Toast|Dialog] Improve screen reader experience for Toasts and Toasts within Dialogs

[mrcthms]

WHY are these changes introduced?

Fixes https://github.com/Shopify/web/issues/99380

We currently have a bug in the Toast component whereby if a Toast is shown to a merchant multiple times, the screen reader will only announce the Toast for the first appearance. By also adding an aria-live="assertive" attribute inside the Toast itself, we can now ensure that Toasts get announced for every subsequent appearance on screen.

There is also a bug where if a Toast is rendered when a Modal is open on the screen, then the Toast will not get read out by the screen reader. This is due to the Dialog component within the Modal having the aria-modal attribute, which effectively instructs the browser to ignore all content that sits outside that element. This means that our aria-live region containing the Toasts is inaccessible to the screen reader.

In order to solve this, we now will inject the content of the Toast(s) into the Dialog itself, inside a designated aria-live region, so that the screen reader can announce the content of the Toasts, but because the Toast content is wrapped in a visually hidden Text component, nothing extra appears on screen.

We also extend the context provided by the Frame to include the array of currently active toastMessages, as this is needed to render the contents within the Dialog. We also now export the useFrame hook as the SettingsDialog within Shopify/web uses a custom dialog component, so we will need to replicate the solution there, which utilises the useFrame hook.

Spinstance: https://admin.web.settings-dialog-toast.marc-thomas.eu.spin.dev/store/shop1/settings/general

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Toast announcing every time

1. Navigate to https://5d559397bae39100201eedc1-oivciscfnt.chromatic.com/?path=/story/all-components-toast--default
2. Activate VoiceOver
3. Repeatedly show the Toast
4. Confirm that the Toast gets read out by VoiceOver every time it gets shown

Toast announcing inside Modal

1. Navigate to https://5d559397bae39100201eedc1-oivciscfnt.chromatic.com/?path=/story/all-components-toast--inside-modal
2. Activate VoiceOver
3. Show the toast messages
4. Confirm that the Toast messages get read out by VoiceOver each time they are shown

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[mrcthms]

/snapit

[github-actions]

🫰✨ Thanks @mrcthms! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

yarn add @shopify/polaris@0.0.0-snapshot-release-20230912103942

[mrcthms]

/snapit

[mrcthms]

/snapit

[github-actions]

🫰✨ Thanks @mrcthms! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

yarn add @shopify/polaris@0.0.0-snapshot-release-20230913100027

[mrcthms]

/snapit

[github-actions]

🫰✨ Thanks @mrcthms! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

yarn add @shopify/polaris@0.0.0-snapshot-release-20230913102018