docs: Acceptatiecriteria component Login Link (#1603)

Gerelateerd issue:
#1595

.changeset/ac-login-link.md

@@ -0,0 +1,5 @@
+---
+"@nl-design-system-unstable/nlds-design-tokens": minor
+---
+
+Acceptatiecriteria voor component Login Link.

docs/componenten/ac/_wcag-2.1.1-link.md

@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+Je kunt de link focussen met de tabtoets en activeren met de entertoets.

docs/componenten/ac/_wcag-2.5.3-link.md

@@ -0,0 +1,24 @@
+<!-- @license CC0-1.0 -->
+
+De zichtbare naam van de link is gelijk aan, of begint met de [toegankelijke naam](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name).
+
+Dit is het eenvoudigst te realiseren door een `a`-element te gebruiken met daarin tekst.
+
+Pas op met het gebruik van `aria-label` om een naam te geven aan een link. Een `aria-label` overschrijft de tekstinhoud van een link. Zodoende kan een link een toegankelijke naam krijgen die anders is dan de zichtbare naam, waardoor mensen die hulpsoftware gebruiken moeilijkheden kunnen krijgen met het bedienen van de link. Als je echt een `aria-label` nodig hebt, zorg dan dat de waarde van het `aria-label` begint met de exacte tekst die zichtbaar is in de link.
+
+Dus niet:
+
+```html
+<!-- Dit is een fout voorbeeld, niet kopiëren -->
+<a href="login-url" aria-label="Klik hier om in te loggen">Log in met DigiD</a>
+```
+
+Maar:
+
+```html
+<a href="login-url">Log in met DigiD</a>
+```
+
+NL Design System richtlijnen:
+
+- [De zichtbare naam moet overeenkomen met de toegankelijke naam](/richtlijnen/formulieren/labels/zichtbare-naam/)

docs/componenten/ac/_wcag-4.1.2-link.md

@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+De link heeft een rol van `link` en een [toegankelijke naam](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name) die duidelijk maakt waar de link voor dient.
+
+HTML-elementen hebben een impliciete rol. Maak daar gebruik van. Kies daarom een `a`-element als je een link nodig hebt:
+
+```html
+<a href="url">Contact</a>
+```
+
+Het is mogelijk om met ARIA een `role="link"` toe te voegen aan een ander element dan een `a`, maar dit is niet aan te raden. Heb je het absoluut nodig, zorg er dan voor dat het gekozen element ook voldoet aan de verwachte toetsenbordinteractie, focusstijl, etc. Let erop dat je hiervoor JavaScript nodig hebt.

docs/componenten/login-link/_wcag-1.1.1.md

@@ -0,0 +1,28 @@
+<!-- @license CC0-1.0 -->
+
+Als het label van de link alleen uit een icoon of logo bestaat, dan heeft deze afbeelding een goed tekstalternatief, zodat de link een naam heeft die duidelijk maakt waar de link voor dient.
+
+Het beste is om altijd visueel een tekst te tonen naast of onder het icoon. Iconen zijn immers niet altijd voor iedereen duidelijk. Een tekstalternatief voor de afbeelding is niet nodig als er naast de afbeelding ook tekst in de link staat die uitlegt waar de link naartoe gaat. Een `img` kan dan een leeg `alt`-attribuut krijgen (`alt=""`).
+
+Is het toch gewenst om alleen een icoon of logo te tonen, hou dan rekening met het volgende.
+
+Een `img` met een alt-attribuut is een robuuste manier om een alternatieve tekst toe te voegen. De waarde van het alt-attribuut vormt de toegankelijke naam van de link:
+
+```html
+<a href="url">
+  <img src="ideal.svg" alt="iDeal" />
+</a>
+```
+
+Maar duidelijker is:
+
+```html
+<a href="url"> Betaal met iDeal <img src="ideal.svg" alt="" /> </a>
+```
+
+Logius geeft voor het inloggen met DigiD, eHerkenning en European login "Opmaakrichtlijnen voor inlogmiddelknoppen" in de [Stijlhandleiding aansluiten Toegang](https://www.logius.nl/domeinen/toegang/stijlhandleiding-aansluiten-toegang).
+
+NL Design System richtlijnen:
+
+- [Gebruik SVG voor iconen en geen font](/richtlijnen/stijl/iconen/gebruik-svg)
+- [Toepassen van een SVG in code](/richtlijnen/stijl/iconen/gebruik-svg#toepassen-van-een-svg-in-code)

docs/componenten/login-link/_wcag-3.2.4.md

@@ -0,0 +1,7 @@
+Login Links die dezelfde functie hebben binnen een website, zien er hetzelfde uit en werken ook hetzelfde.
+
+Logius geeft voor het inloggen met DigiD, eHerkenning en European login "Opmaakrichtlijnen voor inlogmiddelknoppen" in de [Stijlhandleiding aansluiten Toegang](https://www.logius.nl/domeinen/toegang/stijlhandleiding-aansluiten-toegang).
+
+NL Design System richtlijnen:
+
+- [Respecteer conventies](/richtlijnen/stijl/iconen/respecteer-conventies)

docs/componenten/login-link/index.mdx

@@ -15,12 +15,29 @@ keywords:
 {/* @license CC0-1.0 */}
 
 import componentProgress from "@nl-design-system/component-progress/dist/index.json";
+import { CriteriaList } from "@site/src/components/ComponentCriteriaList";
 import {
   DefinitionOfDone,
   HelpImproveComponent,
   Implementations,
   Introduction,
 } from "@site/src/components/ComponentPage";
+import Wcag111 from "./_wcag-1.1.1.md"; // custom
+import Wcag143 from "/docs/componenten/ac/_wcag-1.4.3.md"; // ac
+import Wcag144 from "/docs/componenten/ac/_wcag-1.4.4.md"; // ac
+import Wcag145 from "/docs/wcag/summaries/_1.4.5-summary.md"; // summary
+import Wcag1411 from "/docs/componenten/ac/_wcag-1.4.11.md"; // ac
+import Wcag1412 from "/docs/componenten/ac/_wcag-1.4.12.md"; // ac
+import Wcag211 from "/docs/componenten/ac/_wcag-2.1.1-link.md"; // ac
+import Wcag244 from "/docs/wcag/summaries/_2.4.4-summary.md"; // summary
+import Wcag247 from "/docs/componenten/ac/_wcag-2.4.7.md"; // ac
+import Wcag2413 from "/docs/componenten/ac/_wcag-2.4.13.md"; // ac
+import Wcag252 from "/docs/componenten/ac/_wcag-2.5.2.md"; // ac
+import Wcag253 from "/docs/componenten/ac/_wcag-2.5.3-link.md"; // ac
+import Wcag255 from "/docs/componenten/ac/_wcag-2.5.5.md"; // ac
+import Wcag312 from "/docs/componenten/ac/_wcag-3.1.2.md"; // ac
+import Wcag324 from "./_wcag-3.2.4.md"; // custom
+import Wcag412 from "/docs/componenten/ac/_wcag-4.1.2-link.md"; // ac
 
 {/* Add name and description for the component */}
 export const title = "Login Link";
@@ -39,6 +56,144 @@ export const component = componentProgress.find((item) => item.number === issueN
 
 <Implementations component={component} headingLevel={3} />
 
+## Acceptatiecriteria
+
+<CriteriaList
+  headingLevel={4}
+  testCategory="Toegankelijkheid algemeen"
+  items={[
+    {
+      title: "Het label van de Login Link bestaat uit gewone tekst, niet uit een afbeelding van tekst",
+      sc: "1.4.5",
+      status: "",
+      component: <Wcag145 />,
+    },
+    {
+      title:
+        "De linktekst van de Login Link vertelt eenduidig aan de gebruiker waar de link naar toe gaat (het linkdoel).",
+      sc: "2.4.4",
+      status: "",
+      component: <Wcag244 />,
+    },
+    {
+      title: "De zichtbare naam van de Login Link komt voor in de toegankelijke naam",
+      sc: "2.5.3",
+      status: "",
+      component: <Wcag253 />,
+    },
+    {
+      title:
+        "Als de tekst van de Login Link in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode",
+      sc: "3.1.2",
+      status: "",
+      component: <Wcag312 />,
+    },
+  ]}
+/>
+
+<CriteriaList
+  headingLevel={4}
+  testCategory="Toegankelijkheid visueel ontwerp"
+  items={[
+    {
+      title: "De contrastverhouding van de tekstkleur in Login Link met de achtergrondkleur is hoog genoeg.",
+      sc: "1.4.3",
+      status: "",
+      component: <Wcag143 />,
+    },
+    {
+      title:
+        "Als het zichtbare label van de Login Link alleen een afbeelding of icoon is, dan is het contrast tussen de afbeelding en de achtergrond minimaal 3:1",
+      sc: "1.4.11",
+      status: "",
+      component: <Wcag1411 />,
+    },
+    {
+      title: "De Login Link heeft een goed zichtbare focusindicator",
+      sc: "2.4.13",
+      status: "",
+      component: <Wcag2413 />,
+    },
+    {
+      title: "De Login Link heeft een aanklikbaar gedeelte van ten minste 44 bij 44 pixels",
+      sc: "2.5.5",
+      status: "",
+      component: <Wcag255 />,
+    },
+    {
+      title: "Login Links met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label",
+      sc: "3.2.4",
+      status: "",
+      component: <Wcag324 />,
+    },
+  ]}
+/>
+
+<CriteriaList
+  headingLevel={4}
+  testCategory="Toegankelijkheid zoom en herschalen"
+  items={[
+    {
+      title: "Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar",
+      sc: "1.4.4",
+      status: "",
+      component: <Wcag144 />,
+    },
+    {
+      title: "Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar",
+      sc: "1.4.12",
+      status: "",
+      component: <Wcag1412 />,
+    },
+  ]}
+/>
+
+<CriteriaList
+  headingLevel={4}
+  testCategory="Toegankelijkheid toetsenbord"
+  items={[
+    {
+      title: "Je kunt de Login Link focussen met de tabtoets en activeren met de entertoets",
+      sc: "2.1.1",
+      status: "",
+      component: <Wcag211 />,
+    },
+    {
+      title: "Wanneer de Login Link de toetsenbordfocus krijgt is de focus zichtbaar",
+      sc: "2.4.7",
+      status: "",
+      component: <Wcag247 />,
+    },
+    {
+      title:
+        "Als de gebruiker de Login Link indrukt met een aanwijzer zoals een muis of vinger, is er de mogelijkheid is om actie te voorkomen of ongedaan te maken",
+      sc: "2.5.2",
+      status: "",
+      component: <Wcag252 />,
+    },
+  ]}
+/>
+
+<CriteriaList
+  headingLevel={4}
+  testCategory="Toegankelijkheid screenreader"
+  items={[
+    {
+      title: "Als het label van de Login Link uit een icoon bestaat, dan heeft deze een goed tekstalternatief",
+      sc: "1.1.1",
+      status: "",
+      component: <Wcag111 />,
+    },
+    {
+      title:
+        "De Login Link heeft een rol van link en een toegankelijke naam die duidelijk maakt waar de Login Link voor dient",
+      sc: "4.1.2",
+      status: "",
+      component: <Wcag412 />,
+    },
+  ]}
+/>
+
 ## Help component verbeteren
 
 <HelpImproveComponent component={component} headingLevel={3} />