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

Port 4ee21a6c14e97a7f8ccbab22a1de5e91dae4f042 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/alert/index.tsx           | 1 +
 .../flavours/glitch/components/alerts_controller.tsx     | 9 +++------
 .../flavours/glitch/styles/mastodon/components.scss      | 4 ++++
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/alert/index.tsx b/app/javascript/flavours/glitch/components/alert/index.tsx
index 3389c9d9fe..b28d39ded5 100644
--- a/app/javascript/flavours/glitch/components/alert/index.tsx
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/alerts_controller.tsx b/app/javascript/flavours/glitch/components/alerts_controller.tsx
index 150f3c0288..695834177a 100644
--- a/app/javascript/flavours/glitch/components/alerts_controller.tsx
+++ b/app/javascript/flavours/glitch/components/alerts_controller.tsx
@@ -11,6 +11,7 @@ import type {
 } from 'flavours/glitch/models/alert';
 import { useAppSelector, useAppDispatch } from 'flavours/glitch/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/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss
index 78c5cfd202..aa71df4a37 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/components.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss
@@ -10184,6 +10184,10 @@ noscript {
   display: flex;
   flex-direction: column;
   gap: 4px;
+
+  &:empty {
+    display: none;
+  }
 }
 
 .notification-bar {