Skip to content

Commit da963c3

Browse files
committed
♿️(frontend) add format to export download button aria-label for screen readers
Add format to export button aria-label for a11y. DRY format options.
1 parent 9991820 commit da963c3

File tree

1 file changed

+19
-10
lines changed
  • src/frontend/apps/impress/src/features/docs/doc-export/components

1 file changed

+19
-10
lines changed

src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,23 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
6060
const { untitledDocument } = useTrans();
6161
const mediaUrl = useMediaUrl();
6262

63+
const formatOptions = [
64+
{ label: t('PDF'), value: DocDownloadFormat.PDF },
65+
{ label: t('Docx'), value: DocDownloadFormat.DOCX },
66+
{ label: t('ODT'), value: DocDownloadFormat.ODT },
67+
{ label: t('HTML'), value: DocDownloadFormat.HTML },
68+
{ label: t('Print'), value: DocDownloadFormat.PRINT },
69+
];
70+
71+
const formatLabels = Object.fromEntries(
72+
formatOptions.map((opt) => [opt.value, opt.label]),
73+
) as Record<DocDownloadFormat, string>;
74+
75+
const downloadButtonAriaLabel =
76+
format === DocDownloadFormat.PRINT
77+
? t('Print')
78+
: t('Download {{format}}', { format: formatLabels[format] });
79+
6380
async function onSubmit() {
6481
if (!editor) {
6582
toast(t('The export failed'), VariantType.ERROR);
@@ -211,9 +228,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
211228
</Button>
212229
<Button
213230
data-testid="doc-export-download-button"
214-
aria-label={
215-
format === DocDownloadFormat.PRINT ? t('Print') : t('Download')
216-
}
231+
aria-label={downloadButtonAriaLabel}
217232
variant="primary"
218233
fullWidth
219234
onClick={() => void onSubmit()}
@@ -260,13 +275,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
260275
clearable={false}
261276
fullWidth
262277
label={t('Format')}
263-
options={[
264-
{ label: t('PDF'), value: DocDownloadFormat.PDF },
265-
{ label: t('Docx'), value: DocDownloadFormat.DOCX },
266-
{ label: t('ODT'), value: DocDownloadFormat.ODT },
267-
{ label: t('HTML'), value: DocDownloadFormat.HTML },
268-
{ label: t('Print'), value: DocDownloadFormat.PRINT },
269-
]}
278+
options={formatOptions}
270279
value={format}
271280
onChange={(options) =>
272281
setFormat(options.target.value as DocDownloadFormat)

0 commit comments

Comments
 (0)