diff --git a/README.md b/README.md index 43cfba3..75e9130 100644 --- a/README.md +++ b/README.md @@ -272,7 +272,9 @@ sidemeny. Begge komponentene får landlisten, valgt landkode og en favoritter har en stjerne (★) med skjult tekst «(favoritt)» for skjermlesere. Ved tomt utvalg vises «Ingen land i utvalget.». - **`CountryNavigation`:** «Forrige», «Land 3 av 25» og «Neste» over - kortet. + kortet. Det tilgjengelige navnet på knappene inkluderer mållandet, for + eksempel «Forrige land: Norway» og «Neste land: Sweden». Synlig tekst + er uendret. - **Oppsett:** Menyen ligger til venstre og valgt land til høyre. Under 641 px ligger menyen over kortet, og landlisten legges bak knappen «Landliste (25)», se [Responsivt design](#responsivt-design). @@ -536,7 +538,7 @@ Kontrollene ble kjørt manuelt i utviklingsserveren: - `npm run lint` og `npm run build` besto, og de endrede filene besto `prettier --check`. -- Manuell test i nettleseren gjenstår og skal gjøres før PR-en merges: +- Manuell test i nettleseren er gjennomført og besto: forrige/neste, deaktiverte knapper ved første og siste land, direktevalg (nå i sidemenyen, tidligere i select), samsvar mellom kort og navigasjon, og bruk med bare tastatur. @@ -721,8 +723,10 @@ siden av `CountryCard.tsx`), og bruker mockede API-svar og en isolert - **`src/components/CountryNavigation.test.tsx`:** Med Norway, Sweden og Denmark, og Sweden valgt, viser komponenten «Land 2 av 3». «Neste» kaller `onSelect('DNK')`, og «Forrige» kaller `onSelect('NOR')`. - «Forrige» er deaktivert ved Norway, «Neste» ved Denmark. En valgt kode - som ikke finnes i utvalget, gir ingen rendret komponent. + Tilgjengelige navn er «Forrige land: Norway» og «Neste land: Denmark», + mens synlig tekst forblir «Forrige» og «Neste». «Forrige» er deaktivert + ved Norway, «Neste» ved Denmark. En valgt kode som ikke finnes i + utvalget, gir ingen rendret komponent. - **`src/components/FavoriteButton.test.tsx`:** Klikk kaller `onToggle` én gang, og `aria-pressed` er `"true"`/`"false"` i tråd med props. En snapshot-test fanger markeringen (☆/★) i begge tilstander. diff --git a/docs/accessibility.md b/docs/accessibility.md new file mode 100644 index 0000000..62d376d --- /dev/null +++ b/docs/accessibility.md @@ -0,0 +1,60 @@ +# Tilgjengelighet + +Sjekkliste for universell utforming i appen. Native HTML brukes der det gir riktig semantikk. ARIA legges bare til når native HTML ikke er nok. + +## Tastaturnavigasjon + +- Alle interaktive elementer er vanlige ` @@ -42,6 +45,7 @@ function CountryNavigation({ className="country-navigation__button" onClick={() => next && onSelect(next.code)} disabled={!next} + aria-label={next ? `Neste land: ${next.name}` : undefined} > Neste