✨(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

@@ -8,9 +8,12 @@ and this project adheres to
 
 ## [Unreleased]
 
-### Added 
+### Added
 
 - ✨(api) add API route to fetch document content #1206
+- ♿(frontend) improve accessibility:
+ - #1349
+ - #1271
 
 ### Changed
 
@@ -38,7 +41,6 @@ and this project adheres to
  - ♿(frontend) improve accessibility for decorative images in editor #1282
  - #1338
  - #1281
- - #1271
 - ♻️(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-editor.spec.ts

@@ -463,12 +463,14 @@ test.describe('Doc Editor', () => {
  await expect(
  page.getByRole('button', {
  name: 'Download',
+ exact: true,
  }),
  ).toBeVisible();
 
  void page
  .getByRole('button', {
  name: 'Download',
+ exact: true,
  })
  .click();
 

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

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

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

@@ -149,7 +149,7 @@ test.describe('Document grid item options', () => {
 
  await page
  .getByRole('button', {
- name: 'Confirm deletion',
+ name: 'Delete document',
  })
  .click();
 

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

@@ -100,7 +100,7 @@ test.describe('Doc Header', () => {
 
  await page
  .getByRole('button', {
- name: 'Confirm deletion',
+ name: 'Delete document',
  })
  .click();
 

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()}
  >
@@ -31,6 +32,7 @@ export const ModalConfirmDownloadUnsafe = ({
  <Button
  aria-label={t('Download')}
  color="danger"
+ data-testid="modal-download-unsafe-button"
  onClick={() => {
  if (onConfirm) {
  void onConfirm();
@@ -45,6 +47,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')}