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} 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 ( -
+ {alerts.map((alert, idx) => ( { dismissAfter={5000 + idx * 1000} /> ))} -
+ ); }; 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 {