Group as allowed acc child of role menu if acc child of menuitem

[giacomo-petri]

Describe your concern

<div role="menu">
	<div role="group">
		<span role="menuitem">Item 1</span>
		<div role="group">
			<span role="menuitem">Item 2</span>
			<span role="menuitem">Item 3</span>
		</div>
	</div>
</div>

Per ARIA specs, the role="menu" accepts group as acc child only if one of the following is true:

• group with accessibility child menuitem
• group with accessibility child menuitemradio
• group with accessibility child menuitemcheckbox

but it's unclear whether a group containing another group (group > (or with generic intervening) group) is acceptable. As written, it appears to be allowed as long as the parent group has at least one accessible child menuitem, but I'm not sure if that was the intended meaning.

[giacomo-petri]

@giacomo-petri to test it and provide evidence

[aardrian]

If you need testing on AT you don't have, hit me up.

[spectranaut]

Discussed in today's ARIA meeting: https://www.w3.org/2025/02/20-aria-minutes#56b0

[giacomo-petri]

I've revisited the issue I previously opened and have some important observations to add.

As mentioned earlier,

Per ARIA specs, the role="menu" accepts group as acc child only if one of the following is true:

• group with accessibility child menuitem
• group with accessibility child menuitemradio
• group with accessibility child menuitemcheckbox

My initial focus was on the menu > group > menuitem + group structure due to a specific scenario. The specs are unclear on whether having a menuitem as a child is enough to also permit a group as its sibling. However, from a broader perspective, the current wording appears to allow every role as long as the group contains at least one menuitem. For example:

<div role="menu">
	<div role="group">
		<span role="menuitem">Item 1</span>
		<div role="group">
			<span role="menuitem">Item 2</span>
			<span role="menuitem">Item 3</span>
		</div>
		<button>Test</button>
		<input type="text aria-label="Test">
	</div>
</div>

Here, the role group has a menuitem as an accessibility child, which seems to be allowed per the specs (or at least not prohibited). However, when testing the code above, the structure becomes unclear, as the relationships between elements are not well-defined. IMO the intent of the spec seems to be that role group should contain only menuitem, menuitemradio, or menuitemcheckbox. If the intent is different and broader usage is intended, the group role should specify what additional elements are allowed when it is an accessibility child of menu, rather than allowing everything.

Going back to my original point, the menu > group > menuitem + group structure, based on this, should not be valid.

Additionally, when considering this topic from the child-parent relationship perspective (rather than the parent-child perspective), the specs state that a menu item can only have a group as its parent if:

group with accessibility parent menu
group with accessibility parent menubar

So while the menu role spec does not explicitly prohibit group > menuitem + group:has(> menuitem) where the last group has a child menuitem, the menuitem role does.

[jnurthen]

Discussed at https://www.w3.org/2025/03/13-aria-minutes.html#e815