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

Author: Ovgodd

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

@@ -33,7 +33,7 @@ test.describe('Document search', () => {
  ).toBeVisible();
 
  await expect(
- page.getByLabel('Search modal').getByText('search'),
+ page.getByRole('heading', { name: 'Search docs' }),
  ).toBeVisible();
 
  const inputSearch = page.getByPlaceholder('Type the name of a document');
@@ -79,7 +79,7 @@ test.describe('Document search', () => {
 
  await page.keyboard.press('Control+k');
  await expect(
- page.getByLabel('Search modal').getByText('search'),
+ page.getByRole('heading', { name: 'Search docs' }),
  ).toBeVisible();
 
  await page.keyboard.press('Escape');

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

@@ -35,6 +35,7 @@ export const AlertModal = ({
  <Text
  $size="h6"
  as="h1"
+ $margin="0"
  id="alert-modal-title"
  $align="flex-start"
  $variation="1000"

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

@@ -167,6 +167,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
  >
  <Text
  as="h1"
+ $margin="0"
  id="modal-export-title"
  $size="h6"
  $variation="1000"

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

@@ -93,7 +93,7 @@ export const ModalRemoveDoc = ({
  $size="h6"
  as="h1"
  id="modal-remove-doc-title"
- $margin={{ all: '0' }}
+ $margin="0"
  $align="flex-start"
  $variation="1000"
  >

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

@@ -73,7 +73,12 @@ const DocSearchModalGlobal = ({
  $justify="space-between"
  className="--docs--doc-search-modal"
  >
- <Text as="h1" id="doc-search-modal-title" className="sr-only">
+ <Text
+ as="h1"
+ $margin="0"
+ id="doc-search-modal-title"
+ className="sr-only"
+ >
  {t('Search docs')}
  </Text>
  <Box $position="absolute" $css="top: 12px; right: 12px;">

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

@@ -105,6 +105,7 @@ export const ModalConfirmationVersion = ({
  title={
  <Text
  as="h1"
+ $margin="0"
  id="modal-confirmation-version-title"
  $size="h6"
  $align="flex-start"

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

@@ -59,7 +59,12 @@ export const ModalSelectVersion = ({
  $maxHeight="calc(100vh - 2em - 12px)"
  $overflow="hidden"
  >
- <Text as="h1" id="modal-select-version-title" className="sr-only">
+ <Text
+ as="h1"
+ $margin="0"
+ id="modal-select-version-title"
+ className="sr-only"
+ >
  {t('Version history')}
  </Text>
  <Box