fix(a11y): preserve keyboard focus during confirmation transitions

job-tracker-ui/src/confirm.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import { ConfirmProvider, useConfirm } from './confirm';
 import { I18nProvider } from './i18n/I18nProvider';
 
@@ -52,3 +52,18 @@ test('uses the selected language for shared dialog defaults', async () => {
   expect(screen.getByRole('button', { name: 'Bekreft' })).toBeInTheDocument();
   window.localStorage.removeItem('uiLanguage');
 });
+
+test('finishing the opening transition preserves focus already moved inside the dialog', async () => {
+  jest.useFakeTimers();
+  try {
+    render(<ConfirmProvider><Demo /></ConfirmProvider>);
+    fireEvent.click(screen.getByRole('button', { name: /open confirm/i }));
+    expect(screen.getByRole('button', { name: 'Cancel' })).toHaveFocus();
+    const message = screen.getByRole('region', { name: 'Delete job' });
+    act(() => message.focus());
+    await act(async () => { jest.advanceTimersByTime(1000); });
+    expect(message).toHaveFocus();
+  } finally {
+    jest.useRealTimers();
+  }
+});

job-tracker-ui/src/confirm.tsx

@@ -25,7 +25,6 @@ export function ConfirmProvider({ children }: { children: React.ReactNode }) {
   const messageId = useId();
   const titleId = useId();
   const resolverRef = useRef<((value: boolean) => void) | null>(null);
-  const cancelButtonRef = useRef<HTMLButtonElement>(null);
   const [state, setState] = useState<ConfirmState>({
     open: false,
     message: "",
@@ -64,7 +63,6 @@ export function ConfirmProvider({ children }: { children: React.ReactNode }) {
       <Dialog open={state.open} onClose={() => closeWith(false)} aria-labelledby={titleId} aria-describedby={messageId} fullWidth maxWidth="xs"
         slotProps={{
           paper: { sx: { borderRadius: 3, border: 1, borderColor: "divider", backgroundImage: "none" } },
-          transition: { onEntered: () => cancelButtonRef.current?.focus() },
         }}>
         <DialogTitle id={titleId} sx={{ pb: 1, fontWeight: 800 }}>{state.title}</DialogTitle>
         <DialogContent role="region" aria-labelledby={titleId} tabIndex={0}>
@@ -76,7 +74,7 @@ export function ConfirmProvider({ children }: { children: React.ReactNode }) {
           <Typography id={messageId} sx={{ color: "text.secondary" }}>{state.message}</Typography>
         </DialogContent>
         <DialogActions sx={{ px: 3, pb: 2.5, gap: 1 }}>
-          <Button ref={cancelButtonRef} autoFocus onClick={() => closeWith(false)}>{state.cancelLabel}</Button>
+          <Button autoFocus onClick={() => closeWith(false)}>{state.cancelLabel}</Button>
           <Button color={state.destructive ? "error" : "primary"} variant="contained" onClick={() => closeWith(true)}>
             {state.confirmLabel}
           </Button>