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
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:
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