Problem with using Labels as Radiobuttons

[Hans Hillen]

I've ran into a problem when making the button component keyboard
accessible. More specifically, buttonsets that are based on radio
buttons.

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.

[Hans Hillen]

I worked around this issue by using wrapInner() to add a span element
to the label element when the button is created. Will have a ticket
available soon.

[Hans Hillen]

The patch for my button changes can be found here: If anybody would
like to provide feedback, please do.

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
order.
- 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.

Regards,

Hans

[Jörn Zaefferer]

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.

Regards
Jörn

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

[Hans Hillen]

Ah yes, not a good detail to leave out :)

Let's try again. The patch can be found here:
http://dev.jqueryui.com/attachment/ticket/5210/button_a11y_enhancements.txt

Hans

On Feb 26, 12:50 pm, Jörn Zaefferer <joern.zaeffe...@googlemail.com>
wrote:

> 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.
>
> Regards
> Jörn
>