⚡️(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

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/left-panel/components/LeftPanelHeader.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@openfun/cunningham-react';
+import { t } from 'i18next';
 import { useRouter } from 'next/router';
 import { PropsWithChildren, useCallback, useState } from 'react';
 
@@ -54,19 +55,31 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
  <Box $direction="row" $gap="2px">
  <Button
  onClick={goToHome}
+ aria-label={t('Back to homepage')}
  size="medium"
  color="tertiary-text"
  icon={
- <Icon $variation="800" $theme="primary" iconName="house" />
+ <Icon
+ $variation="800"
+ $theme="primary"
+ iconName="house"
+ aria-hidden="true"
+ />
  }
  />
  {authenticated && (
  <Button
  onClick={openSearchModal}
  size="medium"
  color="tertiary-text"
+ aria-label={t('Search docs')}
  icon={
- <Icon $variation="800" $theme="primary" iconName="search" />
+ <Icon
+ $variation="800"
+ $theme="primary"
+ iconName="search"
+ aria-hidden="true"
+ />
  }
  />
  )}

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx

@@ -21,7 +21,7 @@ export const LeftPanelHeaderButton = () => {
  <Button
  color="primary"
  onClick={() => createDoc()}
- icon={<Icon $variation="000" iconName="add" />}
+ icon={<Icon $variation="000" iconName="add" aria-hidden="true" />}
  disabled={isDocCreating}
  >
  {t('New doc')}

src/frontend/apps/impress/src/i18n/translations.json

@@ -178,6 +178,7 @@
  "Doc visibility card": "Dokumenten-Sichtbarkeitskarte",
  "Docs": "Docs",
  "Docs Logo": "Docs-Logo",
+ "Back to homepage": "Zurück zur Startseite",
  "Docs is already available, log in to use it now.": "Docs ist bereits verfügbar. Melden Sie sich an, um es jetzt zu nutzen.",
  "Docs makes real-time collaboration simple. Invite collaborators - public officials or external partners - with one click to see their changes live, while maintaining precise access control for data security.": "Docs macht die Zusammenarbeit in Echtzeit einfach. Laden Sie Mitarbeiter — Beamte oder externe Partner — mit einem Klick ein, um ihre Änderungen live zu sehen und dabei die genaue Zugangskontrolle zwecks Datensicherheit beizubehalten.",
  "Docs offers an intuitive writing experience. Its minimalist interface favors content over layout, while offering the essentials: media import, offline mode and keyboard shortcuts for greater efficiency.": "Docs bietet ein intuitives Schreiberlebnis. Seine minimalistische Oberfläche bevorzugt Inhalte über Layout, bietet aber das Wesentliche: Medien-Import, Offline-Modus und Tastaturkürzel für mehr Effizienz.",
@@ -278,6 +279,7 @@
  "Reset": "Zurücksetzen",
  "Restore": "Wiederherstellen",
  "Search": "Suchen",
+ "Search docs": "Dokumente durchsuchen",
  "Search modal": "Suche Modal",
  "Search user result": "Suchergebnis",
  "Select a document": "Dokument auswählen",
@@ -337,6 +339,7 @@
  },
  "en": {
  "translation": {
+ "Search docs": "Search docs",
  "Share with {{count}} users_one": "Share with {{count}} user",
  "Shared with {{count}} users_many": "Shared with {{count}} users",
  "Shared with {{count}} users_one": "Shared with {{count}} user",
@@ -391,6 +394,7 @@
  "Doc visibility card": "Accesos al documento",
  "Docs": "Docs",
  "Docs Logo": "Logo de Docs",
+ "Back to homepage": "Volver a la página de inicio",
  "Docs is already available, log in to use it now.": "Docs ya está disponible, inicia sesión para empezar a usarlo.",
  "Docs makes real-time collaboration simple. Invite collaborators - public officials or external partners - with one click to see their changes live, while maintaining precise access control for data security.": "Docs simplifica la colaboración en tiempo real. Invitar colaboradores - funcionarios públicos o socios externos - con un solo clic para ver sus cambios en vivo, manteniendo un control de acceso preciso para la seguridad de los datos.",
  "Docs offers an intuitive writing experience. Its minimalist interface favors content over layout, while offering the essentials: media import, offline mode and keyboard shortcuts for greater efficiency.": "Docs ofrece una experiencia de escritura intuitiva. Su interfaz minimalista favorece el contenido sobre el diseño, mientras ofrece lo esencial: importación de medios, modo sin conexión y atajos de teclado para una mayor eficiencia.",
@@ -476,6 +480,7 @@
  "Request access": "Solicitar acceso",
  "Restore": "Recuperar",
  "Search": "Buscar",
+ "Search docs": "Buscar documentos",
  "Search modal": "Modal de búsqueda",
  "Search user result": "Resultado de la búsqueda de usuarios",
  "Select a document": "Selecciona un documento",
@@ -581,6 +586,7 @@
  "Doc visibility card": "Carte de visibilité du doc",
  "Docs": "Docs",
  "Docs Logo": "Logo Docs",
+ "Back to homepage": "Retour page d'accueil",
  "Docs is already available, log in to use it now.": "Docs est déjà disponible, connectez-vous pour l’utiliser dès maintenant.",
  "Docs makes real-time collaboration simple. Invite collaborators - public officials or external partners - with one click to see their changes live, while maintaining precise access control for data security.": "Docs simplifie la collaboration en temps réel. Invitez des collaborateurs - agents publics ou partenaires externes - d'un clic pour voir leurs modifications en direct, tout en gardant un contrôle précis des accès pour la sécurité des données.",
  "Docs offers an intuitive writing experience. Its minimalist interface favors content over layout, while offering the essentials: media import, offline mode and keyboard shortcuts for greater efficiency.": "Docs propose une expérience d'écriture intuitive. Son interface minimaliste privilégie le contenu sur la mise en page, tout en offrant l'essentiel : import de médias, mode hors-ligne et raccourcis clavier pour plus d'efficacité.",
@@ -687,6 +693,7 @@
  "Reset": "Réinitialiser",
  "Restore": "Restaurer",
  "Search": "Rechercher",
+ "Search docs": "Rechercher un document",
  "Search modal": "Modale de partage",
  "Search user result": "Résultat de la recherche utilisateur",
  "Select a document": "Sélectionnez un document",
@@ -1024,6 +1031,7 @@
  "Rephrase": "Herschrijf",
  "Restore": "Herstel",
  "Search": "Zoeken",
+ "Search docs": "Documenten zoeken",
  "Search modal": "Zoek modal",
  "Search user result": "Zoek resultaat",
  "Select a document": "Selecteer een document",