search

sl-design-system / components

SL Design System
https://sanomalearning.design/
Apache License 2.0
39 stars 3 forks source link

Accessible variants of checkbox and radio-button #1471

Open marcin-siekaniec opened 3 weeks ago

marcin-siekaniec commented 3 weeks ago

Provide a general summary of the feature here

Currently checkbox and radio button, when switched to variant Valid or Invalid, they only change the color or a marker, which isn't compliant with wcag. We need another visual marker for this.

🤔 Expected Behavior?

Additional icon is present in the checkbox and radio-button component, marking that the answer was correct or incorrect.

😯 Current Behavior

Currently it's only the color of radio or checkbox change;

💁 Possible Solution

Please see the example screen

🔦 Context

This is particuarly important for tests or review of answers. The student need the information about what they selected, but also if that was a good or bad choice.

💻 Examples

image

🧢 Your Product/Team

TEAS

marcin-siekaniec commented 3 weeks ago

Perhaps that could be answered in another way. Maybe these components (and probably more to come) could have something like a variant (of correctness) wrapper, that could be surrounding it? Then it would be prepared and consistent with other elements that might need this highlight (like text/ selected image and so on).

jpzwarte commented 2 weeks ago

@marcin-siekaniec Thanks for filing this issue. At the moment the SLDS does not support your specific usecase. I can see there being a (companion?) library though that "extends" the SLDS components to provide this functionality. But i'm not sure what the "official" position is on that. We will let you know when we do.

DanielleRameau commented 1 week ago

Discuss with architects what the plan is with EFC.