The way the button widget works, is that it hides the original
radiobutton (<input type="radio" />), and then turns the label element
associated to it into a dhtml button (using CSS, JS and ARIA).
My first change was to make sure the currently selected button is
always part of the tab order, which works fine. The problem occurs
when trying to make the radio buttons respond to arrow key navigation.
For this to work, I need to call focus() on the button that is being
navigated to. This doesn't work, because from an HTML perspective the
button is still a label element, and the browser will try to redirect
the focus to form control associated with the label element (which is
hidden and can't be focused). In other words, it's not possible to
move focus to a label element through scripting, only by clicking on
it or tabbing to it.
If anybody has a solution, please let me know. The only thing I can
think of is actually creating a separate element (for example a span
inside the label) and use that for ARIA, focus and event handlers. It
adds an extra layer in the DOM, but it's the only way I can think of
to make these buttons keyboard accessible.
The patch does the following:
- Makes buttons created from checkbox and radiobuttons in button sets
part of the tab order.
- Supports radio button keyboard navigation (arrow keys to change
selection, ctrl + arrow keys to change focus without selecting, space
key to check focused, unselected radio button)
- Fixes the label focus problem mentioned above, by inserting a span
element to the label to use as widget element
- Ensures only the selected radiobutton is part of the tab order. If
no radiobutton is selected initially, the first one will be in the tab
- Sets a role of "radiogroup" to the parent element of the
radiobuttons. It is up to the developer to ensure this element is
present, and has a valid "title" or "aria-label" or "aria-labelledby"
attribute, labeling the group. It can be any element (e.g. <span
title="repeat options"/>) as long as it's a descendant of the element
being turned into a buttonset widget.
What you mentioned as "can be found here:" looks like it got cropped,
I don't see any URL or attachment.
> You received this message because you are subscribed to the Google Groups "jQuery Accessibility" group.
> To post to this group, send email to jquer...@googlegroups.com.
> To unsubscribe from this group, send email to jquery-a11y...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/jquery-a11y?hl=en.
Let's try again. The patch can be found here:
On Feb 26, 12:50 pm, Jörn Zaefferer <joern.zaeffe...@googlemail.com>
> We are in the process of releasing 1.8 final, so these changes will be
> tackled once we start on 1.9. Anyway, what I've seen so far looks
> good, though the keyboard-handling of radio groups will require quite
> a bit of changes.
> What you mentioned as "can be found here:" looks like it got cropped,
> I don't see any URL or attachment.