feat: disabled/readOnly styling for TextInput

[lmfaole]

ISSUES CLOSED: #4605

Legger til styling for disabled og read-only states i TextInput komponenten.

🎯 Sjekkliste

• Nye features er dokumentert (sjekk Contributing om du er usikker på hva som trengs av dokumentasjon)
• Testet responsivitet og UU (tastaturnavigasjon, skjermleser)
• pnpm build og pnpm ci:test gir ingen feil

[lmfaole]

Default:

Default hover:

Read only:

Disabled:

Disabled read only:

[fremtind-bot]

✅ Forhåndsvisning: https://jokul.fremtind.no/preview/olejorgenbakken/issue4566/
🔍 Commit: 977c6ca

Forhåndsvisningen blir tilgjengelig innen et par minutter. Den fjernes automatisk når pull requesten lukkes.

[lmfaole]

Nå er det også lagt til mulighet for å gi en grunn til at det et input felt ikke er tilgjengelig. Dette gjøres med disabledReason propen, og vil se sånn ut:

Merk at dette ikke vil være tilgjengelig for skjermlesere, med en tanke om at det blir veldig støyete. Her er jeg veldig åpen for at vi gjør det tilgjengelig for skjermlesere, så gjerne kom med deres meninger om hvordan det kan løses på en god måte 😸

[ivarni]

En interessant diskusjon er sikkert om vi burde håndtere det som en breaking change når vi endrer fra et interfjes til en type. Dersom noen ute i teamene har valgt å extende TextInputProps av en eller annen grunn så må de også endre ting hos seg.

[lmfaole]

Denne er jeg litt usikker på om jeg får gjort så mye med. Tenker du det er mer fornuftig å beholde den som et interface, eller skal vi spørre på forum?

[ivarni]

Ser nice ut for meg, usikker på om det burde presenteres på forum før det slippes?

[Murstam]

Ser bra ut. Kunne vært greit å se disse statesene på et par andre komponenter også for at sjekke at konseptet funker :)

[piofinn]

Nå er det også lagt til mulighet for å gi en grunn til at det et input felt ikke er tilgjengelig. Dette gjøres med disabledReason propen, og vil se sånn ut:

Merk at dette ikke vil være tilgjengelig for skjermlesere, med en tanke om at det blir veldig støyete. Her er jeg veldig åpen for at vi gjør det tilgjengelig for skjermlesere, så gjerne kom med deres meninger om hvordan det kan løses på en god måte 😸

Jeg ser at GitHub Primer har valgt å ikke støtte disabled på knappene sine av denne grunn (der har det dog også med fokushåndtering å gjøre), men heller bruker aria-disabled-attributten for å si til skjermlesere at de ikke skal kunne brukes. Det kunne vært en vei å gå for å sørge for at feltene gir mer informasjon?

Gjør man dette har skjermleserbrukere og de som navigerer med tastatur også mulighet til å få med seg at feltet faktisk eksisterer, som vel må være viktig dersom man velger disabled fremfor skjult felt. Den største utfordringen med å gjøre det på denne måten er at vi må lage egen logikk for å unngå uønsket interaksjon med feltet (tror jeg).

Red.: Her er et utdrag av bakgrunnen deres for hvordan de har implementert det de kaller inactive button, som jeg mener er relevant også for våre input-felter (min utheving):

An inactive button is an accessible alternative to a disabled button. They're intended to be used for buttons that are non-functional, but cannot be removed from the page.

Unlike a disabled button, an inactive button can respond to user input. For example, if a button shows a tooltip when hovered or focused, or a dialog when clicked.

[lmfaole]

Jeg ser at GitHub Primer har valgt å ikke støtte disabled på knappene sine av denne grunn (der har det dog også med fokushåndtering å gjøre), men heller bruker aria-disabled-attributten for å si til skjermlesere at de ikke skal kunne brukes. Det kunne vært en vei å gå for å sørge for at feltene gir mer informasjon?

Dette var sånn jeg hadde tenkt å løse det faktisk, av akkurat samme årsaker haha. Eneste spørsmålet da er om vi skal fjerne disabled som en mulighet, eller om vi skal gjøre den tilgjengelig, men oversette det til aria-disabled i bakkant. Noen tanker?

[lmfaole]

disabledReason heter nå tip, og kan brukes uavhengig av state på feltet. Noen team har nytte av den selv ved readonly.

• Det bør komme tydelig fram i dokumentasjonen at den frarådes ved disabled, fordi skjermlesere ikke får nytte av den. Må gjøres.

Den kan allikevel være nyttig på interne flater, og er derfor mulig fortsatt.

[lmfaole]

Lukker denne PR-en til fordel for å lage en ny med kun styling i førsteomgang