fix toast a11y issues (#2595)

Author: 42tte

.changeset/stupid-moons-juggle.md

@@ -0,0 +1,5 @@
+---
+'@radix-ui/react-toast': patch
+---
+
+Fix accessibility issues: aria-hidden on focusable element & not allowed role=status on list item element

cypress/e2e/Toast.cy.ts

@@ -29,6 +29,11 @@ describe('Toast', () => {
       cy.findByText('Add toast').click();
     });
 
+    it('should have no acessibility issues', () => {
+      cy.injectAxe();
+      cy.checkA11y('[aria-label="Notifications (F8)"]');
+    });
+
     it('should reverse tab order from most recent to least', () => {
       cy.findByText('Focusable before viewport').focus();
 

cypress/support/e2e.js

@@ -16,6 +16,7 @@
 // Import commands.js using ES2015 syntax:
 import '@testing-library/cypress/add-commands';
 import 'cypress-real-events/support';
+import 'cypress-axe';
 import './commands';
 
 // Alternatively you can use CommonJS syntax:

cypress/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["es5", "dom"],
-    "types": ["cypress", "@testing-library/cypress", "cypress-real-events"]
+    "types": ["cypress", "@testing-library/cypress", "cypress-real-events", "cypress-axe"]
   },
   "include": ["**/*.ts"]
 }

package.json

@@ -43,7 +43,9 @@
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@types/react-test-renderer": "^19.0.0",
+    "axe-core": "^4.10.3",
     "cypress": "^14.0.0",
+    "cypress-axe": "1.6.0",
     "cypress-real-events": "^1.14.0",
     "esbuild": "0.24.2",
     "eslint": "^9.18.0",

packages/react/toast/src/toast.tsx

@@ -340,7 +340,6 @@ const FocusProxy = React.forwardRef<FocusProxyElement, ScopedProps<FocusProxyPro
 
     return (
       <VisuallyHidden
-        aria-hidden
         tabIndex={0}
         {...proxyProps}
         ref={forwardedRef}
@@ -555,7 +554,6 @@ const ToastImpl = React.forwardRef<ToastImplElement, ToastImplProps>(
             // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
             role="status"
             aria-live={type === 'foreground' ? 'assertive' : 'polite'}
-            aria-atomic
           >
             {announceTextContent}
           </ToastAnnounce>
@@ -572,10 +570,6 @@ const ToastImpl = React.forwardRef<ToastImplElement, ToastImplProps>(
                 })}
               >
                 <Primitive.li
-                  // Ensure toasts are announced as status list or status when focused
-                  role="status"
-                  aria-live="off"
-                  aria-atomic
                   tabIndex={0}
                   data-state={open ? 'open' : 'closed'}
                   data-swipe-direction={context.swipeDirection}