Unable to focus on toggle options

[jmsfwk]

Describe the bug
It's not possible to use the keyboard to focus on or change a selected toggle checkbox state or toggle radio option.

To Reproduce
Steps to reproduce the behaviour eg:

1. Go to https://elements.reapit.cloud/?path=/docs/formlayout--docs
2. Click on the "Status" checkbox
3. Press Tab
4. See that focus moves to the "Long Description" text area

Expected behaviour

• I expect the focus to move to the "Active" checkbox toggle and to be able to change the value using Space.
• I expect some indication that the focus is within the toggle element.

Screenshots

Device (please complete the following information for web issues):

• Device: Mac
• OS: OS X 10.15
• Browser / Version: Firefox 125.0b9 / Edge 123.0.2420.81

Additional context

I think the inability to focus on the toggle is caused by the visibility: hidden. Bootstrap use the following declaration, which does solve the issue.

{
  position: absolute;
  clip: rect(0,0,0,0);
  pointer-events: none;
}

[willmcvay]

@jmsfwk Funnily enough I have just raised a PR that is a full sweep of accessibility on the project #89 - this includes the toggle behaviour as per above so should be in prod some time this week. Will update when the release goes out.

[willmcvay]

@jmsfwk This is now fixed and release in v4.2.0

[jmsfwk]

@willmcvay I've tested this on https://elements.reapit.cloud/?path=/docs/formlayout--docs and I don't think it matches the keyboard interactions that you expect from a checkbox or radio button group.

We also use the Elements CSS without React, which I understand you might not support.

Checkbox

On a checkbox toggle I expect that Space will change the state of the toggle (as it does on the plain checkbox).

https://www.w3.org/WAI/ARIA/apg/patterns/switch/

Radio

On a radio group I expect that I would tab into the group and then use Left / Right or Up / Down to move through the options, not Tab.

https://www.w3.org/WAI/ARIA/apg/patterns/radio/

[willmcvay]

@jmsfwk I'll re-open and take a look. Trying to avoid breaking changes at this major version so may be one we have to move into our v5 release - will see what can be done.

[willmcvay]

The core bug is fixed in the sense the react focus issues is addressed and the toggle is functional. Agree though, this behaviour is preferable and suggest we do this in v5 - I had a look and the desired functionality is hard to achieve without breaking the markup and therefore a breaking change. Will add a v5 flag.