Weergave guidelines component verbeteren

[rianrietveld]

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

• 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: Maak richtlijnen meer zoals Jeffrey's ontwerp #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. #1723
• De tekst op de toggle "Verberg code" verdwijnt bij het inklappen. Zie:
• appearance="preferred" introduceren binnenkort, er zijn wel veel "Doen" variaties, tonen welke de voorkeur heeft.
• Kleurcontrasten van de codevoorbeelden moet worden gecheckt, niet alles voldoet. zie: Trek syntax highlighting gelijk tussen Markdown en <Canvas> #397
• 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: #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?

[hidde]

Mogelijkheid om lang attribuut op anderstalige tekst te zetten

Deze heb ik afgevinkt, want we doen dit nu al op veel plekken door spans met lang toe te voegen binnen Markdown.

[hidde]

appearance="preferred" introduceren binnenkort, er zijn wel veel "Doen" variaties, tonen welke de voorkeur heeft.

Deze uit het lijstje gehaald en opnieuw aangemaakt als #1727, zodat hier a11y-specifieke dingen overblijven.

[hidde]

#1725 is nu een eigen issue!