feat[dev]: ✨ implement A11y improvements to sd-switch

[yoezlem]

Description

This task describes the Storybook implementation for the sd-switch component as part of the A11y improvements outlined in Epic #1465.

A11y improvements for sd-switch can be found here: sd-switch Notes.

---

Comment

Problem: Invalid checkboxes don't indicate that they're invalid.
Solution: Add and toggle aria-invalid="true" on the input element.

Problem: Error messages are semantically not connected to the respective input element and are only announced when the user unticks a required checkbox.
Solution: Instead of using a live region for the error message, connect it with the affected input field. Screen readers then announce the message automatically when the user focuses the checkbox.

Notes

• Disabled switches: See @sd-button. Everything I wrote there about disabling form elements applies here as well.
• Your switch looks like a switch, but semantically it's a checkbox. It has two states (on/off), although its role (checkbox) suggests that there are three states (checked/unchecked/indeterminate). If toggling the switch doesn't have an immediate effect, you can leave it as is. If toggling it executes JS immediately, consider using a button instead. For more details, read Adrian Roselli's three articles about that topic.

Best Practices

• Avoid switches. Many users have hard time understanding them.

Additional resources

• https://adrianroselli.com/2019/03/under-engineered-toggles.html
• https://adrianroselli.com/2021/10/switch-role-support.html
• https://adrianroselli.com/2019/08/under-engineered-toggles-too.html

Open Questions towards design

• Question1
• Question2

DoR

• Item has been estimated by the team
• Item dependencies have been identified and documented

DoD

• Documentation has been created/updated (if applicable)
• Migration Guide has been created/updated (if applicable)
• Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
• Relevant stories (Features, A11y) are created/updated
• Implementation works successfully on feature branch