search

davidtheclark / react-aria-modal

A fully accessible React modal built according WAI-ARIA Authoring Practices
http://davidtheclark.github.io/react-aria-modal/demo/
MIT License
1.03k stars 96 forks source link

Focus trap breaks native radio form flow #66

Closed doodirock closed 6 years ago

doodirock commented 6 years ago

This is more of a focus trap issue, but it applies directly to ADA issue so I wanted to bring it up here since react-aria-modal uses forcus-trap for locking context.

Just ran into an issue using this on a project with modals that have a form with radio buttons. The standard functionality for a radio button group is that when I tab into a radio form, it will focus in on the first unselected radio button in that group. When I then press tab again, the focus should leave the radio group entirely and hit the next element (in this case a submit button).

However if the same form is within a modal with focus trap, I am then forced to focus on each individual radio button options within the radio group instead of skipping directly to the submit button on TAB.

This creates an inconsistent experience between forms and may lead to confusion for non-sighted users who rely on keyboard controls to navigate through a site.

https://www.w3.org/TR/wai-aria-practices/#radiobutton

davidtheclark commented 6 years ago

Thanks, @doodirock. Tracking upstream at https://github.com/davidtheclark/tabbable/issues/28