diff --git a/CHANGELOG.md b/CHANGELOG.md index 4aac714084..55554e61d3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ and this project adheres to - ♿️(frontend) hide mobile left panel from screen readers when collapsed #2450 - ♿️(frontend) enable blocknote heading ids for toc anchors #2449 +- ♿️(frontend) focus export modal on format select #2421 ## [v5.3.0] - 2026-06-19 diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx index 6d36b97002..b504c9fc9f 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx @@ -14,7 +14,13 @@ import { DocumentProps, pdf } from '@react-pdf/renderer'; import jsonemoji from 'emoji-datasource-apple' with { type: 'json' }; import i18next from 'i18next'; import JSZip from 'jszip'; -import { cloneElement, isValidElement, useState } from 'react'; +import { + cloneElement, + isValidElement, + useEffect, + useRef, + useState, +} from 'react'; import { useTranslation } from 'react-i18next'; import { css } from 'styled-components'; @@ -59,6 +65,17 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => { ); const { untitledDocument } = useTrans(); const mediaUrl = useMediaUrl(); + const selectRef = useRef(null); + + useEffect(() => { + const frameId = requestAnimationFrame(() => { + const button = selectRef.current?.querySelector( + 'button, [role="combobox"]', + ); + button?.focus(); + }); + return () => cancelAnimationFrame(frameId); + }, []); const formatOptions = [ { label: t('PDF'), value: DocDownloadFormat.PDF }, @@ -227,7 +244,6 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => { aria-label={t('Cancel the download')} variant="secondary" fullWidth - autoFocus onClick={() => onClose()} > {t('Cancel')} @@ -282,16 +298,18 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => { 'Export your document to print or download in .docx, .odt, .pdf or .html(zip) format.', )} - + setFormat(options.target.value as DocDownloadFormat) + } + /> + {isExporting && (