medialize / ally.js

JavaScript library to help modern web applications with accessibility concerns

Home Page:http://allyjs.io/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Radio groups are not considered when maintaining tab focus

basham opened this issue · comments

I'm reviewing the Accessible Dialog Tutorial, and I've started to explore the associated JSBin. Because tabbing works differently for radio groups, I wanted to see how robust Ally.js is.

Expected behavior:

  • When tabbing into a radio group, the checked radio input is put in focus.
  • If there is no checked radio input in the group, and the user keys Tab into it, the first enabled radio is focused.
  • If there is no checked radio input in the group, and the user keys Shift+Tab into it, the last enabled radio is focused.

However, within the dialog maintained by Ally.js, every radio button is individually tabbable, regardless of how they're grouped. This should probably be investigated further. This JSBin clones the tutorial and adds radio button groups outside and inside the dialog, for comparison:

https://jsbin.com/qehewot/1/edit?html,css,js,output