search

navikt / aksel

NAVs designsystem og Aksel-portalen
https://aksel.nav.no
MIT License
158 stars 41 forks source link

[Innspill til komponent]: <Button> med ikoner UU #3064

Open ivoiv opened 3 months ago

ivoiv commented 3 months ago

Tilbakemelding

Det er per i dag et par ting man må ha i bakhodet når det gjelder Button med ikon. Man må huske å manuelt sette aria-hidden på selve ikonet, eller sette Title på den dersom knappen ikke har tekst.

Kunne vi hatt en måte å automatisk legge til slike props til ikonet som sendes til icon? F.eks. dersom Button har tekst, alltid sett aria-hidden på SVG-ikonet.

Når man ikke har children/tekst og kun ikon, kunne vi kanskje også satt aria-hidden, dersom man setter title på selve Button? (usikker om det er mer riktig å ha title på button eller selve ikonet i button).

Det kan i min mening gjøre det lettere å ha mer UU-vennlige og compliant sider ettersom det vil bli mer vanskelig for utviklerne å "gjøre feil", med noe så viktig som knapper.

ivoiv commented 3 months ago

Evt. bare ha alle Aksel-ikoner med aria-hidden som default, ettersom ikoner skal jo egentlig ikke være interaktive komponenter selv, men heller brukes i andre interaktive kontekster (i f.eks. knapper, lenker, osv) ?

KenAJoh commented 2 months ago

Kunne vi hatt en måte å automatisk legge til slike props til ikonet som sendes til icon? F.eks. dersom Button har tekst, alltid sett aria-hidden på SVG-ikonet.

Dette er noe vi kanskje kan vurdere å gjøre for Button og andre lignende komponenter som tar inn ikon 👍 Vi må bare være litt forsiktig med at vi ikke forværrer noen løsninger som kanskje har valgt å bruke beskrivende ikoner og tekst sammen i dag (som ikke er anbefalt).

Når man ikke har children/tekst og kun ikon, kunne vi kanskje også satt aria-hidden, dersom man setter title på selve Button? (usikker om det er mer riktig å ha title på button eller selve ikonet i button).

Vi kan i teorien gjøre dette ref forrige kommentar, men vi anbefaler å sette title på ikonet og ikke button. Sist vi sjekket dette var det litt bedre for skjermlesere, men i praksis er forskjellen minimal så 🤷

Evt. bare ha alle Aksel-ikoner med aria-hidden som default, ettersom ikoner skal jo egentlig ikke være interaktive komponenter selv, men heller brukes i andre interaktive kontekster (i f.eks. knapper, lenker, osv) ?

Vår hypotese er at dette vil gjøre løsningene våre mindre tilgjengelig, da feil bruk av ikoner ikke vil bli plukket opp av automatiserte a11y-tester eller andre manuelle tester. Eksempelvis vil f.eks Siteimprove eller ARC-toolkit ikke plukke opp feil bruk av enkeltstående ikoner hvis de har aria-hidden og man har glemt title. Vi ønsker derfor at man tar et bevisst valg hver gang man bruker et ikon, selv om det kanskje er litt tungvint til tider.