Keyboard accessibility - can't tab out of menu?

7 posts, 0 answers
  1. Andrea
    Andrea avatar
    4 posts
    Member since:
    Feb 2012

    Posted 16 Jan Link to this post

    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

  2. Dimitar
    Admin
    Dimitar avatar
    317 posts

    Posted 18 Jan Link to this post

    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.
  3. Andrea
    Andrea avatar
    4 posts
    Member since:
    Feb 2012

    Posted 18 Jan in reply to Dimitar Link to this post

    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

  4. Dimitar
    Admin
    Dimitar avatar
    317 posts

    Posted 20 Jan Link to this post

    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.
  5. Andrea
    Andrea avatar
    4 posts
    Member since:
    Feb 2012

    Posted 20 Jan in reply to Dimitar Link to this post

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

  6. Dimitar
    Admin
    Dimitar avatar
    317 posts

    Posted 24 Jan Link to this post

    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.
  7. Andrea
    Andrea avatar
    4 posts
    Member since:
    Feb 2012

    Posted 24 Jan in reply to Dimitar Link to this post

    Great - thank you for entering the bug for me! We are working on a work-around for the issue right now.
Back to Top