This is a migrated thread and some comments may be shown as answers.

Keyboard accessibility - can't tab out of menu?

8 Answers 493 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Andrea
Top achievements
Rank 1
Andrea asked on 16 Jan 2017, 08:09 PM

I'm having trouble with the keyboard accessibility of the RadMenu. I can tab into the menu, and use the arrow keys to move to the various navigation items, but once I go past the last item it just goes back to the first. I have found that hitting tab then escape for each navigation item will let me get out, but it seems ridiculous to have to tell our users that they will have to do the same.

 

Is there a way to make the menu easier to use for those who are not able to use a mouse?

 

Thanks,

Andrea

8 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 18 Jan 2017, 03:55 PM
Hi Andrea,

The RadMenu may be focused by mouse,Tab/Shift+Tab or a special key combination of command key and focus key, as shown on the Menu - Keyboard Support demo. Once focused, users may use the keys described in the demo's About section for interacting with the control. Pressing Tab/Shift+Tab while the RadMenu is focused, would move the focus to the next/previous focusable element on the page.

Regards,
Dimitar
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Andrea
Top achievements
Rank 1
answered on 18 Jan 2017, 04:32 PM

Hi Dimitar,

I tried this and it doesn't seem to work. Once I tab in, I am unable to tab out unless I click escape, then tab, for each navigation item. I noticed that in the demo the tab index is 1, so I tried setting the tab index in my site to 1 and indeed the tabbing out does work when it's set that way. But of course I don't want the menu to be the first tab target. If I set the tab index to 0 or -1 the problem comes back - I can tab into the navigation but I cannot tab out. I was able to reproduce the issue on the Menu Overview demo on the demo site, where the tab index is set to 0.

 

It does seem to work, however, if I remove the tab index altogether using jQuery. Is it possible to turn off the tab index attribute on the control?

 

Thanks,

Andrea

0
Dimitar
Telerik team
answered on 20 Jan 2017, 09:48 AM
Hi Andrea,

The tabindex attribute is required in order to include the control in the tab order and to enable keyboard support. Removing the tabindex attribute leads to unexpected control behavior. For demo purposes, tabindex is set to 1, but you may set it to another positive value, and the RadMenu would not be the first control to focus on pressing Tab.

Regards,
Dimitar
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Andrea
Top achievements
Rank 1
answered on 20 Jan 2017, 02:57 PM

So, I would have to count all the focusable elements on the page before the menu, and set the tabindex to that number? And since the number of elements changes based on permissions, I would have to programatically count all of those focusable elements before setting the tabindex?

 

Not great. Guess I'll have to enter a bug for this. :/

0
Dimitar
Telerik team
answered on 24 Jan 2017, 09:02 AM
Hi Andrea,

I re-tested RadMenu's behavior with tabindex="0" and I logged a bug for it. You may track its status, vote for it and add comments using the following Ideas & Feedback Portal item. As a small token of gratitude for reporting this issue to us and to compensate you for the inconveniences caused by it, I updated your Telerik points.

Regards,
Dimitar
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Andrea
Top achievements
Rank 1
answered on 24 Jan 2017, 02:58 PM
Great - thank you for entering the bug for me! We are working on a work-around for the issue right now.
0
Srinivas
Top achievements
Rank 1
answered on 31 May 2017, 02:13 AM

Hi,

We are having the same issue with menu control for accessibility. Has this issue been fixed yet?

Thanks,

Srini

0
Marin Bratanov
Telerik team
answered on 31 May 2017, 09:37 AM

Hello Srini,

This has not been implemented yet. You can use the Like and Follow buttons on the following page to get notifications about status changes: https://feedback.telerik.com/Project/108/Feedback/Details/210823-unable-to-move-focus-away-from-radmenu-with-tabindex-0-when-tab-shifttab-is-p. I have also raised the priority of this fix.


Regards,

Marin Bratanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Menu
Asked by
Andrea
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Andrea
Top achievements
Rank 1
Srinivas
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or