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.

Currently, as mobile browsers scroll bars are transparent and initially not visible, there is no indication to suggest to users that a mobile RadMenu can be scrolled down to see items not currently displayed.
The suggestion it to add a mobile RadMenu visual indicator which shows to users that there are more items to be seen on scrolling the menu. It would enable customers to set a mobile RadMenu height that does not fit all items, and indicate to users that the expanded menu is scrollable.

The default behavior of the mobile menu is the following: when popup with root items is opened, its height is calculated depend on root items count and their height. After opening a sub-menu, where items count is different, the popup height is not updated.

The suggestion is to add a functionality to popup menu to update its height every time after opening a next item.

Hovering over the RadMenu sub-item toggle arrow icon does not expand its sub-item.

Can be reproduced with the following configuration:



<telerik:RadMenu ID="RadMenu2" _OnClientLoad="OnClientLoad" runat="server" RenderMode="Auto" ShowToggleHandle="true">
    <Items>
        <telerik:RadMenuItem Text="Main Menu">
            <Items>
                <telerik:RadMenuItem Text="Item 1">
                    <Items>
                        <telerik:RadMenuItem Text="Sumbenu 1"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sumbenu 2"></telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Item 2">
                    <Items>
                        <telerik:RadMenuItem Text="Sumbenu 3"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Sumbenu 4"></telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>



Workaround:

                <script>
                    var menuItem = null;
     
                    function OnClientLoad(sender) {
                        $telerik.$(".rmToggle,.rmToggle *").on("mouseover", ExpandMenu);
                    }
                    function ExpandMenu() {
                        var item = $telerik.$(this).closest('.rmItem')[0]._item
                        if (!item.get_isOpen()) {
                            item.open()
                        }
                    }
                </script>

This can be achieved if the role=menubar is set to the <ul> element containing the <li> menu items instead of the wrapper <div> element.

In this example from the WAI-ARIA Practices site, JAWS announces "1 of 3", "2 of 3", and "3 of 3" as the top-level menus are navigated.

https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html

 Workaround from Admin:

<script>
    function OnClientLoad(sender, args) {
        $telerik.$(sender.get_element()).removeAttr("role").find(">").attr("role", "menubar")
    }
</script>
<telerik:RadMenu runat="server" ID="RadMenu1" EnableAriaSupport="true"  RenderMode="Lightweight" OnClientLoad="OnClientLoad" TabIndex="1">

The boundary detection is not applied to the ContentTemplate of a ContextMenu item:

<telerik:RadContextMenu runat="server" ID="RadContextMenu1" EnableScreenBoundaryDetection="true"  >
	<Items>
		<telerik:RadMenuItem Text="Item 1" Value="1">
		</telerik:RadMenuItem>
		<telerik:RadMenuItem Text="Item 2" Value="2" >
			<GroupSettings Width="400px" />
			<ContentTemplate>
				<div style="width: 400px;">
				some content here
				</div>
			</ContentTemplate>
		</telerik:RadMenuItem>
	</Items>
</telerik:RadContextMenu>

Reproduction - http://somup.com/crVYIDot19

Setup to reproduce:

<telerik:RadContextMenu ID="RadContextMenu1" runat="server">
    <Targets>
        <telerik:ContextMenuDocumentTarget />
    </Targets>
    <Items>
        <telerik:RadMenuItem Text="item">
            <ItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server" />
            </ItemTemplate>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadContextMenu>

<telerik:RadButton runat="server" ID="RadButton2" Text="Postback" AutoPostBack="true" />

Steps to reproduce:

• Show the context menu with a right mouse click on the document.
• Type in a custom value in the TextBox embedded in the menu.
• Perform a postback by clicking on the RadButton.
• Show the context menu again. In the textbox, pick the autocomplete suggestion by the browser.

Currently the Menu with RenderMode="Mobile" expands only in one direction(down) and disregarding the value of the  DefaultGroupSettings-ExpandDirection property. 

A workaround is to set <DefaultGroupSettings OffsetX="WIDTH OF THE ROOT MENU" ExpandDirection="Left" />

the scroll arrows do not have a proper z-index and get hidden when an item that is half-shown behind them is hovered, because this item gets a higher z-index.

attached is a video of the problem

WORKAROUND:
- set z-index to the arrows:

        .RadMenu .rmBottomArrow,
        .RadMenu .rmTopArrow {
            z-index: 31 !important;
        }