[Accessibility] Navigation focus handling polish (#39358)

app/javascript/mastodon/actions/compose.js

@@ -93,7 +93,7 @@ const messages = defineMessages({
 
 export const ensureComposeIsVisible = (getState) => {
   if (!getState().getIn(['compose', 'mounted'])) {
-    browserHistory.push('/publish');
+    browserHistory.push('/publish', { focusTarget: false });
   }
 };
 
@@ -292,7 +292,10 @@ export function submitCompose(successCallback) {
         message: statusId === null ? messages.published : messages.saved,
         action: messages.open,
         dismissAfter: 10000,
-        onClick: () => browserHistory.push(`/@${response.data.account.username}/${response.data.id}`),
+        onClick: () => browserHistory.push(
+          `/@${response.data.account.username}/${response.data.id}`,
+          { focusTarget: 'detailed-status' }
+        ),
       }));
     }).catch(function (error) {
       dispatch(submitComposeFail(error));

app/javascript/mastodon/components/account_header/name.tsx

@@ -19,6 +19,7 @@ import { FollowsYouBadge } from '../badge';
 import { CopyButton } from '../copy_button';
 import { DisplayName } from '../display_name';
 import { Icon } from '../icon';
+import { NavigationFocusTarget } from '../navigation_focus_target';
 
 import { AccountBadges } from './badges';
 import classes from './styles.module.scss';
@@ -56,9 +57,9 @@ export const AccountName: FC<{ accountId: string }> = ({ accountId }) => {
   return (
     <div className={classes.nameWrapper}>
       <div className={classes.name}>
-        <h1>
+        <NavigationFocusTarget as='h1'>
           <DisplayName account={account} variant='simple' />
-        </h1>
+        </NavigationFocusTarget>
         {relationship?.followed_by && <FollowsYouBadge />}
       </div>
 

app/javascript/mastodon/features/alt_text_modal/__tests__/index-test.tsx

@@ -7,6 +7,8 @@ import { List, Map } from 'immutable';
 import { render } from '@testing-library/react';
 import { vi } from 'vitest';
 
+import { FocusTargetProvider } from '@/mastodon/components/navigation_focus_target';
+import { Router } from '@/mastodon/components/router';
 import type { RootState } from 'mastodon/store';
 import { useAppSelector } from 'mastodon/store';
 
@@ -27,9 +29,13 @@ describe('<AltTextModal />', () => {
 
   const renderComponent = () => {
     return render(
-      <IntlProvider locale='en' messages={{}}>
-        <AltTextModal mediaId={mediaId} onClose={handleClose} />
-      </IntlProvider>,
+      <Router>
+        <FocusTargetProvider>
+          <IntlProvider locale='en' messages={{}}>
+            <AltTextModal mediaId={mediaId} onClose={handleClose} />
+          </IntlProvider>
+        </FocusTargetProvider>
+      </Router>,
     );
   };
 

app/javascript/mastodon/features/alt_text_modal/index.tsx

@@ -22,6 +22,7 @@ import { changeUploadCompose } from 'mastodon/actions/compose_typed';
 import { Button } from 'mastodon/components/button';
 import { GIFV } from 'mastodon/components/gifv';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 import { Skeleton } from 'mastodon/components/skeleton';
 import { Audio } from 'mastodon/features/audio';
 import { CharacterCounter } from 'mastodon/features/compose/components/character_counter';
@@ -412,12 +413,15 @@ export const AltTextModal = forwardRef<ModalRef, Props & Partial<RestoreProps>>(
             )}
           </Button>
 
-          <span className='dialog-modal__header__title'>
+          <NavigationFocusTarget
+            as='h1'
+            className='dialog-modal__header__title'
+          >
             <FormattedMessage
               id='alt_text_modal.add_alt_text'
               defaultMessage='Add alt text'
             />
-          </span>
+          </NavigationFocusTarget>
 
           <Button secondary onClick={onClose}>
             <FormattedMessage

app/javascript/mastodon/features/annual_report/index.tsx

@@ -10,6 +10,7 @@ import classNames from 'classnames/bind';
 import { closeModal } from '@/mastodon/actions/modal';
 import { IconButton } from '@/mastodon/components/icon_button';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
+import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
 import { getReport } from '@/mastodon/reducers/slices/annual_report';
 import {
   createAppSelector,
@@ -83,7 +84,9 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
   return (
     <div className={styles.wrapper} data-color-scheme='dark'>
       <div className={styles.header}>
-        <h1>Wrapstodon {report.year}</h1>
+        <NavigationFocusTarget as='h1'>
+          Wrapstodon {report.year}
+        </NavigationFocusTarget>
         {account && <p>@{account.acct}</p>}
         {context === 'modal' && (
           <IconButton

app/javascript/mastodon/features/collection_adder/index.tsx

@@ -4,6 +4,7 @@ import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
 import type { ApiCollectionJSON } from '@/mastodon/api_types/collections';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
+import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
 import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
 import type { Account } from '@/mastodon/models/account';
 import {
@@ -114,13 +115,17 @@ export const CollectionAdder: React.FC<{
           onClick={onClose}
         />
 
-        <span className='dialog-modal__header__title' id={titleId}>
+        <NavigationFocusTarget
+          as='h1'
+          id={titleId}
+          className='dialog-modal__header__title'
+        >
           <FormattedMessage
             id='collections.add_to_collection'
             defaultMessage='Add {name} to collections'
             values={{ name: <strong>@{account?.acct}</strong> }}
           />
-        </span>
+        </NavigationFocusTarget>
       </div>
 
       <div className='dialog-modal__content'>

app/javascript/mastodon/features/custom_homepage/index.tsx

@@ -6,6 +6,7 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
 
 import { Helmet } from '@unhead/react/helmet';
 
+import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
 import { fetchServer } from 'mastodon/actions/server';
 import { ServerHeroImage } from 'mastodon/components/server_hero_image';
 import { TabLink, TabList } from 'mastodon/components/tab_list';
@@ -40,7 +41,9 @@ export const CustomHomepage: React.FC = () => {
       />
 
       <div className={classes.topSection}>
-        <h1>{server.item?.domain}</h1>
+        <NavigationFocusTarget as='h1'>
+          {server.item?.domain}
+        </NavigationFocusTarget>
         <p>{server.item?.description}</p>
       </div>
 

app/javascript/mastodon/features/filters/added_to_filter.jsx

@@ -7,6 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
 import { Button } from 'mastodon/components/button';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 import { toServerSideType } from 'mastodon/utils/filters';
 
 const mapStateToProps = (state, { filterId }) => ({
@@ -71,7 +72,9 @@ class AddedToFilter extends PureComponent {
 
     return (
       <>
-        <h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.added.title' defaultMessage='Filter added!' /></h3>
+        <NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
+          <FormattedMessage id='filter_modal.added.title' defaultMessage='Filter added!' />
+        </NavigationFocusTarget>
         <p className='report-dialog-modal__lead'>
           <FormattedMessage
             id='filter_modal.added.short_explanation'

app/javascript/mastodon/features/filters/select_filter.jsx

@@ -10,6 +10,7 @@ import fuzzysort from 'fuzzysort';
 import AddIcon from '@/material-icons/400-24px/add.svg?react';
 import { Icon }  from 'mastodon/components/icon';
 import { injectIntl } from '@/mastodon/components/intl';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 import { toServerSideType } from 'mastodon/utils/filters';
 import { loupeIcon, deleteIcon } from 'mastodon/utils/icons';
 
@@ -176,7 +177,9 @@ class SelectFilter extends PureComponent {
 
     return (
       <>
-        <h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.select_filter.title' defaultMessage='Filter this post' /></h3>
+        <NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
+          <FormattedMessage id='filter_modal.select_filter.title' defaultMessage='Filter this post' />
+        </NavigationFocusTarget>
         <p className='report-dialog-modal__lead'><FormattedMessage id='filter_modal.select_filter.subtitle' defaultMessage='Use an existing category or create a new one' /></p>
 
         <div className='emoji-mart-search'>

app/javascript/mastodon/features/list_adder/index.tsx

@@ -18,6 +18,7 @@ import type { ApiListJSON } from 'mastodon/api_types/lists';
 import { Button } from 'mastodon/components/button';
 import { Icon } from 'mastodon/components/icon';
 import { IconButton } from 'mastodon/components/icon_button';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 import { getOrderedLists } from 'mastodon/selectors/lists';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
@@ -182,13 +183,13 @@ const ListAdder: React.FC<{
           onClick={onClose}
         />
 
-        <span className='dialog-modal__header__title'>
+        <NavigationFocusTarget as='h1' className='dialog-modal__header__title'>
           <FormattedMessage
             id='lists.add_to_lists'
             defaultMessage='Add {name} to lists'
             values={{ name: <strong>@{account?.acct}</strong> }}
           />
-        </span>
+        </NavigationFocusTarget>
       </div>
 
       <div className='dialog-modal__content'>

app/javascript/mastodon/features/privacy_policy/index.tsx

@@ -4,12 +4,15 @@ import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
 import { Helmet } from '@unhead/react/helmet';
 
+import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
 import { apiGetPrivacyPolicy } from 'mastodon/api/instance';
 import type { ApiPrivacyPolicyJSON } from 'mastodon/api_types/instance';
 import { Column } from 'mastodon/components/column';
 import { FormattedDateWrapper } from 'mastodon/components/formatted_date';
 import { Skeleton } from 'mastodon/components/skeleton';
 
+import { getColumnSkipLinkId } from '../ui/components/skip_links';
+
 const messages = defineMessages({
   title: { id: 'privacy_policy.title', defaultMessage: 'Privacy Policy' },
 });
@@ -40,12 +43,12 @@ const PrivacyPolicy: React.FC<{
     >
       <div className='scrollable privacy-policy'>
         <div className='column-title'>
-          <h3>
+          <NavigationFocusTarget as='h1' id={getColumnSkipLinkId(1)}>
             <FormattedMessage
               id='privacy_policy.title'
               defaultMessage='Privacy Policy'
             />
-          </h3>
+          </NavigationFocusTarget>
           <p>
             <FormattedMessage
               id='privacy_policy.last_updated'

app/javascript/mastodon/features/report/category.jsx

@@ -3,11 +3,10 @@ import { PureComponent } from 'react';
 
 import { defineMessages, FormattedMessage } from 'react-intl';
 
-import { List as ImmutableList } from 'immutable';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
 import { Button } from 'mastodon/components/button';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 import { injectIntl } from '@/mastodon/components/intl';
 
 import Option from './components/option';
@@ -84,7 +83,9 @@ class Category extends PureComponent {
 
     return (
       <>
-        <h3 className='report-dialog-modal__title'><FormattedMessage id='report.category.title' defaultMessage="Tell us what's going on with this {type}" values={{ type: intl.formatMessage(messages[startedFrom]) }} /></h3>
+        <NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
+          <FormattedMessage id='report.category.title' defaultMessage="Tell us what's going on with this {type}" values={{ type: intl.formatMessage(messages[startedFrom]) }} />
+        </NavigationFocusTarget>
         <p className='report-dialog-modal__lead'><FormattedMessage id='report.category.subtitle' defaultMessage='Choose the best match' /></p>
 
         <div>

app/javascript/mastodon/features/report/comment.tsx

@@ -7,6 +7,7 @@ import { OrderedSet } from 'immutable';
 import { shallowEqual } from 'react-redux';
 
 import { Toggle } from '@/mastodon/components/form_fields/toggle_field';
+import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
 import { fetchAccount } from 'mastodon/actions/accounts';
 import { Button } from 'mastodon/components/button';
 import type { Status } from 'mastodon/models/status';
@@ -148,14 +149,18 @@ const Comment: React.FC<Props> = ({
 
   return (
     <>
-      <h3 className='report-dialog-modal__title' id={titleId}>
+      <NavigationFocusTarget
+        as='h1'
+        id={titleId}
+        className='report-dialog-modal__title'
+      >
         {modalTitle ?? (
           <FormattedMessage
             id='report.comment.title'
             defaultMessage='Is there anything else you think we should know?'
           />
         )}
-      </h3>
+      </NavigationFocusTarget>
 
       <textarea
         className='report-dialog-modal__textarea'

app/javascript/mastodon/features/report/rules.jsx

@@ -7,6 +7,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
 import { Button } from 'mastodon/components/button';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 
 import Option from './components/option';
 
@@ -40,7 +41,9 @@ class Rules extends PureComponent {
 
     return (
       <>
-        <h3 className='report-dialog-modal__title'><FormattedMessage id='report.rules.title' defaultMessage='Which rules are being violated?' /></h3>
+        <NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
+          <FormattedMessage id='report.rules.title' defaultMessage='Which rules are being violated?' />
+        </NavigationFocusTarget>
         <p className='report-dialog-modal__lead'><FormattedMessage id='report.rules.subtitle' defaultMessage='Select all that apply' /></p>
 
         <div>

app/javascript/mastodon/features/report/statuses.jsx

@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 import { Button } from 'mastodon/components/button';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import StatusCheckBox from 'mastodon/features/report/containers/status_check_box_container';
+import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
 
 const mapStateToProps = (state, { accountId }) => ({
   availableStatusIds: OrderedSet(state.getIn(['timelines', `account:${accountId}:with_replies`, 'items'])),
@@ -37,7 +38,9 @@ class Statuses extends PureComponent {
 
     return (
       <>
-        <h3 className='report-dialog-modal__title'><FormattedMessage id='report.statuses.title' defaultMessage='Are there any posts that back up this report?' /></h3>
+        <NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
+          <FormattedMessage id='report.statuses.title' defaultMessage='Are there any posts that back up this report?' />
+        </NavigationFocusTarget>
         <p className='report-dialog-modal__lead'><FormattedMessage id='report.statuses.subtitle' defaultMessage='Select all that apply' /></p>
 
         <div className='report-dialog-modal__statuses'>

app/javascript/mastodon/features/report/thanks.jsx

@@ -12,6 +12,7 @@ import {
   blockAccount,
 } from 'mastodon/actions/accounts';
 import { Button } from 'mastodon/components/button';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 
 const mapStateToProps = () => ({});
 
@@ -52,7 +53,9 @@ class Thanks extends PureComponent {
 
     return (
       <>
-        <h3 className='report-dialog-modal__title'>{submitted ? <FormattedMessage id='report.thanks.title_actionable' defaultMessage="Thanks for reporting, we'll look into this." /> : <FormattedMessage id='report.thanks.title' defaultMessage="Don't want to see this?" />}</h3>
+        <NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
+          {submitted ? <FormattedMessage id='report.thanks.title_actionable' defaultMessage="Thanks for reporting, we'll look into this." /> : <FormattedMessage id='report.thanks.title' defaultMessage="Don't want to see this?" />}
+        </NavigationFocusTarget>
         <p className='report-dialog-modal__lead'>{submitted ? <FormattedMessage id='report.thanks.take_action_actionable' defaultMessage='While we review this, you can take action against @{name}:' values={{ name: account.get('username') }} /> : <FormattedMessage id='report.thanks.take_action' defaultMessage='Here are your options for controlling what you see on Mastodon:' />}</p>
 
         {account.getIn(['relationship', 'following']) && (

app/javascript/mastodon/features/terms_of_service/index.tsx

@@ -11,11 +11,14 @@ import { Link, useParams } from 'react-router-dom';
 
 import { Helmet } from '@unhead/react/helmet';
 
+import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
 import { apiGetTermsOfService } from 'mastodon/api/instance';
 import type { ApiTermsOfServiceJSON } from 'mastodon/api_types/instance';
 import { Column } from 'mastodon/components/column';
 import { BundleColumnError } from 'mastodon/features/ui/components/bundle_column_error';
 
+import { getColumnSkipLinkId } from '../ui/components/skip_links';
+
 const messages = defineMessages({
   title: { id: 'terms_of_service.title', defaultMessage: 'Terms of Service' },
 });
@@ -55,12 +58,12 @@ const TermsOfService: React.FC<{
     >
       <div className='scrollable privacy-policy'>
         <div className='column-title'>
-          <h3>
+          <NavigationFocusTarget as='h1' id={getColumnSkipLinkId(1)}>
             <FormattedMessage
               id='terms_of_service.title'
               defaultMessage='Terms of Service'
             />
-          </h3>
+          </NavigationFocusTarget>
           <p className='prose'>
             {response?.effective ? (
               <FormattedMessage

app/javascript/mastodon/features/ui/components/block_modal.jsx

@@ -15,6 +15,7 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
 import { blockAccount } from 'mastodon/actions/accounts';
 import { closeModal } from 'mastodon/actions/modal';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 import { Button } from 'mastodon/components/button';
 import { Icon } from 'mastodon/components/icon';
 
@@ -46,7 +47,9 @@ export const BlockModal = ({ accountId, acct }) => {
           </div>
 
           <div>
-            <h1><FormattedMessage id='block_modal.title' defaultMessage='Block user?' /></h1>
+            <NavigationFocusTarget as='h1'>
+              <FormattedMessage id='block_modal.title' defaultMessage='Block user?' />
+            </NavigationFocusTarget>
             <p>@{acct}</p>
           </div>
         </div>

app/javascript/mastodon/features/ui/components/boost_modal.tsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import { Button } from 'mastodon/components/button';
 import { Icon } from 'mastodon/components/icon';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 import PrivacyDropdown from 'mastodon/features/compose/components/privacy_dropdown';
 import { EmbeddedStatus } from 'mastodon/features/notifications_v2/components/embedded_status';
 import type { Status, StatusVisibility } from 'mastodon/models/status';
@@ -68,7 +69,7 @@ export const BoostModal: React.FC<{
           </div>
 
           <div>
-            <h1>
+            <NavigationFocusTarget as='h1'>
               {status.get('reblogged') ? (
                 <FormattedMessage
                   id='boost_modal.undo_reblog'
@@ -80,7 +81,7 @@ export const BoostModal: React.FC<{
                   defaultMessage='Boost post?'
                 />
               )}
-            </h1>
+            </NavigationFocusTarget>
             <div>
               <FormattedMessage
                 id='boost_modal.combo'

app/javascript/mastodon/features/ui/components/dialog_modal.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 
 import { Button } from '@/mastodon/components/button';
 import { IconButton } from '@/mastodon/components/icon_button';
+import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 
 export type { BaseConfirmationModalProps as DialogModalProps } from './confirmation_modals/confirmation_modal';
@@ -47,7 +48,9 @@ export const DialogModal: FC<DialogModalProps> = ({
           onClick={onClose}
         />
 
-        <h1 className='dialog-modal__header__title'>{title}</h1>
+        <NavigationFocusTarget as='h1' className='dialog-modal__header__title'>
+          {title}
+        </NavigationFocusTarget>
       </div>
 
       <div className='dialog-modal__content'>

app/javascript/mastodon/features/ui/components/domain_block_modal.tsx

@@ -15,6 +15,7 @@ import { apiRequest } from 'mastodon/api';
 import { Button } from 'mastodon/components/button';
 import { Icon } from 'mastodon/components/icon';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 import { ShortNumber } from 'mastodon/components/short_number';
 import { useAppDispatch } from 'mastodon/store';
 
@@ -77,12 +78,12 @@ export const DomainBlockModal: React.FC<{
           </div>
 
           <div>
-            <h1>
+            <NavigationFocusTarget as='h1'>
               <FormattedMessage
                 id='domain_block_modal.title'
                 defaultMessage='Block domain?'
               />
-            </h1>
+            </NavigationFocusTarget>
             <p>{domain}</p>
           </div>
         </div>

app/javascript/mastodon/features/ui/components/embed_modal.tsx

@@ -6,6 +6,7 @@ import { showAlertForError } from 'mastodon/actions/alerts';
 import api from 'mastodon/api';
 import { Button } from 'mastodon/components/button';
 import { CopyPasteText } from 'mastodon/components/copy_paste_text';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 import { useAppDispatch } from 'mastodon/store';
 
 interface OEmbedResponse {
@@ -76,9 +77,9 @@ const EmbedModal: React.FC<{
         <Button onClick={onClose}>
           <FormattedMessage id='report.close' defaultMessage='Done' />
         </Button>
-        <span className='dialog-modal__header__title'>
+        <NavigationFocusTarget as='h1' className='dialog-modal__header__title'>
           <FormattedMessage id='status.embed' defaultMessage='Get embed code' />
-        </span>
+        </NavigationFocusTarget>
         <Button secondary onClick={onClose}>
           <FormattedMessage
             id='confirmation_modal.cancel'

app/javascript/mastodon/features/ui/components/ignore_notifications_modal.jsx

@@ -12,6 +12,7 @@ import { closeModal } from 'mastodon/actions/modal';
 import { updateNotificationsPolicy } from 'mastodon/actions/notification_policies';
 import { Button } from 'mastodon/components/button';
 import { Icon } from 'mastodon/components/icon';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 
 export const IgnoreNotificationsModal = ({ filterType }) => {
   const dispatch = useDispatch();
@@ -57,7 +58,7 @@ export const IgnoreNotificationsModal = ({ filterType }) => {
     <div className='modal-root__modal safety-action-modal'>
       <div className='safety-action-modal__top'>
         <div className='safety-action-modal__header'>
-          <h1>{title}</h1>
+          <NavigationFocusTarget as='h1'>{title}</NavigationFocusTarget>
         </div>
 
         <ul className='safety-action-modal__bullet-points'>

app/javascript/mastodon/features/ui/components/mute_modal.jsx

@@ -18,6 +18,7 @@ import { closeModal } from 'mastodon/actions/modal';
 import { Button } from 'mastodon/components/button';
 import { CheckBox } from 'mastodon/components/check_box';
 import { Icon } from 'mastodon/components/icon';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 import { RadioButton } from 'mastodon/components/radio_button';
 
 const messages = defineMessages({
@@ -84,7 +85,9 @@ export const MuteModal = ({ accountId, acct }) => {
           </div>
 
           <div>
-            <h1><FormattedMessage id='mute_modal.title' defaultMessage='Mute user?' /></h1>
+            <NavigationFocusTarget as='h1'>
+              <FormattedMessage id='mute_modal.title' defaultMessage='Mute user?' />
+            </NavigationFocusTarget>
             <p>@{acct}</p>
           </div>
         </div>

app/javascript/mastodon/features/ui/components/report_collection_modal.tsx

@@ -9,6 +9,7 @@ import { fetchServer } from 'mastodon/actions/server';
 import type { ApiCollectionJSON } from 'mastodon/api_types/collections';
 import { Button } from 'mastodon/components/button';
 import { IconButton } from 'mastodon/components/icon_button';
+import { NavigationFocusTarget } from 'mastodon/components/navigation_focus_target';
 import { useAccount } from 'mastodon/hooks/useAccount';
 import { useAppDispatch } from 'mastodon/store';
 
@@ -23,12 +24,12 @@ const CollectionThanks: React.FC<{
 }> = ({ onClose }) => {
   return (
     <>
-      <h3 className='report-dialog-modal__title'>
+      <NavigationFocusTarget as='h1' className='report-dialog-modal__title'>
         <FormattedMessage
           id='report.thanks.title_actionable'
           defaultMessage="Thanks for reporting, we'll look into this."
         />
-      </h3>
+      </NavigationFocusTarget>
 
       <div className='flex-spacer' />
 

app/javascript/mastodon/features/ui/components/visibility_modal.tsx

@@ -13,6 +13,7 @@ import { Button } from '@/mastodon/components/button';
 import { Dropdown } from '@/mastodon/components/dropdown';
 import type { SelectItem } from '@/mastodon/components/dropdown_selector';
 import { IconButton } from '@/mastodon/components/icon_button';
+import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
 import { messages as privacyMessages } from '@/mastodon/features/compose/components/privacy_dropdown';
 import { createAppSelector, useAppSelector } from '@/mastodon/store';
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
@@ -217,14 +218,15 @@ export const VisibilityModal: FC<VisibilityModalProps> = forwardRef(
             iconComponent={CloseIcon}
             onClick={onClose}
           />
-          <FormattedMessage
-            id='visibility_modal.header'
-            defaultMessage='Visibility and interaction'
+          <NavigationFocusTarget
+            as='h1'
+            className='dialog-modal__header__title'
           >
-            {(chunks) => (
-              <span className='dialog-modal__header__title'>{chunks}</span>
-            )}
-          </FormattedMessage>
+            <FormattedMessage
+              id='visibility_modal.header'
+              defaultMessage='Visibility and interaction'
+            />
+          </NavigationFocusTarget>
         </div>
         <div className='dialog-modal__content'>
           <div className='dialog-modal__content__description'>

app/javascript/styles/mastodon/components.scss

@@ -3590,6 +3590,8 @@ a.account__display-name {
   text-align: center;
   padding-bottom: 32px;
 
+  h1,
+  h2,
   h3 {
     font-size: 24px;
     line-height: 1.5;