react-modal icon indicating copy to clipboard operation
react-modal copied to clipboard

Semantic keyboard navigation of radio groups is broken in Safari

Open AndryGinger opened this issue 4 years ago • 0 comments

Summary:

The semantic keyboard navigation of radio groups is broken in Safari when they are inside React Modal.

Steps to reproduce:

Steps are included in the test case below.

Expected behavior:

Pressing "Tab" should move focus to a radio group and the next "Tab" should move focus to the next focusable element instead of moving focus to the next element of a radio group. Navigation between radio group elements should be available by arrow keys. More info in the example below.

Link to example of the issue:

https://codesandbox.io/s/suspicious-roentgen-9mkg4

Additional notes:

You can verify the expected behavior in Safari with any radio group outside of React Modal. Example from w3.

AndryGinger avatar May 24 '21 11:05 AndryGinger