We willen zorgen dat de juiste forced-colors mode kleuren werken, ook als mensen een alternatieve kijk hebben op het maken van een button. Zeker omdat het er in normale kleuren dan echt uit gaat zien als een button en door onze goede voorbeelden kan werken als een button.

Dit komt bijvoorbeeld voor wanneer er een role="button" wordt gebruikt op een link (of div). De forced-colors logica moet dan weten dat hij niet de standaard kleuren voor link (a) moet gebruiken, maar de kleuren voor een button

wanneer er ook nog een nl-button--disabled classname wordt gebruikt, dan moeten we daar bovenop vertellen dat het niet meer alleen een button is, maar een disabled button at that.

In de Utrecht CSS van de Button component zit code specifiek voor deze case, omdat in forced-colors mode de boel anders niet goed werkt.

https://github.com/nl-design-system/utrecht/blob/edac79f83568b3aa46dedebff5cf802500928a6b/components/button/src/_mixin.scss#L246

Acceptatiecriteria

• Ondersteun background-color: ButtonFace;, border-color: buttonborder; en color: ButtonText;
• Ondersteun voor de html component wanneer de component met role=button disabled is border-color: GrayText; en color: GrayText;
• Ondersteun voor de css component wanneer de component een aria-disabled="true" heeft border-color: GrayText; en color: GrayText;
• de <button class="nl-button"> en daarnaast <a role="button" class="nl-button"> zien er precies hetzelfde uit in forced colors mode.
• De stories zijn opgenomen in de test-storybook