FFE UU status som yaml

reports.buttons.ActionButton.yml

component: buttons_ActionButton
tests:
  - ruleId: wcag-111
    status: ikke_testet
    versjon:
      ffe-buttons-react: 16.0.1
      ffe-buttons: 15.0.2
    dato: 11.05.2022
    enheter: []
    varianter: []
    fargemodus: []
    metode: []
    kommentar: ""
  - ruleId: wcag-141
    status: godkjent
    versjon:
      ffe-buttons-react: 16.0.1
      ffe-buttons: 15.0.2
    dato: 11.05.2022
    enheter: []
    varianter:
      - default
      - hover
      - loading
    fargemodus:
      - light
      - dark
    metode:
      - Observer knappen i ulike tilstander. Der farge brukes som en måte til å
        formidle noe, sjekk at informasjonen også gis på andre måter.
    kommentar: Testen godkjennes fordi vi viser musepeker på hover i tillegg til
      fargeendringen.
  - ruleId: wcag-143
    status: godkjent
    versjon:
      ffe-buttons-react: 16.0.1
      ffe-buttons: 15.0.2
    dato: 10.05.2022
    enheter: []
    varianter:
      - default
      - hover
    fargemodus:
      - light
      - dark
    metode:
      - Test bakgrunnsfargen på knappen mot fargen på teksten i knappen
        (hex-kodene). Bruk gjerne Color Contrast Analyser (TPGi).
    kommentar: Tekststørrelsen i knappene kan variere fordi den settes basert på
      brukerens nettleserinnstillinger. For å sikre at kravet er ivaretatt på
      alle ulike tekststørrelser baserer vi testene på det høyeste
      kontrastkravet (4.5:1).
  - ruleId: wcag-144
    status: godkjent
    versjon:
      ffe-buttons-react: 16.0.1
      ffe-buttons: 15.0.2
    dato: 11.05.2022
    enheter:
      - enhet: Macbook Pro
        os: MacOS Monterey 12.2.1
        nettleser: Firefox 100.0
      - enhet: Macbook Pro
        os: MacOS Big Sur 11.6.1
        nettleser: Chrome 101.0.4951.64
      - enhet: iPhone 11 Pro
        os: iOS 15.3.1
        nettleser: Safari 15
      - enhet: Samsung S20 FE
        os: Android 12
        nettleser: Edge 100.0.1185.50
    varianter: []
    fargemodus: []
    metode:
      - "I nettleser: Zoom inn til 200% eller sett text scaling til 200%. Sjekk
        at innholdet i knappen endrer størrelse og fortsatt vises riktig."
      - Inspiser koden og sett font-size på root elementet (f.eks html-tag).
        Sjekk at teksten endrer størrelse.
    kommentar: "For å skalere tekst i mobilbank-appene for iOS og Android må
      brukerne endre innstillingene for tekststørrelse i selve OS-et, i
      tilgjengelighetsinnstillingene. Testene som er gjennomført skal være
      tilstrekkelige for å teste at komponenten er satt opp riktig for å støtte
      tekstskalering, inkludert tekstskalering i iOS- og Android-appene. For at
      tekstskaleringen skal fungere iOS- og Android-appene må fontstørrelsene
      spesifiseres på en spesiell måte i appene (root-elementet må endre
      fontstørrelse basert på preferanser fra OS-et:
      https://dev.to/gualtierofr/dynamic-fonts-in-wkwebview-2c0f). I denne
      testen sjekker vi at komponenten har støtte for tekstskalering. For at
      skaleringen skal fungere må utviklerne også spesifiserer fontstørrelsene
      riktig i appene. Det går utenfor selve komponenten og designsystemet."
  - ruleId: wcag-211
    status: godkjent
    versjon:
      ffe-buttons-react: 16.0.1
      ffe-buttons: 15.0.2
    dato: 11.05.2022
    enheter: []
    varianter:
      - default
    fargemodus: []
    metode:
      - Bruk tastaturet og sjekk at du kan navigere til knappen.
      - Sjekk også at knappen fungerer når du klikker på den med enter/space.
    kommentar: Vi testet med å legge inn en console.log på knappens onClick funksjon
      som da logget til konsollen hver gang knappen ble trykket.
  - ruleId: wcag-212
    status: godkjent
    versjon:
      ffe-buttons-react: 16.0.1
      ffe-buttons: 15.0.2
    dato: 11.05.2022
    enheter:
      - enhet: Macbook Pro
        os: MacOS Monterey 12.2.1
        nettleser: Firefox 100.0
      - enhet: Macbook Pro
        os: MacOS Big Sur 11.6.1
        nettleser: Chrome 101.0.4951.64
    varianter:
      - default
      - loading
    fargemodus: []
    metode:
      - Bruk tastaturet til å navigere til komponenten.
      - Naviger deg videre til neste element på siden for å sjekke at fokuset
        ikke er «fanget» i komponenten.
    kommentar: ""
  - ruleId: wcag-247
    status: godkjent
    versjon:
      ffe-buttons-react: 16.0.1
      ffe-buttons: 15.0.2
    dato: 11.05.2022
    enheter:
      - enhet: Macbook Pro
        os: MacOS Monterey 12.2.1
        nettleser: Firefox 100.0
      - enhet: Macbook Pro
        os: MacOS Big Sur 11.6.1
        nettleser: Chrome 101.0.4951.64
    varianter:
      - default
      - loading
    fargemodus:
      - light
      - dark
    metode:
      - Bruk tastaturet til å navigere til komponenten og sjekk at
        fokusmarkeringen er synlig.
      - Finn hex-fargekoden til fokusmarkeringen og sjekk den opp mot fargekoden
        på typiske bakgrunnsfarger vi bruker i løsningene våre. Bruk gjerne
        Color Contrast Analyser (TPGi). Fargekontrasten bør være minst 3:1.
    kommentar: "Det norske lovkravet spesifiserer ingen tall på hva fargekontrasten
      må være, bare at kontrasten skal være «synlig». I våre tester har vi
      basert oss på at kontrasten skal være minimum 3:1, siden det er anbefalt
      minimumskontrast i WCAG 2.1, 1.4.11 Kontrast for ikke-tekstlig innhold
      (Nivå AA)
      https://www.uutilsynet.no/wcag-standarden/1411-kontrast-ikke-tekstlig-inn\
      hold-niva-aa/145. Testet på disse bakgrunnsfargene i light mode: #F2F2F9
      (syrin-30), #D8E9F2 (frost-30), #FDF8F5 (sand-30), #fff (hvit), #faf0e7
      (sand-70), #e0e0f0 (syrin-70). Testet på disse bakgrunnsfargene i dark
      mode: #020a0a (svart), #001032 (natt), #323232 (koksgrå)."
  - ruleId: wcag-411
    status: godkjent
    versjon:
      ffe-buttons-react: 16.0.1
      ffe-buttons: 15.0.2
    dato: 11.05.2022
    enheter: []
    varianter:
      - default
      - loading
    fargemodus: []
    metode:
      - Inspiser koden.
      - Kopier all relevant HTML-kode og lim den inn i kode-validator
        (https://validator.w3.org).
      - Sjekk at det ikke dukker opp valideringsfeil av typen «Fatal error».
    kommentar: Testet også i loading, siden loading krever ulike aria-elementer.
      Testen ga 1 advarsel (ikke type «fatal error») om bruk av aria-label. Vi
      laget GitHub-issue på dette.
  - ruleId: wcag-412
    status: godkjent
    versjon:
      ffe-buttons-react: 16.0.1
      ffe-buttons: 15.0.2
    dato: 13.05.2022
    enheter:
      - enhet: Macbook Pro
        os: MacOS Big Sur 11.6.1
        nettleser: Safari 15.0
      - enhet: Macbook Pro
        os: MacOS Big Sur 11.6.1
        nettleser: Chrome 101.0.4951.64
    varianter:
      - default
      - loading
    fargemodus: []
    metode:
      - "Default: Inspiser koden. Sjekk at teksten ligger inne i button-taggen."
      - "Loading: Inspiser koden. Sjekk at det finnes aria-label på
        spinner-ikoet. Aktiver skjermleser og naviger til loading-knappen. Test
        at aria-meldingen leses opp når knappen får fokus."
    kommentar: Brukte skjermleser av typen VoiceOver.

wcag-rules.yml

- id: wcag-1.1.1
  section: 1.1.1
  name: Ikke-tekstlig innhold (Nivå A)
  descriptionUrl: https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87
  procedureUrl: hhttps://www.uutilsynet.no/regelverk/testprosedyrar-nettstader/709#suksesskriterium_111_ikkjetekstleg_innhald
- id: wcag-1.4.1
  section: 1.4.1
  name: Bruk av farge (Nivå A)
  descriptionUrl: https://www.uutilsynet.no/wcag-standarden/141-bruk-av-farge-niva/93
  procedureUrl: https://www.uutilsynet.no/regelverk/testprosedyrar-nettstader/709#suksesskriterium_141_bruk_av_farge
- id: wcag-1.4.3
  section: 1.4.3
  name: Kontrast (minimum, Nivå AA)
  descriptionUrl: https://www.uutilsynet.no/wcag-standarden/143-kontrast-minimum-niva-aa/95
  procedureUrl: https://www.uutilsynet.no/regelverk/testprosedyrar-nettstader/709#suksesskriterium_143_kontrast
- id: wcag-1.4.4
  section: 1.4.4
  name: Endring av tekststørrelse (Nivå AA)
  descriptionUrl: https://www.uutilsynet.no/wcag-standarden/144-endring-av-tekststorrelse-niva-aa/96
  procedureUrl: https://www.uutilsynet.no/regelverk/testprosedyrar-nettstader/709#suksesskriterium_144_endring_av_tekststrrelse
- id: wcag-2.1.1
  section: 2.1.1
  name: Tastatur (Nivå A)
  descriptionUrl: https://www.uutilsynet.no/wcag-standarden/211-tastatur-niva/98
  procedureUrl: https://www.uutilsynet.no/regelverk/testprosedyrar-nettstader/709#suksesskriterium_211_tastatur
- id: wcag-2.1.2
  section: 2.1.2
  name: Ingen tastaturfelle (Nivå A)
  descriptionUrl: https://www.uutilsynet.no/wcag-standarden/212-ingen-tastaturfelle-niva/99
  procedureUrl: https://www.uutilsynet.no/regelverk/testprosedyrar-nettstader/709#suksesskriterium_212_ingen_tastaturfelle
- id: wcag-2.4.7
  section: 2.4.7
  name: Synlig fokus (Nivå AA)
  descriptionUrl: https://www.uutilsynet.no/wcag-standarden/247-synlig-fokus-niva-aa/109
  procedureUrl: https://www.uutilsynet.no/regelverk/testprosedyrar-nettstader/709#suksesskriterium_247_synleg_fokus
- id: wcag-4.1.1
  section: 4.1.1
  name: Parsing (oppdeling, Nivå A)
  descriptionUrl: https://www.uutilsynet.no/wcag-standarden/411-parsing-oppdeling-niva/120
  procedureUrl: https://www.uutilsynet.no/regelverk/testprosedyrar-nettstader/709#suksesskriterium_411_parsing_oppdeling
- id: wcag-4.1.2
  section: 4.1.2
  name: Navn, rolle, verdi (Nivå A)
  descriptionUrl: https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121
  procedureUrl: https://www.uutilsynet.no/regelverk/testprosedyrar-nettstader/709#suksesskriterium_412_navn_rolle_verdi