Refaktorering av radiogroup

[athid]

Beskrivning

I likhet med de flesta komponenter i Komponentkartan (och Angular i allmänhet) bör radiogroup vara deklarativa. Denna blir breaking change. vi behåller nodens namn

Följande skall vara uppfyllt:

• Skall se ut som dagens komponent.

  • Följer inte tema
  • 16x16 px innan brytgräns
  • 20x20 px efter brytgräns

• Radiogruppen har aktiv, inaktiv, vald aktiv, vald inaktiv och fokustillstånd

  • Fokus den kan hinte hoppas till med tab om den är disabled.

• En ny komponent som är Deklarativ

• Om möjligt API liknar en vanlig HTML-input (type = radio)

  • Dvs den har en radio-group [denna kan bara innehålla radiogroup-items]
  • Som sedan har följande noder radio-group-item [ingen begränsning på vad den kan innehålla]

• Den skall stödja Reactive forms fullt ut

  • (nuvarande stöder bara om du har en hel form, men inte om man bara har en single komponent)

• Följa de andra komponenternas beteende på validering

  • validering som stöds på radio-group är; obligatorisk.

• Man vill kunna sätta ett val ifrån början

• Man vill kuna ha den ovald ifrån början

• WCAG anpassad

  • Space: Markerar den fokuserade radioknappen om den inte redan är markerad.

  • Högerpil och Pil ner: Flyttar fokus till nästa radioknapp i gruppen, avmarkerar den tidigare fokuserade knappen och markerar den nyfokuserade knappen. Om fokus ligger på den sista knappen flyttas fokus och markering till den första knappen.

  • Vänsterpil och Pil upp: Flytta fokus till föregående radioknapp i gruppen, avmarkera den tidigare fokuserade knappen och markera den nyfokuserade knappen. Om fokus ligger på den första knappen flyttas fokus och markering till den sista knappen.

  • Om ingen av radioknapparna är markerade ställs in fokus på den första radioknappen i gruppen

  • Om en radioknapp är markerad ställs fokus på den markerade knappen

  • Om en radioknapp är markerad har radioelementet aria-checked satt till "true". Om den inte är markerad, har den aria-checked inställt på "false"

  • Varje radioelement är märkt med innehållet och har en synlig etikett som är refererad av aria-labelledby eller har en label som anges med aria-label

  • Radiogruppelementet har en synlig etikett refererad med aria-marked by eller har en etikett som anges med aria-label

  • Om element som ger ytterligare information om antingen radiogruppen eller varje radioknapp finns så hänvisas dessa element av radiogruppelementet eller radioelementen med den aria-describedbyproperty

  • https://github.com/Vastra-Gotalandsregionen/komponentkartan/wiki/Radiobutton

• Det finns två ignorerade tester på gamla radiogroup som använder sig utav en getmetod som blev borttagen i samband - med Angular 8, skriv med fördel dessa tester!

När denna story är byggd, kan man bygga denna: https://github.com/Vastra-Gotalandsregionen/komponentkartan/issues/449

Acceptanskriterier

Radiogroup har ett deklarativt API

Typ av ärende (kryssa i en med "x")

• [ ] Bugg
• [x] Förbättringsförslag

[maddefinlof]

Test Okej

[CrestTheFury]

Released in 9.1.0