feat[dev]: ✨ implement A11y improvements to sd-select and sd-option

[yoezlem]

Description

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

A11y improvements for sd-select and sd-option can be found here: sd-select and sd-option Notes.

---

Comment

Problem: Building custom selects is rarely a good idea. You took care of many things, but one of the things that makes selects so complex is the variety of shortcuts and how they differ across browsers and screen readers.
Solution: Consider switching to customizable selects once they are ready.

Problem: The “Clear entry”-button is not accessible via the keyboard. That’s probably on purpose, but I don’t see why it shouldn’t be focusable.
Solution: Remove the tabindex-attribute.

Problem: Invalid fields don't semantically indicate that they're invalid.
Solution: Put aria-invalid="true" on invalid fields.

Problem: The error message in invalid fields is not connected to the respective field.
Solution: Use aria-describedby, just like you're doing it with the help text.

Problem: Tags: Removing options can be confusing. Mouse users can remove tags by clicking the icon inside the button. Keyboard users can only open the list. That's not perfect, but okay. When you use a screen reader, it gets confusing because the button's label is "Remove option x." However, the button doesn't remove the option; it opens the list. That's what happens in VoiceOver or when you use the Tab key to navigate with other screen readers. When you use the virtual cursor in NVDA, you get "button, option x", and when you move on, you get "button, remove, image, remove". You can activate both, and they'll do what you expect, Again, only when you use the virtual cursor. With the Tab key, you get "remove option x". In JAWS you get “option x remove button” either way.
Solution: Split the button and the icon and put the icon in its own button that you position above the other button.

Problem: There is no feedback for screen readers when you remove a tag.
Solution: Use a live region to confirm the deletion.

Problem: listbox/combobox roles are not supported in Talkback on Android. On top of that, the screen reader announces the combobox as “disabled” because of the readonly attribute.
Solution 1: Feature detection (if possible) with a fallback to a native select?
Solution 2: Use native selects.

Problem: Once a listbox is open, it is impossible to close it easily using a screen reader.
Solution: Allow the closing of lists by pressing Escape.

Notes

Disabled selects/options: See @sd-button. Everything I wrote there about disabling form elements applies here as well.

Best Practices

• Prefer radio buttons over selects when you only have a few options. Showing is better than hiding.

Related WCAG criteria

• https://www.w3.org/WAI/WCAG22/quickref/#status-messages
• https://www.w3.org/WAI/WCAG22/quickref/#name-role-value
• https://www.w3.org/WAI/WCAG22/quickref/#labels-or-instructions

Additional resources

• https://developer.chrome.com/blog/rfc-customizable-select?hl=de

Open Questions

• 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