test cases maken voor HTML in Overige Objecten zodat die met KISS/ICATT gedeeld kunnen worden

[Yolijn]

We hebben uitgebreide informatie in Strapi, maar in de Overige Objecten API kunnen we alleen plain HTML stoppen.

1. Maak een overzicht van de uitgebreide componenten in Strapi (DigiD logo button, Accordion, Call to Action Button)
2. Maak per component een voorbeeld van een simpeler HTML component die in de Overige Objecten API kan en die nog iets betekend als je hem op 'naked CSS day' zou zien

• Kijk hoe dat component eruit ziet als je er utrecht-html omheen zet

3. Kijk er met collega's even naar (ter review)
4. Maak een overzicht van de type componenten in Strapi (screenshots) en hoe de HTML er dan in de Overige Objecten uit zou zijn

Gedachtenwolkjes

• test cases moeten coveren wat in Storybook HTML staat plus data- attributes, zonder JavaScript, met details/summary element
• vraag: moeten id's bewaard worden? dat is nodig voor fragment identifiers, maar ze kunnen clashen met de applicatie. Ik zou zeggen: voor de zekerheid niet ondersteunen
• name attributen moeten waarschijnlijk ook gestript worden
• zie: https://cheatsheetseries.owasp.org/cheatsheets/DOM_Clobbering_Prevention_Cheat_Sheet.html
• wij moeten documentatie hebben (of genereren 🤯) welke content security policy nodig is om de HTML te tonen. We zouden een extra endpoint kunnen maken bij de overige objecten API die gewoon een text bestand rendert met de content security policy op basis van de environment variables. Dan hoeven we niet onze documentatie in sync te houden met environment variables

Testcase ideeen:

• We strippen id's en name attributes dus we leveren HTML fragmenten aan zonder
• Het kan wel voorkomen dat een a element (link) dan verwijst naar een id op de pagina die niet meer bestaat. Dus daarvoor een case aanleveren
• We halen de prijs op voordat we hem in de Overige Objecten API steken, dus een voorbeeld met prijs
• We hebben conversies voor allemaal uitgebreide componenten zoals bijvoorbeeld een accordion. Hoe laten we die zien in HTML en hoe zien ze eruit als je er utrecht-html omheen zet? Daarvoor een case.
• Voor alle componenten waarvoor we een HTML component hebben bij Utrecht (met utrecht-html) willen we een case aanleveren om te kijken of ze met al die componenten om kunnen gaan. Zoals bijvoorbeeld:
  • Kan KISS ook een <details><summary>...</summary></details> element ondersteunen?
  • Kan KISS ook een <img> ondersteunen?