Form Field Error Message - 🛠️ React component

[eslook]

🛠️ React component

Vaak wordt deze stap samen met de CSS component stap uitgevoerd, omdat de component anders geen stylesheet heeft.

• Maak de React component beschikbaar
• Documenteer de React component in Storybook
• Test de component met unit tests
• Laat de component reviewen
• Zet de checkpoint in het GitHub projectbord op de juiste status

Maak de React component beschikbaar

Er zijn al in een eerdere bestanden aangemaakt in de Candidate repository voor de component. Controleer of hierbij ook alle React bestanden zijn klaargezet die je in deze stap nodig hebt en vul eventueel aan.

Controleer dus of er een package is in /packages/components-react/{component}-react met daarin een src/ directory. In deze directory staat de file {component}.tsx (waarbij {component} lower kebab cased is). Zijn deze er niet? Maak deze dan aan.

Maak een interface of type genaamd {Component}Props gebaseerd op de API zoals hij voor de component is bepaald. Extend hierbij voor zover mogelijk bestaande DOM elementen.

Schrijf een render method voor de component op basis van de semantiek zoals bepaald in een eerder stap.

Analyseer welke typescript attributen de component inherit. Denk bijvoorbeeld aan HTMLAttributes<HTMLSpanElement>

Gebruik wanneer nodig ook typescript regels voor gecombineerde attributen. Denk bijvoorbeeld aan

  (Omit<HTMLAttributes<HTMLSpanElement>, 'role' | 'aria-hidden' | 'aria-label' | 'aria-labelledby' | 'dir'> & {
  'aria-hidden'?: true;
  'aria-label'?: never;
  'aria-labelledby'?: never;
  role?: never;
  })

Maak een React bestand met geinjecteerde CSS beschikbaar door src/css.tsx de React component en de CSS component exporteerd. Je kunt ervoor kiezen hier op dit moment alleen de lege template file te importeren, de stijl volgt later in de stap "CSS component".

Documenteer de React component in Storybook

In de stap "📝 Stories en specs" zijn lege stories voor de component klaargezet. Zorg nu dat de component in deze stories gebruikt wordt en vul waar nodig aan.

• Zorg dat er tenminste een "Default" story beschikbaar is in /packages/storybook
• Zorg dat de Argstable met controls de API van de component documenteert
• Zorg dat alle varianten als story beschikbaar zijn in /packages/storybook en /packages/storybook-test
• Zorg dat alle states als story beschikbaar zijn in /packages/storybook-test
• Zorg dat alle testcases voor gebruik als story beschikbaar zijn in /packages/storybook-test
• Zorg dat alle testcases voor toegankelijkheid als story beschikbaar zijn in /packages/storybook-test
• Zorg dat er genoeg stories zijn om alle design token beslissingen te zien in /packages/storybook-test

Test de component met unit tests

In de stap "📝 Stories en specs" zijn lege tests voor de component klaargezet. Zorg nu dat de tests geimplementeerd worden en vul waar nodig aan.

• Zorg dat er unit tests zijn voor de alle APIs van de component
• Zorg dat er unit tests zijn voor de semantiek van de component
• Zorg dat er waar mogelijk unit tests zijn voor de testcases voor toegankelijkheid
• Zorg dat er waar mogelijk unit tests zijn voor de testcases voor gebruik

Laat de component reviewen

Nu komt alles wat we in de voorbereidingsfase hebben bedacht samen. Controleer samen met de Design System Lead of alle testcases beschikbaar zijn en de component klaar staat voor publicatie.

🚩 Checkpoint
🛠️ React component

[eslook]

Input vanuit Form Field Error Message - 📝 HTML bepaald #915:

Must Have

• De Form Field Error Message is opgemaakt met het div element.
  • Onderbouwing: in het geval van een p element zal je tegenkomen dat wanneer men p elementen (en andere non-phrasing content meegeeft als children, dat de container p automatisch word afgesloten en de content eronder in plaats van erin word geplaatst. Met de div zal dit nooit voorkomen. Let op: dit gedrag verschilt in serverside rendering versus clientside rendering. Dat is nog een reden om dit probleem te voorkomen, want dit gaat verwarring veroorzaken.
• De Form Field Error Message mag een inhoud bevatten welke bestaat in de vorm van een p element en phrasing content.
  • Bouw fase: De Form Field Error Message accepteert inhoud in de vorm van componenten en in de vorm van platte tekst, via children. In tegenstelling tot de Form Field Description, zijn interactive content hier wel toegestaan (bron).
• De Form Field Error Message bevat altijd een id, zodat het met aria-describedby aan het input-element gekoppeld kan worden.
  • Bouwfase: Deze is niet voor typescript! Dit is voor gebruik.
• Het input-element bevat een aria-invalid="true" wanneer de error zichtbaar is.

• De Form Field Error Message inhoud is alleen zichtbaar en toegankelijk wanneer er een fout is.
• Wanneer de tekst word ingevuld in realtime, is de Form Field Error Message component altijd in de DOM en in de accessibility tree.

Could Have

• Wanneer de tekst word ingevuld in realtime, maakt de Form Field Error Message gebruik van `role="alert". (bron)

  Heb een voorstel gedaan vanuit mijn accessibilitybrilletje: Form Field Error Message - 📝 Acceptatiecriteria voor accessibility #918 (comment)
  Geen aria-live="polite" maar role="alert" (geen status), maar dat moet optioneel zijn want het is niet altijd nodig.