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">
Hi,
I use the RadContextMenu control (ajax). When I right-click a control to show the menu, the OnClientShowing or On ClientItemClicked events are fired.
Within this, I can get the html element that has been clicked, but what I really need is a reference to the actual control that was clicked. For example, I have a checkbox on my page and the user can right-click the text on the checkbox, OR the check-box itself. This makes it really tough to determine what the actual control was that was clicked (in this case, the RadCheckBox).
I thought it would be a cool idea to be able to get this control as part of the args for the event.
Tom.
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
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>
Video: https://www.screencast.com/t/lyemH3IjT JavaScript error "unable to get property 'handleEvent' of undefined or null reference" from Telerik.Web.Ui.WebResource.axd is thrown.
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; }
Go to http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/rendermodes/defaultcs.aspx?Skin=Glow Switch to RenderMode="Classic" and select some menu item. It will become gray colorized instead of yellow. The gradient should be removed. Workaround: Put the following style on the page with the menu control: <style> .rmLink.rmSelected { background-color: #db9810 !important; } </style>
A workaround is to set <DefaultGroupSettings OffsetX="WIDTH OF THE ROOT MENU" ExpandDirection="Left" />
Workaround: function OnClientItemClicking(sender, eventArgs) { if ($telerik.isTouchDevice) { if (eventArgs.get_item().get_postBack()) { $telerik.$('.rmRootToggle').trigger('touchend'); } } }