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.
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.
Regards,
Rumen
Progress Telerik
Rumen,
I'm wondering if you have any idea what release this fix might be included in? Thank you.
Karen
Hello Rumen,
That is wonderful news that you were able to reproduce and raised the priority. Thank you very much.
Karen
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
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
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
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
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/.