[BITV] 9.4.1.2/2.6 - The "Weather" menu - The implementation as an application menu is not complete as only role="menu" was used and also not appropriate in this case. Implementing it as a normal list with interactive elements would be a better alternative. (1)

[AndyScherzinger]

Details

https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-bfbf07e5c3-v2-n6

[JuliaKirschenheuter]

Dear @michaelnissenbaum,

I've looked through menu examples on the https://www.w3.org/WAI/tutorials/menus/ page and haven't seen any specific requirements for the action menu in our case, like:

Would it be enough to leave a menu in form of the only list with "interactive elements"? Would it be enough to remove role="menu" on the <ul> elements to resolve this issue?

Thanks a lot!

[michaelnissenbaum]

Hello @JuliaKirschenheuter, In my opinion, if you remove the two roles "menu" and "menuitem," everything should be fine. Attached is the link to an article that describes the differences and use cases for both variants - https://inclusive-components.design/menus-menu-buttons/.

[JuliaKirschenheuter]

We have different types of menu:

1. Menu with action buttons, like:
   

2. Menu with mixed elements (action buttons, input fields) like:
   

3. Menu with links, like:
   

---

Action menu and navigation menu functionalities shouldn't be mixed

https://marcus.io/blog/menu-or-not

If menu contains only links, then any role="menu" and role="menuitem" should not be used.

Don’t use ARIA, if the underlying HTML is sufficient for communicating what this thing is. In the case of a navigation menu, that’s a nested list of links.
https://terrillthompson.com/1226
https://inclusive-components.design/menus-menu-buttons/

Requirements regarding menu button: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/

Does it mean, that role="menuitem" and role="menu" are needed only on nested navigation menus?

https://www.w3.org/WAI/ARIA/apg/patterns/menubar/

We should not use role="menu" and role="menuitem" on action menu with buttons and action menu with mixed components.

Also that role="menu" is a beast of its own, should be used with caution even in an "action menu" context, and that it does not always pay off to try something "smart" but to go for the simple route
https://marcus.io/blog/menu-or-not

The issue with this pattern is that the document does not make it clear that this pattern should only be used when trying to replicate an application menu.
https://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html

Dear @michaelnissenbaum, just to be sure: have i understood correctly that we should remove role="menu" and role="menuitem" on every type of our menu (three examples above)? Thanks a lot!

[ShGKme]

We also have a classic menu like in text, which definitely should have role="menu":

[michaelnissenbaum]

Hi @JuliaKirschenheuter , the decision on which type of menu to use can be made based on the description of the "menu" role (ARIA 1.2) - "A menu is often a list of common actions or functions that the user can invoke. The menu role is appropriate when a list of menu items is presented in a manner similar to a menu on a desktop application.". If a menu is used for navigation purposes, then ARIA "menu" roles should not be used. The FlyOut Pattern is applied - https://www.w3.org/WAI/tutorials/menus/flyout/. My recommendation would be to use the "menu" role for Example 1 and not for 2 and 3.

[JuliaKirschenheuter]

Conclusion about which "menu" have to have role="menu" and role="menuitem":

1. Is not a menu and have to be re-done as usual NcSelect (follow-up ticket)
   

2. Is not a menu because several components are mixed (input, action button...)
   

3. Not a menu because contains only links
   

4. Menu because have only action buttons inside
   

5. If there is a typical navigation -> should not be a menu too

---

Menu is only in case if all elements have only buttons. It should looks like a "real desktop application menu"

[ShGKme]

Some comments from my side.

It should looks like a "real desktop application menu" is not very specific, we have no menus like that. The only close to "desktop-like" is text with the menubar.

Possible elements

In the actions we may have:

1. Clickable items that can have semantics of menu items
   • Links:
     • Hyperlink NcActionLink
     • In-app JS link NcActionRouter
   • Button NcActionButton
   • Menu form elements:
     • Checkbox: NcActionCheckbox
     • Radio: NcActionRadio
     • In Process: pressed state button (alternative to checkbox)
   • Additionally, a "radio group item". Can be considered a menu item with a sub-menu: NcActionButtonGroup
2. Data input items that should not be elements of menu:
   • Text, date, color, select: NcActionInput
   • Textarea: NcActionTextEditable
3. Misc.:
   • Text NcActionText
   • Separator NcActionSeparator
   • Caption NcActionCaption

Criteria

Let's make such criteria to be a semantic menu.

NcActions is considered a menu if at the same time:

• It has at least one Clickable item
• It has no Data input
• It has not only Links as Clickable items, otherwise it is a navigation

Otherwise, it is just a popover.

Examples

Menus

Menubar	Buttons	With checkbox and links	Buttons with text and separators	Button group
Text	File actions	Contact settings	Text	Mail
.	user management	Mail	.
.			.	.

Navigation (no role)

Just popovers (no role)

Weather status	Group edit