[Accessibility] Allow alerts ("toasts") to be announced by assistive tech (#39335)

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>

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>
   );
 };

app/javascript/styles/mastodon/components.scss

@@ -9843,6 +9843,10 @@ noscript {
   display: flex;
   flex-direction: column;
   gap: 4px;
+
+  &:empty {
+    display: none;
+  }
 }
 
 .notification-bar {