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