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 1: 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 2: Invalid fields don't semantically indicate that they're invalid.
  Solution: Put aria-invalid="true" on invalid fields.

• Problem 3: 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.

Tip

In the combobox, @DanielHargesheimer already implemented a solution. We will follow the same strategy – if he didn't already handle it in his PR.
Test Daniel solution with the screenreader & improve both components if needed.

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

• Problem 5: 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.

Caution

This could be very hard to implement. At least we should investigate some time, to better judge maybe in a follow-up ticket how we proceed there. If this won't be handled in the ticket, we should a disclaimer on the docs page of sd-select which informs about and links to the issue.

• Problem 6: 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.

Tip

When we re-tested this in the pre-refinement, it worked. Please have a second look before working on this.

• Problem 7: 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.

Note

This is on purpose and therefore shouldn't be touched.

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