[Accessibility] Manage focus on navigation (#39350)

app/javascript/mastodon/features/ui/components/__tests__/column-test.jsx

@@ -1,6 +1,7 @@
 import { render, fireEvent, screen } from '@/testing/rendering';
 
 import Column from '../column';
+import { FocusTargetProvider } from '@/mastodon/components/navigation_focus_target';
 
 const fakeIcon = () => <span />;
 
@@ -9,9 +10,11 @@ describe('<Column />', () => {
     it('runs the scroll animation if the column contains scrollable content', () => {
       const scrollToMock = vi.fn();
       const { container } = render(
-        <Column heading='notifications' icon='notifications' iconComponent={fakeIcon}>
-          <div className='scrollable' />
-        </Column>,
+        <FocusTargetProvider>
+          <Column heading='notifications' icon='notifications' iconComponent={fakeIcon}>
+            <div className='scrollable' />
+          </Column>
+        </FocusTargetProvider>,
       );
       container.querySelector('.scrollable').scrollTo = scrollToMock;
       fireEvent.click(screen.getByText('notifications'));
@@ -19,7 +22,11 @@ describe('<Column />', () => {
     });
 
     it('does not try to scroll if there is no scrollable content', () => {
-      render(<Column heading='notifications' icon='notifications' iconComponent={fakeIcon} />);
+      render(
+        <FocusTargetProvider>
+          <Column heading='notifications' icon='notifications' iconComponent={fakeIcon} />
+        </FocusTargetProvider>
+      );
       fireEvent.click(screen.getByText('notifications'));
     });
   });

app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
 import { Button } from 'mastodon/components/button';
 import {
   ModalShell,
@@ -67,7 +68,13 @@ export const ConfirmationModal: React.FC<
   return (
     <ModalShell onSubmit={handleClick}>
       <ModalShellBody className={className}>
-        <h1 id={titleId}>{title}</h1>
+        {noFocusButton ? (
+          <NavigationFocusTarget as='h1' id={titleId}>
+            {title}
+          </NavigationFocusTarget>
+        ) : (
+          <h1>{title}</h1>
+        )}
         {message && <p>{message}</p>}
 
         {extraContent ?? children}