mi6 / mi6/ic-ui-kit

Allow Control + Option + Space to open the select menu on Safari when using a screen reader

Open
#1,451 0 comments 0 reactions 0 assignees View on GitHub
a11y select component spike
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary
Add keyboard functionality to enable the opening of the ic-select with Control + Option + Space on Safari when using a screen reader.

## 💬 Description
When carrying out screen reader testing on the multi-select, the user doing the testing tried to open the multi-select using Control + Option + Space. They were using VoiceOver and Edge, and they said that they often use this method to click on things; [it appears to be quite common / expected behaviour](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts#:~:text=Activate%20a%20link%20or%20form%20control).

However, after trying this myself after the session, I found that it did in fact work on Edge, and it also works on Chrome and Firefox (not too sure why it didn't work on Edge during the testing session!). But it does not work on Safari.

I tried Control + Option + Space on Safari with the single select as well and also found that it did not open the menu either, so it is a problem with the ic-select as a whole.

This ticket is to explore why it doesn't work. It would be worth finding out first whether it is a VoiceOver bug, or a Safari bug, or perhaps a setting that needs turning on in Safari to enable this keyboard combination to work. It may require code to be added to listen for these keys being pressed, but it should work in theory because it worked automatically on the other browsers without extra behaviour being added, so this should be the last resort.

I have done a bit of research to see if I could work this all out, but could not find very much so it would be worth taking the time to look into this in more detail. I only found a [Stack Overflow post](https://stackoverflow.com/questions/51238911/why-is-controloptionspace-not-opening-my-select-dropdown) about something similar but they were finding the opposite problem with the browsers.

**Note:** It is only expected that Control + Option + Space should open the menu when VoiceOver is turned on (it should not work when it isn't).

## 💰 Use value
This will enhance the experience for screen reader users. They can still open the select variants using just Space or Enter (which is what [W3C say is required behaviour](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/)) but it sounds like Control + Option + Space is commonly used by screen reader users so it would be good to get this working on Safari as well.

## 📝 Acceptance Criteria
*Given* that I have VoiceOver enabled and I am using Safari,
*When* I tab to a select component and press Control + Option + Space,
*Then* the dropdown menu should open.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with the single-select and multi-select in Safari with VoiceOver enabled, using Control + Option + Space after tabbing to each component. Determine whether the behavior comes from VoiceOver, Safari, or ic-select, then verify that the dropdown opens only in this context and that existing Space and Enter behavior remains unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.