(frontend) improve accessibility of global docs home link at top

moved aria-label and added aria-hidden for better accessibility

Signed-off-by: Cyril <c.gromoff@gmail.com>
This commit is contained in:
Cyril
2025-08-06 14:55:20 +02:00
parent afbacb0a24
commit e07f709dd4
4 changed files with 12 additions and 5 deletions

View File

@@ -15,6 +15,7 @@ and this project adheres to
- #1235
- #1255
- #1262
- #1270
## [3.5.0] - 2025-07-31

View File

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

View File

@@ -39,7 +39,11 @@ export const Header = () => {
className="--docs--header"
>
{!isDesktop && <ButtonTogglePanel />}
<StyledLink href="/" data-testid="header-logo-link">
<StyledLink
href="/"
data-testid="header-logo-link"
aria-label={t('Back to homepage')}
>
<Box
$align="center"
$gap={spacingsTokens['3xs']}
@@ -50,11 +54,11 @@ export const Header = () => {
>
<IconDocs
data-testid="header-icon-docs"
aria-label={t('Back to homepage')}
width={32}
color={colorsTokens['primary-text']}
aria-hidden="true"
/>
<Title headingLevel="h1" />
<Title headingLevel="h1" aria-hidden="true" />
</Box>
</StyledLink>
{!isDesktop ? (

View File

@@ -370,6 +370,7 @@
},
"en": {
"translation": {
"Back to homepage": "Back to Docs homepage",
"Search docs": "Search docs",
"More options": "More options",
"Pinned documents": "Pinned documents",
@@ -623,7 +624,7 @@
"Doc visibility card": "Carte de visibilité du doc",
"Docs": "Docs",
"Docs Logo": "Logo Docs",
"Back to homepage": "Retour page d'accueil",
"Back to homepage": "Retour à la page d'accueil de Docs",
"Docs is already available, log in to use it now.": "Docs est déjà disponible, connectez-vous pour lutiliser 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é.",
@@ -994,6 +995,7 @@
"Doc visibility card": "Docs zichtbaarheid kaart",
"Docs": "Docs",
"Docs Logo": "Docs logo",
"Back to homepage": "Terug naar Docs homepage",
"Docs is already available, log in to use it now.": "Docs is beschikbaar, log in om het te gebruiken.",
"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 maakt real-time samenwerking eenvoudig. Nodig medewerkers - ambtenaren of externe partners - uit met één klik om hun veranderingen live te zien, terwijl de toegangscontrole voor de gegevensbeveiliging wordt gehandhaafd.",
"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 biedt een intuïtieve schrijfervaring. De minimalistische interface geeft voorrang aan de inhoud boven de lay-out, terwijl essentiële zaken worden aangeboden: importeren van media, offline-modus en sneltoetsen voor grotere efficiëntie.",