⚡️(frontend) add correct attributes to decorative and interactive icons

Add aria-hidden and aria-label to improve screen reader accessibility Signed-off-by: Cyril <c.gromoff@gmail.com>

Author: Ovgodd

CHANGELOG.md

@@ -31,7 +31,9 @@ and this project adheres to
 - ♻️(frontend) redirect to doc after duplicate #1175
 - 🔧(project) change env.d system by using local files #1200
 - ⚡️(frontend) improve tree stability #1207
-- ⚡️(frontend) improve accessibility #1232
+- ⚡️(frontend) improve accessibility
+ - #1232
+ - #1255
 - 🛂(frontend) block drag n drop when not desktop #1239
 
 ### Fixed

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

@@ -3,7 +3,7 @@ import { expect, test } from '@playwright/test';
 test.beforeEach(async ({ page }) => {
  await page.goto('/');
  await expect(
- page.locator('header').first().locator('h2').getByText('Docs'),
+ page.locator('header').first().locator('h1').getByText('Docs'),
  ).toBeVisible();
  await page.goto('unknown-page404');
 });

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

@@ -22,7 +22,7 @@ test.describe('Doc Create', () => {
  );
 
  const header = page.locator('header').first();
- await header.locator('h2').getByText('Docs').click();
+ await header.locator('h1').getByText('Docs').click();
 
  const docsGrid = page.getByTestId('docs-grid');
  await expect(docsGrid).toBeVisible();

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

@@ -429,7 +429,7 @@ test.describe('Doc Export', () => {
  await page.waitForLoadState('domcontentloaded');
 
  const header = page.locator('header').first();
- await header.locator('h2').getByText('Docs').click();
+ await header.locator('h1').getByText('Docs').click();
 
  const randomDocFrench = randomName(
  'doc-language-export-french',

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

@@ -8,9 +8,9 @@ test.describe('Doc grid dnd', () => {
  await page.goto('/');
  const header = page.locator('header').first();
  await createDoc(page, 'Draggable doc', browserName, 1);
- await header.locator('h2').getByText('Docs').click();
+ await header.locator('h1').getByText('Docs').click();
  await createDoc(page, 'Droppable doc', browserName, 1);
- await header.locator('h2').getByText('Docs').click();
+ await header.locator('h1').getByText('Docs').click();
 
  const response = await page.waitForResponse(
  (response) =>

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

@@ -12,7 +12,7 @@ test.describe('Header', () => {
 
  const header = page.locator('header').first();
 
- await expect(header.getByLabel('Docs Logo')).toBeVisible();
+ await expect(header.getByLabel('Back to homepage')).toBeVisible();
  await expect(header.locator('h2').getByText('Docs')).toHaveCSS(
  'font-family',
  /Roboto/i,

src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts

@@ -154,7 +154,7 @@ export const goToGridDoc = async (
  { nthRow = 1, title }: GoToGridDocOptions = {},
 ) => {
  const header = page.locator('header').first();
- await header.locator('h2').getByText('Docs').click();
+ await header.locator('h1').getByText('Docs').click();
 
  const docsGrid = page.getByTestId('docs-grid');
  await expect(docsGrid).toBeVisible();

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -49,11 +49,11 @@ export const Header = () => {
  $margin={{ top: 'auto' }}
  >
  <IconDocs
- aria-label={t('Docs Logo')}
+ aria-label={t('Back to homepage')}
  width={32}
  color={colorsTokens['primary-text']}
  />
- <Title />
+ <Title headingLevel="h1" />
  </Box>
  </StyledLink>
  {!isDesktop ? (

src/frontend/apps/impress/src/features/header/components/Title.tsx

@@ -3,7 +3,11 @@ import { useTranslation } from 'react-i18next';
 import { Box, Text } from '@/components/';
 import { useCunninghamTheme } from '@/cunningham';
 
-export const Title = () => {
+type TitleSemanticsProps = {
+ headingLevel?: 'h1' | 'h2' | 'h3';
+};
+
+export const Title = ({ headingLevel = 'h2' }: TitleSemanticsProps) => {
  const { t } = useTranslation();
  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
 
@@ -16,7 +20,7 @@ export const Title = () => {
  >
  <Text
  $margin="none"
- as="h2"
+ as={headingLevel}
  $color={colorsTokens['primary-text']}
  $zIndex={1}
  $size="1.375rem"

src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx

@@ -48,7 +48,7 @@ export default function HomeBanner() {
  $gap={spacingsTokens['sm']}
  >
  <IconDocs
- aria-label={t('Docs Logo')}
+ aria-label={t('Back to homepage')}
  width={64}
  color={colorsTokens['primary-text']}
  />