🚀 Netlify Preview:
🔄 this PR updates the following sspecs:

• ARIA preview — ARIA diff

Closes #2438

The current specifications for menu and menubar contradict those for menuitem, menuitemcheckbox, and menuitemradio.

Specifically, the following structure is allowed under the menu role but not when considering the menuitem role:

<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>

This PR clarifies that this structure is indeed allowed.

Additionally, it explicitly clarifies in a note that the following example, where a group contains a button and an input as accessibility children, is not permitted. This prevents ambiguity by making it clear that having at least one menuitem as an accessibility child of the group does not justify including other unrelated elements, which was not clearly stated.

<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>

This update refines the specifications for menu, menubar, menuitem, menuitemcheckbox, and menuitemradio roles consistently.

Test, Documentation and Implementation tracking

Once this PR has been reviewed and has consensus from the working group, tests should be written and issues should be opened on browsers. Add N/A and check when not applicable.

• "author MUST" tests:
• "user agent MUST" tests:
• Browser implementations (link to issue or commit):
  • WebKit:
  • Gecko:
  • Blink:
• Does this need AT implementations?
• Related APG Issue/PR:
• MDN Issue/PR:

Preview | Diff