Conversation
Febakke
requested review from
Barsnes,
eirikbacker,
mimarz and
oddvernes
as code owners
|
|
Preview deployments for this pull request: www - |
|
Suggestions: There will be a lot of mention of creating "good texts". Maybe we should have a small article about it and link to it from the components? To avoid repeating to much In the last iteration each "test" got a heading and a list. Could we manage to get it all on one line. It looks like a wall of text now. Might defeat the original point of having a list of manageable points |
Barsnes
left a comment
Barsnes
left a comment
There was a problem hiding this comment.
Eg synst generelt teksten er bra.
Einaste eg ikkje er så stor fan av er "programmatisk navn".. det kan være litt vanskelig å forstå. Kjem ikkje på noke bedre ord då, men me skulle kanskje hatt ei begrepsliste, eller liknande?
Ja, enig. Tilgjengelige navn er kanskje litt enklere. Men vet ikke om det heller blir forstått av alle. Begrepsliste burde være siste utvei tenker jeg. Vi kan be om litt tilbakemeldinger på akkurat dette, da får vi nok noen gode forslag. |
Eg forhøyrte meg med chatgpt for å få litt forslag:
|
…ir/designsystemet into Accessibility-documentation
|
«tilgjengeleg namn (namnet skjermlesar les opp)». Funker kanskje ja, eneste er at det er ikke bare for skjermleser. Men får vel frem poenget. Tester å bruke kun "tilgjengelig navn" nå på |
kan ev. bruke "navn for hjelpemiddel"? |
Co-authored-by: Marianne Røsvik <post@mrosvik.no>
|
programatisk navn => tilgjengelig navn 💯 |
|
|
||
| <Divider/> | ||
| \ | ||
| **Dekorativ `Badge` skal skjules for skjermlesere** |
There was a problem hiding this comment.
Finnes det dekorative badges? :D Dersom den ikke har innhold, vil den alltid skjules, dersom den har innhold - skal ikke det leses? 🤔
There was a problem hiding this comment.
Ja, det er et godt poeng. Jeg fjerner den fra neste versjon. Så kan vi heller legge den til om det dukker opp behov på denne.
| .ds-divider { margin-top: var(--ds-size-10); } | ||
| `}</style> | ||
|
|
||
| **Hver knapp i `ToggleGroup` skal ha et tydelig tilgjengelig navn.** |
There was a problem hiding this comment.
her der det et "tydelig tilgjengelig navn" og ikke bare "tilgjengelig navn" - tror vi skal være obs på samme ordlyd alle steder, så det ikke blir usikker hva vi legger i det.
There was a problem hiding this comment.
Helt enig! Glipp fra meg, fikser!
| <Alert data-color="info"> | ||
| Vi jobber med å forbedre dokumentasjonen for tilgjengelighet på denne komponenten. Har du spørsmål eller ser noe som bør prioriteres, ta gjerne kontakt med oss på [Github](https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml) eller [Slack](https://designsystemet.no/slack). | ||
| </Alert> | ||
|
|
||
| `ToggleGroup` har standard fokusindikator (ramme). | ||
| Vi brukar `roving tabindex` for å handtere fokusbevegelse mellom knappane. | ||
|
|
||
| ### Tastaturinteraksjon | ||
|
|
||
| - <kbd>Tab</kbd> flytter fokuset til den aktive toggle-knappen. | ||
| - <kbd>Shift</kbd>+<kbd>Tab</kbd> flytter fokuset til elementet før `ToggleGroup` i tabindex. | ||
| - <kbd>Space</kbd> velger en knapp. | ||
| - <kbd>Enter</kbd> velger en knapp. | ||
| - <kbd data-icon>↑</kbd> flytter fokuset til forrige knapp i gruppa. | ||
| - <kbd data-icon>←</kbd> flytter fokuset til forrige knapp i gruppa. | ||
| - <kbd data-icon>↓</kbd> flytter fokuset til neste knapp i gruppa. | ||
| - <kbd data-icon>→</kbd> flytter fokuset til neste knapp i gruppa. | ||
| - <kbd>Home</kbd> går til første knapp i gruppa. | ||
| - <kbd>End</kbd> går til siste knapp i gruppa. | ||
|
|
||
| ### Tastaturnavigasjon | ||
| * <kbd data-icon>←</kbd>/<kbd data-icon>→</kbd> går til forrige/neste (enkeltvalg) | ||
| * <kbd>Space</kbd> eller <kbd>Enter</kbd> aktiverer/toggler valgt element | ||
| ## Implementasjonstester | ||
| <style>{` | ||
| .ds-divider { margin-top: var(--ds-size-10); } | ||
| `}</style> | ||
|
|
||
| **Hver knapp i `ToggleGroup` skal ha et tydelig tilgjengelig navn.** | ||
|
|
||
| Hvis en knapp kun viser ikon, må navnet beskrive hva valget betyr. | ||
| Eksempel: “Listevisning” eller “Rutenettvisning”. | ||
|
|
||
| <span data-size="sm"> | ||
| (WCAG: [4.1.2 Navn, rolle, verdi](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121)) | ||
| </span> | ||
|
|
||
|
|
||
| <Divider/> | ||
| \ | ||
| **`ToggleGroup` skal ha et tilgjengelig navn som forklarer hva valgene gjelder.** | ||
|
|
||
| Dette kan være en synlig ledetekst eller et programmatisk navn (for eksempel `aria-label`). | ||
| Eksempel: “Visning”. | ||
|
|
||
| <span data-size="sm"> | ||
| (WCAG: [4.1.2 Navn, rolle, verdi](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121)) | ||
| </span> | ||
|
|
||
|
|
||
| <Divider/> | ||
| \ | ||
| **`ToggleGroup` skal brukes på en måte som gjør at innhold eller funksjonalitet ikke går tapt på små skjermer.** | ||
|
|
||
| For mange valg eller lange tekster kan føre til at komponenten bryter layouten. | ||
| Kontroller at alle valg fortsatt er synlige og brukbare ved smal viewport eller høy zoom. | ||
| Hele komponenten skal være synlig uten horisontal scrolling. | ||
| Test ved smal viewport eller høy zoom (for eksempel 320px bredde eller 400 % zoom). | ||
|
|
||
| <span data-size="sm"> | ||
| (WCAG: [1.4.10 Dynamisk tilpasning (Reflow)](https://www.uutilsynet.no/wcag-standarden/1410-dynamisk-tilpasning-reflow-niva-aa/144)) | ||
| </span> | ||
|
|
||
| <Divider/> | ||
|
|
||
| ### God praksis | ||
|
|
||
| - Hvis `ToggleGroup` bruker kun ikoner, bør det i tillegg vises `Tooltip` for å forklare handlingen visuelt. `Tooltip` erstatter ikke krav om programmatisk navn. | ||
|
|
||
|
|
There was a problem hiding this comment.
En ting som er viktig;
- en toggle group skal ikke bytte innhold, men kan endre på eksisterende innhold: f.eks du kan bytte mellom liste, kart og rutenett av samme innhold, eller filtrere i innhold, men skal du bytte mellom "Sertifikater" og "Kontaktpersoner" til et firma, så er Tabs riktig element å bruke
- siden en ToggleGroup potensielt kjører kall mot server eller tyngre operasjoner som endrer HTML-strukturen, skal togglegroup - i motsetning til input="radio" - ikke bytte valg ved piltastnavigasjon, men først når trykker enter eller mellomrom
5 participants
Summary
This is the starting point of our new accessibility documentation. We will use this PR to get feedback from our users if this is helpful and easy to understand
Resolves #4615
Tasks
.mdxfilesDiscussion
Components included in this PR
AlertAvatarBadgeToggle-groupChecks
pnpm changesetif relevant)