I've found two possible solutions:
apply role="menuitem" for the <li> tags:
<li role="menuitem"><a ...>some menuitem</a></li>
apply role="menuitem" for the <a> tags:
<li role="presentation"><a role="menuitem" ...>some menuitem</a></li>
I think that the second solution is the logical one, but I am unsure. And I cannot use it in a more complex situation, only 2, because the submenuitems are not children of the <a> tag:
<li role="menuitem"><a ...>some menuitem</a></li>
<li role="menuitem" aria-haspopup="true">
<a ...>some menuitem with children </a>
<div><ul>
<li role="menuitem"><a ...>submenuitem</a></li>
...
</ul></div>
</li>
Is it correct? Is there some additional possible improvement on it?
The HTML structure is defined by the framework I use, I am not able to change it.
Answer to Question Asked
If you are genuinely applying an operating-system-style menu to an application, then you want to put the role on the <a>. That is the item that performs the function of the menu item (linking to another view or page or state).
So your second suggestion is correct:
<li role="presentation"><a role="menuitem" ...>some menuitem</a></li>
Curveball
Now that being said, I suspect that you do not really want an operating-system-style menu. To see what is expected of one, take a look at the WAI-ARIA Authoring Practices item 2.14 Menu or Menu bar.
By invoking this kind of menu, you are telling a skilled user of a screen reader that it will behave just as an operating system menu, which means you need to honor the keyboard commands below (so you have to code them all, ARIA does not just make a browser honor them).
Instead, consider just using a <nav> element to hold your list (which will be announced to screen readers and act as a landmark for in-page navigation), keep the list semantics in place (IOW, do not use role=presentation as you want users of screen readers to know how many items there are), and style it to visually appear as you see fit.
This way you are not creating a worse experience for screen reader users in your effort to help them (or satisfy a checklist item).
ARIA Menu Keyboard Interaction
When a menu opens, or when a menubar receives focus, keyboard focus is placed on the first item. All items are focusable as described in 4.6 Keyboard Navigation Inside Components.
Enter:
When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.
Otherwise, activates the item and closes the menu.
Space:
When focus is on a menuitemcheckbox, changes the state without closing the menu.
When focus is on a menuitemradio that is not checked, without closing the menu, checks the focused menuitemradio and unchecks any other checked menuitemradio element in the same group.
(Optional): When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.
(Optional): When focus is on a menuitem that does not have a submenu, activates the menuitem and closes the menu.
Down Arrow:
When focus is on a menuitem in a menubar, opens its submenu and places focus on the first item in the submenu.
When focus is in a menu, moves focus to the next item, optionally wrapping from the last to the first.
Up Arrow:
When focus is in a menu, moves focus to the previous item, optionally wrapping from the first to the last.
When focus is in a menubar, does nothing.
Right Arrow:
When focus is in a menubar, moves focus to the next item, optionally wrapping from the last to the first.
When focus is in a menu and on a menuitem that has a submenu, opens the submenu and places focus on its first item.
When focus is in a menu and on an item that does not have a submenu, performs the following 3 actions:
Closes the submenu and any parent menus.
Moves focus to the next menuitem in the menubar.
Either: (Recommended) opens the submenu of that menuitem without moving focus into the submenu, or opens the submenu of that menuitem and places focus on the first item in the submenu.
Note that if the menubar were not present, e.g., the menus were opened from a menubutton, Right Arrow would not do anything when focus is on an item that does not have a submenu.
Left Arrow:
When focus is in a menubar, moves focus to the previous item, optionally wrapping from the last to the first.
When focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parent menuitem.
When focus is in a submenu of an item in a menubar, performs the following 3 actions:
Closes the submenu.
Moves focus to the previous menuitem in the menubar.
Either: (Recommended) opens the submenu of that menuitem without moving focus into the submenu, or opens the submenu of that menuitem and places focus on the first item in the submenu.
Home: If arrow key wrapping is not supported, moves focus to the first item in the current menu or menubar.
End: If arrow key wrapping is not supported, moves focus to the last item in the current menu or menubar.
Any key that corresponds to a printable character (Optional): Move focus to the next menu item in the current menu whose label begins with that printable character.
Escape: Close the menu that contains focus and return focus to the element or context, e.g., menu button or parent menuitem, from which the menu was opened.
Tab: Moves focus to the next element in the tab sequence, and if the item that had focus is not in a menubar, closes its menu and all open parent menu containers.
Shift + Tab: Moves focus to the previous element in the tab sequence, and if the item that had focus is not in a menubar, closes its menu and all open parent menu containers.
Related
I am working with the ChromeVox extension to add a text reader for our church web site www.uulynchburg.org. When using the mouse to navigate, it is easy to click on a text block to start the reader. The problem comes for someone unable to use the mouse and relying on navigation keys. I can walk down the menu, but once a menu item is selected, I want the focus to jump from the memu to the start of the text in the content .
If you want to focus ChromeVox on a particular page element, you need to focus on that element.
Create a wrapper element which is focusable.
To make inherently un-focusable elements (non-form elements, buttons, links, etc) focusable, add tab-index="-1".)
<div id="main-content" tab-index="-1">
<h1>heading</h1>
</div>
Use javascript to focus on the element after navigating, on page load, or whatever event makes most sense.
document.getElementById('main-content').focus()
This is an example but you can select any specific element.
This technique is especially useful if you are building a single-page-app.
This question has a couple bits to it. Basically I want to make the context menu behave like a sidebar that pops out a box with html.
Get the height and location of a users context menu?
Open an interactable html view next to the menu without closing the menu?
Close both the menu and popout on off-click.
So a user can right click on the page,
and then click the contextMenu item to open a page that can hold html
In my MFC application, which is a modeless dialog by itself, has a Tab control along with many other controls. And Tab control has two tabs, and dialogs are inserted into those.
This tab control is preceded and followed by other controls in the tabbing order. And when tab key gets to the tab control, It doesn't go into the dialogs inside tab, instead it moves to the next control in the application. I want that to go into the tab dialog and navigate through controls inside it.
At the moment, Tab key visits these dialogs inside tabs after visiting all controls in my application(modeless dialog).
How do I or where do I set tab order such that the tab key goes into the tab control dialogs ?
Research the WS_EX_CONTROLPARENT window style. MSDN:
"If this style is specified, the dialog manager recurses into children of this window when performing navigation operations such as handling the TAB key, an arrow key, or a keyboard mnemonic."
I want to create a custom pop-up menu, which appears when the user focuses a text field. In this menu, the user should be able to click on buttons or something.
I tried using content scripts, but my problem is, that I don't find good events to show and hide the menu.
I tried the focus event to show the menu and the blur event to hide the menu, but obviously when selecting something in the menu, the text field looses focus and blur fires, which hides the menu and does not process the click. Additionally, when I use the focus and blur events on text fields, I guess I will override existing event of the webpage.
Is there a good way to accomplish this?
I have a web application, in that application the head menus open when we move mouse on to that (I don't want to click on that head menus because clicking on that menus redirect the page to another page).
On mouse over it opens a menu list, I will be able to select the menu item but not able to hover on to the head menu so that a drop-down menu list can appear.
fire_event("onmouseover") is not working, it is only flashing that menu(element) but not opening the drop down menu list.
Can any one give me the solution How can I put hover on to any HTML element please.
Well, there is #hover method:
browser.element(:how => what).hover
And this could also help: How to find out which JavaScript events fired?
For some reason .hover doesn't work for me, but this one does:
browser.element(how: what).fire_event(:mouseover)
No idea why.