A workaround is to set <DefaultGroupSettings OffsetX="WIDTH OF THE ROOT MENU" ExpandDirection="Left" />
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.
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:
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>
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">
RadContextMenu does not appear when there are more than one forms on the page and one of them is hidden.
Steps to reproduce:
<!DOCTYPE html>
<%@ Register Namespace="Telerik.Web.UI.Debug" TagPrefix="debug" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="searchform" style="display:none">aaa</form>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<telerik:RadEditor ID="radEditor1" runat="server">
<Content>
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<br />
</Content>
</telerik:RadEditor>
</form>
</body>
</html>
<
telerik:RadMenu
ID
=
"RadMenu1"
RenderMode
=
"Mobile"
runat
=
"server"
></
telerik:RadMenu
>
protected
void
Page_Load(
object
sender, EventArgs e)
{
RadMenu1.RenderMode = RenderMode.Mobile;
RadMenu1.Width = 300;
for
(
int
i = 0; i < 10; i++)
{
var radmenuItem =
new
RadMenuItem();
radmenuItem.Text =
"demo radmenu item "
+ i.ToString();
for
(
int
j = 0; j < 10; j++)
{
var radmenuItemChild =
new
RadMenuItem();
radmenuItemChild.Text =
"demo radmenu item child "
+ j.ToString();
radmenuItem.Items.Add(radmenuItemChild);
}
RadMenu1.Items.Add(radmenuItem);
}
}
RadMenu renders unneeded scroll button to its nested items in high DPI monitor. The problem can be reproduced with in 4K monitor (the zoom level does not matter). Steps to reproduce: 1. Open https://demos.telerik.com/aspnet-ajax/menu/examples/overview/defaultcs.aspx?page=tables in high DPI monitor (4K) 2. Hover the Products item Result: A scroll button is shown over the last item