Weergave guidelines component verbeteren

[rianrietveld]

Er is een aantal problemen met de guidelines component, zie src/components/Guideline.tsx

• [x] De weergave van de CSS .nlds-guideline__badge--dont en .nlds-guideline__badge-- gaat niet goed, kleur wordt niet overnenomen. De inline CSS .utrecht-paragraph overschrijf deze. Zie: #398
• [ ] Er staat geen aria-hidden voor de SVG de icoontjes (een oplossing kan zijn de icoontjes in een span-wrapper te plaatsen en die span aria-hidden mee te geven.
• [x] De tekst op de toggle "Verberg code" verdwijnt bij het inklappen. Zie:
• [ ] De component geeft een Axe DevTools foutmeding: "Ensure elements that have scrollable content are accessible by keyboard." Geen idee waarom, want je kunt er gewoon bij.
• [ ] appearance="preferred" introduceren binnenkort, er zijn wel veel "Doen" variaties, tonen welke de voorkeur heeft.
• [x] Kleurcontrasten van de codevoorbeelden moet worden gecheckt, niet alles voldoet. zie: #397
• [x] Mogelijkheid voor uitgebreidere description, los van de title.
• [ ] Mogelijkheid om lang attribuut op anderstalige tekst te zetten

Dan nog een nice to have: Op dit moment is het onmogelijk om HTML commentaar mee te geven via <-- tekst --> Het zou fijn zijn als dat kan.

Gerelateerd: https://github.com/nl-design-system/documentatie/pull/375

[jeffreylauwers]

Even snel iets uitgewerkt. Wanneer dit ticket wordt opgepakt kan ik e.e.a. toelichten.

[hidde]

De component geeft een Axe DevTools foutmeding: "Ensure elements that have scrollable content are accessible by keyboard." Geen idee waarom, want je kunt er gewoon bij.

gaat dit over het codeblock?