Accessible menu navigation

6 posts, 0 answers
  1. david
    david avatar
    238 posts
    Member since:
    May 2007

    Posted 08 Oct Link to this post

         We have a menu built in code-behind, the focus key works and we can move from menu item to item horizontally with arrows but there doesnt seem to be a way to access the dropdown items. WAVE for the demo (attached) shows "Tab" but WAVE on our menu does not (attached). here is the markup

         <telerik:RadMenu ID="RadMenu2" runat="server" Flow="Horizontal" BorderWidth="1px"
                        Style="z-index: 10; width: 100%; white-space: normal;" Skin="Bootstrap"
                        Font-Names="Verdana" Font-Size="X-Small" EnableRoundedCorners="false" RenderMode="Lightweight"
                        EnableAriaSupport="true" CommandKey="Alt" FocusKey="B" KeyboardNavigationSettings-FocusKey="B">
                        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                    </telerik:RadMenu>

     

  2. david
    david avatar
    238 posts
    Member since:
    May 2007

    Posted 10 Oct in reply to david Link to this post

    solved
  3. Chris Vaughn
    Chris Vaughn avatar
    2 posts
    Member since:
    Feb 2010

    Posted 11 Oct in reply to david Link to this post

    Hi David - Would you please post how you solved it? - Thank you!
  4. david
    david avatar
    238 posts
    Member since:
    May 2007

    Posted 12 Oct in reply to Chris Vaughn Link to this post

    Not actually sure, the wave report was a red herring, this markup works using up/down left/right

         <telerik:RadMenu ID="RadMenu2" runat="server" Flow="Horizontal" BorderWidth="1px"
                    Style="z-index: 10; width: 100%; white-space: normal;" Skin="Silk"
                    Font-Names="Verdana" Font-Size="X-Small" EnableRoundedCorners="true" RenderMode="Lightweight"
                    EnableAriaSupport="true">
                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="B"></KeyboardNavigationSettings>
                </telerik:RadMenu>

  5. Attila Antal
    Admin
    Attila Antal avatar
    388 posts

    Posted 16 Oct Link to this post

    Hi David & Chris,

    Could you share more information on the current configuration? Have you both tried implementing the scenario presented in the Menu - Keyboard Support demo?

    Are there any JavaScript errors on the page if you check the Console tab of the Developer tools? Check out the "Debug JavaScript" section of the Improve Your Debugging Skills with Chrome DevTools Blog Post. More specifically the "Pro Tips" right below the gif animation.

    Kind regards,
    Attila Antal
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. david
    david avatar
    238 posts
    Member since:
    May 2007

    Posted 16 Oct in reply to Attila Antal Link to this post

    we did get it to work, as well JAWS is rendering the menu text correctly as well 
Back to Top