Make toast components screen reader friendly (#5930)

* add role=status and aria-live=assertive to toast announcement * role=alert not role=status for this sort of ux * changeset
keystonejs · Jun 18, 2021 · 40a44d2 · 40a44d2 · vercel · Jun 18, 2021
1 parent eab130f
commit 40a44d2
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/.changeset/seven-shoes-call.md b/.changeset/seven-shoes-call.md
@@ -0,0 +1,5 @@
+---
+'@keystone-ui/toast': patch
+---
+
+Added role="alert" to Toast container element for better screen reader experience.
diff --git a/design-system/packages/toast/src/Toast.tsx b/design-system/packages/toast/src/Toast.tsx
@@ -89,6 +89,7 @@ const ToastContainer = (props: HTMLAttributes<HTMLDivElement>) => {
   return (
     <Portal>
       <div
+        role="alert"
         css={{
           position: 'fixed',
           right: spacing.medium,