Unplanned
Last Updated: 24 Oct 2023 13:50 by ADMIN
Andrea
Created on: 24 Jan 2017 15:05
Category: Menu
Type: Bug Report
2
Mega menu using RadMenu and RadSiteMap is not keyboard accessible
Due to recent changes to the keyboard accessibility of the RadMenu (i.e. it is now only accessible using the arrow keys instead of moving around using tabs), mega menus are no longer keyboard accessible.

We have designed a mega menu using a telerik RadSiteMap embedded in a RadMenu control, as suggested in the Telerik Demo site: http://demos.telerik.com/aspnet-ajax/menu/examples/megadropdown/defaultcs.aspx

However, this is no longer accessible. Previously, you could open the dropdown by pressing the down button, then move around in the dropdown using tab. Now, however, pressing tab just closes the dropdown.

We need the menu to be accessible in one way or another.
11 comments
ADMIN
Rumen
Posted on: 24 Oct 2023 13:50

Hi Karen,

Due to the architectural complexities surrounding the current keyboard navigation, implementing support for ContentTemplates is not straightforward. The difference in rendering and the DOM structure when templates are used poses additional challenges. Specifically, handling focus within template items and determining the next selectable element outside the template upon focus exit are aspects that require a thorough solution to ensure a seamless user experience.

Our development team is actively investigating the most efficient way to address these challenges. However, due to the complexity of the task, we are unable to provide a definitive release timeline for this fix at the moment. Rest assured, we are committed to enhancing the functionality of RadMenu and will keep our customers updated as we make progress on this front.

We appreciate your patience and understanding. Your feedback is invaluable to us, and we encourage you to continue sharing your insights, as they play a crucial role in helping us improve our products.

 

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources
Karen
Posted on: 18 Oct 2023 19:24

Rumen,

I'm wondering if you have any idea what release this fix might be included in?  Thank you.

Karen

Karen
Posted on: 23 Aug 2023 14:41

Hello Rumen,

That is wonderful news that you were able to reproduce and raised the priority.  Thank you very much. 


Karen

ADMIN
Rumen
Posted on: 23 Aug 2023 11:44

Hi Karen,

I was able to reproduce the issue that you experienced and after a discussion with the dev team, it appeared that the menu control does not offer keyboard support for its ContentTemplate feature. I raised the priority of this item in our backlog and we will try to implement it in one of the upcoming major releases of the suite.

Please bear with us.

Best Regards,


Rumen
Progress Telerik

Heads up! Telerik UI for ASP.NET AJAX versions for .NET 3.5 and 4.0 are retired. Progress will continue shipping assemblies compatible with .NET 4.5 and later. See whether this affects your apps in this article.
Karen
Posted on: 16 Aug 2023 15:45

Hi Rumen,

Sorry for the long delay in response, I was not able to work on this for a while.  I am still having the issue.  I added the RadMenu settings you mentioned.  That works fine Ctrl + M opens the Menu.  However, you said "You can still use the Tab key to go through the items"  I cannot do that.  When I hit tab, it just moves to the next item in the RadMenu - not the items in the RadSiteMap.  Any other suggestions to try, at this point I cannot get this to be 508 Compliant.   Thank you.

Karen

ADMIN
Rumen
Posted on: 05 Jun 2023 13:54

Hi Karen,

RadMenu offers WAI-ARIA and keyaboard support, which you can enable by setting:

            menu.KeyboardNavigationSettings.CommandKey = KeyboardNavigationModifier.Ctrl;
            menu.KeyboardNavigationSettings.FocusKey= KeyboardNavigationKey.M;
            menu.EnableAriaSupport = true;

Once the menu gets selected, you can press the bottom arrow key or tab to navigate to the menu item. Using the arrow keys you can navigate through the whole menu structure as explained in the description of the Keyboard Support demo.

Yes, RadSiteMap is a basic component and it does not offer a built-in way to select its first item and keyboard navigation. You can still use the Tab key to go through its items.

Regards,
Rumen
Progress Telerik

Heads up! Telerik UI for ASP.NET AJAX versions for .NET 3.5 and 4.0 are retired. Progress will continue shipping assemblies compatible with .NET 4.5 and later. See whether this affects your apps in this article.
Karen
Posted on: 01 Jun 2023 14:13
That still didn't seem to work.  The problem is the RadSiteMap never gets focus.  I can open the RadMenu with the enter key, but can't get focus to the items below it.
ADMIN
Rumen
Posted on: 01 Jun 2023 13:00

Hi Karen,

If the menu is created dynamically in the code-behind, you can use the following code as an example to import the JavaScript code from the server with the help of the ScriptManager.RegisterStartupScript method:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        // Create the RadMenu control
        RadMenu menu = new RadMenu();
        menu.ID = "RadMenu1";
        menu.Skin = "Default";
        menu.OnClientItemFocus = "OnClientItemFocus";
        menu.OnClientItemClosing = "OnClientItemClosing";

        // Create menu items
        RadMenuItem item1 = new RadMenuItem("Item 1");
        RadMenuItem item2 = new RadMenuItem("Item 2");
        RadMenuItem item3 = new RadMenuItem("Item 3");

        // Add sub-items to Item 1
        RadMenuItem subItem1 = new RadMenuItem("Sub Item 1");
        RadMenuItem subItem2 = new RadMenuItem("Sub Item 2");
        item1.Items.Add(subItem1);
        item1.Items.Add(subItem2);

        // Add items to the menu
        menu.Items.Add(item1);
        menu.Items.Add(item2);
        menu.Items.Add(item3);

        // Add the menu to the page
        // Assuming you have a placeholder control named "menuPlaceholder" in your markup
        menuPlaceholder.Controls.Add(menu);

        // Register the startup script
        string script = @"
            function OnClientItemFocus(sender, eventArgs) {
                var item = eventArgs.get_item();
                if (item) {
                    item.open();
                    // document.getElementById('textbox1').focus();
                    $telerik.cancelRawEvent(eventArgs);
                    return false;
                }
            }

            function OnClientItemClosing(sender, args) {
                args.set_cancel(true);
            }
        ";

        ScriptManager.RegisterStartupScript(this, this.GetType(), "CustomScript", script, true);
    }
}

 

Regards,
Rumen
Progress Telerik

Heads up! Telerik UI for ASP.NET AJAX versions for .NET 3.5 and 4.0 are retired. Progress will continue shipping assemblies compatible with .NET 4.5 and later. See whether this affects your apps in this article.
Karen
Posted on: 01 Jun 2023 12:34
Our menu is built in code so this solution doesn't seem like a possible fix.  We need this to work for accessibility.
ADMIN
Rumen
Posted on: 24 Nov 2022 11:16

Hi there,

While there isn't yet a universal solution, you can try to implement it based on the OnClientItemFocus and OnClientItemClosing events of the menu:

 

            <script>
                function OnClientItemFocus(sender, eventArgs) {
                    var item = eventArgs.get_item();
                    if (item) {
                        item.open();
                        // document.getElementById("textbox1").focus();
                        $telerik.cancelRawEvent(eventArgs);
                        return false;
                    }
                }

                function OnClientItemClosing(sender, args) {
                    args.set_cancel(true);
                }
            </script>
            <telerik:RadMenu runat="server" ID="RadMenu1" Skin="Default"  OnClientItemFocus="OnClientItemFocus" OnClientItemClosing="OnClientItemClosing" ...

 

Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Karen
Posted on: 17 Nov 2022 13:34
I am wondering if this has been addressed.  We have run into this issue.  We have a radsitemap inside a radmenu.  I can get the radsitemap to expand from the menu, but cannot access any of the links inside.  The arrow keys do nothing, tab moves to the next item in the radmenu.  We need this to be keyboard accessible for ADA compliance.  Thank you for any update Telerik support can provide.