♿ a11y(bal-checkbox, bal-radio): VO keyboard navigation not working as expected

[GinaBiondo-aperto]

Description of this issue

When using voice over, checkboxes and radio buttons can only be checked / unchecked with space bar but not with a combination of VO key

• spacebar.

How to fix it

Checking should work with VO+space as well.

Code Reproduction URL

https://design.baloise.dev/?path=/story/components-form-checkbox--basic&globals=framework:html

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[hirsch88]

Hi @GinaBiondo-aperto

1. What are VO Keys ? :-)
2. With space only it works
3. Event on MDN checkbox native example does not work with special key combo( like Control + Option + Space)

[carolabes]

What are VO Keys ?

It's the VoiceOver Key. VoiceOver has no separate read and form mode like other screenreader. Therefore the user needs to press a key when navigating with voiceOver. It can be capslock or control+option.

In this case, selecting with capslock+spacebar is not possible.

[mmarinkov]

What we discussed in the last meeting 20.02.2025:

• VO is not working in MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox so we raised the question if we should support it
• Carol will clarify if we have to cover VO

[carolabes]

I did some research and came to the conclusion that we should cover VO as well. There is almost no alternative for MacOS or iOS. Since we also test components on Windows and MacOS we should consider MacOS for A11Y.

In MDN there are native HTML elements and VO is covered there. Selecting with VO+spacebar works in MDN. For custom implementations we need to recreate native behavior so it is working like native HTML.

In conclusion we should cover the following setup:

1. Windows: NVDA + Chrome
2. MacOS: VoiceOver + Chrome

[hirsch88]

/cib

[github-actions]

Branch feat/issue-1622 created!