Custom select menu accessibility #4039

Closed
jaspermdegroot opened this Issue Apr 14, 2012 · 4 comments

Comments

Projects
None yet
2 participants
@jaspermdegroot
Member

jaspermdegroot commented Apr 14, 2012

Custom select menus with multiple selects can't be accessed by keyboard. They can be opened but you can't select anything or close the menu.

Also, once the tab key is used while a custom menu is displayed it is not possible to get focus/access to the option list anymore.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 19, 2012

Contributor

I just tested this page on Chrome/Mac and I can use the keyboard:
http://jquerymobile.com/test/docs/forms/selects/custom.html

What browser? Guessing it's Firefox's buggy focus stuff.

Contributor

toddparker commented Apr 19, 2012

I just tested this page on Chrome/Mac and I can use the keyboard:
http://jquerymobile.com/test/docs/forms/selects/custom.html

What browser? Guessing it's Firefox's buggy focus stuff.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Apr 19, 2012

Member

I tested the two multiple select menu examples on that same page on Chrome, FF, IE on Windows. I should have mentioned that when submitting the issue, sorry. I just tested on Chrome and FF on Ubuntu... same issue.

@toddparker Could it be you missed that I was talking about multiple selects, not custom select menus in general?

The multiple select menu can be opened with enter, but arrow keys only scroll the window. The issue is that the menu (modal or dialog) does not get focus when opened. Focus is still on the button.

The issue with tab goes for all type of custom select menus (modal or dialog).
If you hit tab (by accident or because you think it can be used to walk true option list) you can't get the focus back on the option list and the up/down arrow key get their scrolling functionality. If there is a close/back button in the header you can 'tab' to it and close the menu.
Biggest problem is when the menu doesn't have a close button. In that case there is no way to close the menu anymore with keyboard after the tab key has been pressed.
The behaviour of the tab key is expected because it skips to next link and the options in the list are not links. Maybe it is possible to realize that the up/down arrow key bring back focus to the option list. In general I think it would be a good idea when the escape key gets a 'close menu' functionality.

Member

jaspermdegroot commented Apr 19, 2012

I tested the two multiple select menu examples on that same page on Chrome, FF, IE on Windows. I should have mentioned that when submitting the issue, sorry. I just tested on Chrome and FF on Ubuntu... same issue.

@toddparker Could it be you missed that I was talking about multiple selects, not custom select menus in general?

The multiple select menu can be opened with enter, but arrow keys only scroll the window. The issue is that the menu (modal or dialog) does not get focus when opened. Focus is still on the button.

The issue with tab goes for all type of custom select menus (modal or dialog).
If you hit tab (by accident or because you think it can be used to walk true option list) you can't get the focus back on the option list and the up/down arrow key get their scrolling functionality. If there is a close/back button in the header you can 'tab' to it and close the menu.
Biggest problem is when the menu doesn't have a close button. In that case there is no way to close the menu anymore with keyboard after the tab key has been pressed.
The behaviour of the tab key is expected because it skips to next link and the options in the list are not links. Maybe it is possible to realize that the up/down arrow key bring back focus to the option list. In general I think it would be a good idea when the escape key gets a 'close menu' functionality.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 8, 2012

Member

Refering to New Popup widget #3218 since that is going to replace the modal/dialog currently used for (multiple) select menus.
Closing the menu with escape will be covered. Get focus (back) on menulist is something that needs to be tested with new widget.

Update: refering to new ticket #4329

Member

jaspermdegroot commented May 8, 2012

Refering to New Popup widget #3218 since that is going to replace the modal/dialog currently used for (multiple) select menus.
Closing the menu with escape will be covered. Get focus (back) on menulist is something that needs to be tested with new widget.

Update: refering to new ticket #4329

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 18, 2012

Member

Closing since this is covered by #2327

Member

jaspermdegroot commented Jun 18, 2012

Closing since this is covered by #2327

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment