From 4ee21a6c14e97a7f8ccbab22a1de5e91dae4f042 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Mon, 8 Jun 2026 17:12:56 +0200
Subject: [PATCH] [Accessibility] Allow alerts ("toasts") to be announced by
 assistive tech (#39335)

---
 app/javascript/mastodon/components/alert/index.tsx       | 1 +
 app/javascript/mastodon/components/alerts_controller.tsx | 9 +++------
 app/javascript/styles/mastodon/components.scss           | 4 ++++
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/javascript/mastodon/components/alert/index.tsx b/app/javascript/mastodon/components/alert/index.tsx
index 8bee99130f..3eb42ba1c6 100644
--- a/app/javascript/mastodon/components/alert/index.tsx
+++ b/app/javascript/mastodon/components/alert/index.tsx
@@ -53,6 +53,7 @@ export const Alert: React.FC<{
           className='notification-bar__action'
           onClick={onActionClick}
           type='button'
+          aria-hidden='true'
         >
           {action}
         </button>
diff --git a/app/javascript/mastodon/components/alerts_controller.tsx b/app/javascript/mastodon/components/alerts_controller.tsx
index aa97feeca5..90a222e89d 100644
--- a/app/javascript/mastodon/components/alerts_controller.tsx
+++ b/app/javascript/mastodon/components/alerts_controller.tsx
@@ -11,6 +11,7 @@ import type {
 } from 'mastodon/models/alert';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
+import { A11yLiveRegion } from './a11y_live_region';
 import { Alert } from './alert';
 
 const formatIfNeeded = (
@@ -75,12 +76,8 @@ const TimedAlert: React.FC<{
 export const AlertsController: React.FC = () => {
   const alerts = useAppSelector((state) => state.alerts);
 
-  if (alerts.length === 0) {
-    return null;
-  }
-
   return (
-    <div className='notification-list'>
+    <A11yLiveRegion className='notification-list'>
       {alerts.map((alert, idx) => (
         <TimedAlert
           key={alert.key}
@@ -88,6 +85,6 @@ export const AlertsController: React.FC = () => {
           dismissAfter={5000 + idx * 1000}
         />
       ))}
-    </div>
+    </A11yLiveRegion>
   );
 };
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 2ebe947337..cb2e6e9eb2 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -9843,6 +9843,10 @@ noscript {
   display: flex;
   flex-direction: column;
   gap: 4px;
+
+  &:empty {
+    display: none;
+  }
 }
 
 .notification-bar {