✨(frontend) improve modal a11y: structure, labels, and title

added aria-label, structured text in p, and added title for better accessibility Signed-off-by: Cyril <c.gromoff@gmail.com>

Author: Ovgodd

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to
  - ♿(frontend) improve accessibility for decorative images in editor #1282
  - #1338
  - #1281
+ - #1349
 - ♻️(backend) fallback to email identifier when no name #1298
 - 🐛(backend) allow ASCII characters in user sub field #1295
 - ⚡️(frontend) improve fallback width calculation #1333

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -37,9 +37,7 @@ test.describe('Doc Export', () => {
  page.getByRole('combobox', { name: 'Template' }),
  ).toBeVisible();
  await expect(page.getByRole('combobox', { name: 'Format' })).toBeVisible();
- await expect(
- page.getByRole('button', { name: 'Close the modal' }),
- ).toBeVisible();
+ await expect(page.getByTestId('modal-cancel-button')).toBeVisible();
  await expect(page.getByTestId('modal-download-button')).toBeVisible();
  });
 

src/frontend/apps/impress/src/components/modal/AlertModal.tsx

@@ -30,15 +30,22 @@ export const AlertModal = ({
  isOpen={isOpen}
  size={ModalSize.MEDIUM}
  onClose={onClose}
+ aria-describedby="alert-modal-title"
  title={
- <Text $size="h6" $align="flex-start" $variation="1000">
+ <Text
+ $size="h6"
+ as="h1"
+ id="alert-modal-title"
+ $align="flex-start"
+ $variation="1000"
+ >
  {title}
  </Text>
  }
  rightActions={
  <>
  <Button
- aria-label={t('Close the modal')}
+ aria-label={`${t('Cancel')} - ${title}`}
  color="secondary"
  fullWidth
  onClick={() => onClose()}
@@ -55,12 +62,11 @@ export const AlertModal = ({
  </>
  }
  >
- <Box
- aria-label={t('Confirmation button')}
- className="--docs--alert-modal"
- >
+ <Box className="--docs--alert-modal">
  <Box>
- <Text $variation="600">{description}</Text>
+ <Text $variation="600" as="p">
+ {description}
+ </Text>
  </Box>
  </Box>
  </Modal>

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/ModalConfirmDownloadUnsafe.tsx

@@ -19,10 +19,11 @@ export const ModalConfirmDownloadUnsafe = ({
  isOpen
  closeOnClickOutside
  onClose={() => onClose()}
+ aria-describedby="modal-confirm-download-unsafe-title"
  rightActions={
  <>
  <Button
- aria-label={t('Close the modal')}
+ aria-label={t('Cancel the download')}
  color="secondary"
  onClick={() => onClose()}
  >
@@ -45,6 +46,8 @@ export const ModalConfirmDownloadUnsafe = ({
  size={ModalSize.SMALL}
  title={
  <Text
+ as="h1"
+ id="modal-confirm-download-unsafe-title"
  $gap="0.7rem"
  $size="h6"
  $align="flex-start"

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

@@ -133,10 +133,11 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
  closeOnClickOutside
  onClose={() => onClose()}
  hideCloseButton
+ aria-describedby="modal-export-title"
  rightActions={
  <>
  <Button
- aria-label={t('Close the modal')}
+ aria-label={t('Cancel the download')}
  color="secondary"
  fullWidth
  onClick={() => onClose()}
@@ -165,6 +166,8 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
  $width="100%"
  >
  <Text
+ as="h1"
+ id="modal-export-title"
  $size="h6"
  $variation="1000"
  $align="flex-start"
@@ -186,7 +189,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
  $gap="1rem"
  className="--docs--modal-export-content"
  >
- <Text $variation="600" $size="sm">
+ <Text $variation="600" $size="sm" as="p">
  {t('Download your document in a .docx or .pdf format.')}
  </Text>
  <Select

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx

@@ -56,18 +56,19 @@ export const ModalRemoveDoc = ({
  closeOnClickOutside
  hideCloseButton
  onClose={() => onClose()}
+ aria-describedby="modal-remove-doc-title"
  rightActions={
  <>
  <Button
- aria-label={t('Close the delete modal')}
+ aria-label={t('Cancel the deletion')}
  color="secondary"
  fullWidth
  onClick={() => onClose()}
  >
  {t('Cancel')}
  </Button>
  <Button
- aria-label={t('Confirm deletion')}
+ aria-label={t('Delete document')}
  color="danger"
  fullWidth
  onClick={() =>
@@ -90,7 +91,8 @@ export const ModalRemoveDoc = ({
  >
  <Text
  $size="h6"
- as="h6"
+ as="h1"
+ id="modal-remove-doc-title"
  $margin={{ all: '0' }}
  $align="flex-start"
  $variation="1000"
@@ -104,12 +106,9 @@ export const ModalRemoveDoc = ({
  </Box>
  }
  >
- <Box
- aria-label={t('Content modal to delete document')}
- className="--docs--modal-remove-doc"
- >
+ <Box className="--docs--modal-remove-doc">
  {!isError && (
- <Text $size="sm" $variation="600" $display="inline-block">
+ <Text $size="sm" $variation="600" $display="inline-block" as="p">
  <Trans t={t}>
  This document and <strong>any sub-documents</strong> will be
  permanently deleted. This action is irreversible.

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDebouncedCallback } from 'use-debounce';
 
-import { Box } from '@/components';
+import { Box, Text } from '@/components';
 import ButtonCloseModal from '@/components/modal/ButtonCloseModal';
 import { QuickSearch } from '@/components/quick-search';
 import { Doc, useDocUtils } from '@/docs/doc-management';
@@ -65,13 +65,17 @@ const DocSearchModalGlobal = ({
  closeOnClickOutside
  size={isDesktop ? ModalSize.LARGE : ModalSize.FULL}
  hideCloseButton
+ aria-describedby="doc-search-modal-title"
  >
  <Box
  aria-label={t('Search modal')}
  $direction="column"
  $justify="space-between"
  className="--docs--doc-search-modal"
  >
+ <Text as="h1" id="doc-search-modal-title" className="sr-only">
+ {t('Search docs')}
+ </Text>
  <Box $position="absolute" $css="top: 12px; right: 12px;">
  <ButtonCloseModal
  aria-label={t('Close the search modal')}

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx

@@ -135,12 +135,20 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
  isOpen
  closeOnClickOutside
  data-testid="doc-share-modal"
- aria-label={t('Share modal')}
+ aria-describedby="doc-share-modal-title"
  size={isDesktop ? ModalSize.LARGE : ModalSize.FULL}
  onClose={onClose}
  title={
  <Box $direction="row" $justify="space-between" $align="center">
- <Box $align="flex-start">{t('Share the document')}</Box>
+ <Text
+ as="h1"
+ id="doc-share-modal-title"
+ $align="flex-start"
+ $size="small"
+ $weight="600"
+ >
+ {t('Share the document')}
+ </Text>
  <ButtonCloseModal
  aria-label={t('Close the share modal')}
  onClick={onClose}
@@ -199,6 +207,7 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
  $textAlign="center"
  $variation="600"
  $size="sm"
+ as="p"
  >
  {t(
  'You can view this document but need additional access to see its members or modify settings.',

src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx

@@ -69,10 +69,11 @@ export const ModalConfirmationVersion = ({
  isOpen
  closeOnClickOutside
  onClose={() => onClose()}
+ aria-describedby="modal-confirmation-version-title"
  rightActions={
  <>
  <Button
- aria-label={t('Close the modal')}
+ aria-label={`${t('Cancel')} - ${t('Warning')}`}
  color="secondary"
  fullWidth
  onClick={() => onClose()}
@@ -102,20 +103,23 @@ export const ModalConfirmationVersion = ({
  }
  size={ModalSize.SMALL}
  title={
- <Text $size="h6" $align="flex-start" $variation="1000">
+ <Text
+ as="h1"
+ id="modal-confirmation-version-title"
+ $size="h6"
+ $align="flex-start"
+ $variation="1000"
+ >
  {t('Warning')}
  </Text>
  }
  >
- <Box
- aria-label={t('Modal confirmation to restore the version')}
- className="--docs--modal-confirmation-version"
- >
+ <Box className="--docs--modal-confirmation-version">
  <Box>
- <Text $variation="600">
+ <Text $variation="600" as="p">
  {t('Your current document will revert to this version.')}
  </Text>
- <Text $variation="600">
+ <Text $variation="600" as="p">
  {t('If a member is editing, his works can be lost.')}
  </Text>
  </Box>

src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx

@@ -48,6 +48,7 @@ export const ModalSelectVersion = ({
  closeOnClickOutside={true}
  size={ModalSize.EXTRA_LARGE}
  onClose={onClose}
+ aria-describedby="modal-select-version-title"
  >
  <NoPaddingStyle />
  <Box
@@ -58,6 +59,9 @@ export const ModalSelectVersion = ({
  $maxHeight="calc(100vh - 2em - 12px)"
  $overflow="hidden"
  >
+ <Text as="h1" id="modal-select-version-title" className="sr-only">
+ {t('Version history')}
+ </Text>
  <Box
  $css={css`
  display: flex;