Bug 276658 – AX: role="menu" elements should allow child groups with menuitem children

• Status: RESOLVED
• Resolution: FIXED
• Component: Accessibility

[Westbrook]

With the following JS:


```js
class Menu extends HTMLElement {
  constructor() {
    super();
    this.internals_ = this.attachInternals();
    this.internals_.role = 'menu';
    this.internals_.ariaOrientation = 'vertical';
  }
}

customElements.define('axe-menu', Menu);

class Group extends HTMLElement {
  constructor() {
    super();
    this.internals_ = this.attachInternals();
    this.internals_.role = 'group';
  }
}

customElements.define('axe-group', Group);

class MenuItem extends HTMLElement {
  constructor() {
    super();
    this.internals_ = this.attachInternals();
    this.internals_.role = 'menuitem';
  }
}

customElements.define('axe-menuitem', MenuItem);
```

And the following HTML:

```html
  <div>
    <style>
      axe-menuitem {
        display: list-item;
      }
    </style>
    <axe-menu aria-label="Test menu">
      <axe-group aria-label="Test group 1">
        <axe-menuitem>Inbox</axe-menuitem>
        <axe-menuitem>Archive</axe-menuitem>
        <axe-menuitem>Trash</axe-menuitem>
      </axe-group>
      <axe-group aria-label="Test group 2">
        <axe-menuitem>Custom Folder 1</axe-menuitem>
        <axe-menuitem>Custom Folder 2</axe-menuitem>
        <axe-menuitem>Custom Folder 3</axe-menuitem>
      </axe-group>
      <axe-group aria-label="Test group 3">
        <axe-menuitem>New Folder</axe-menuitem>
      </axe-group>
    </axe-menu>
  </div>
```

It would be expected the WebKit would populate a "menu" node in the Accessibility Tree with the name of "Test menu". However, the node is excluded all together.

Chrome and Firefox both recognize this nodes present and present it to the OS via the AT.

This can be experienced via https://codepen.io/Westbrook/pen/mdZeQPJ

[Radar WebKit Bug Importer]

<rdar://problem/131838275>

[Tyler Wilcock]

This actually isn't related to element internals at all. It's that WebKit requires direct menu item children for a role="menu" element to compute a final role of menu. But the example is spec compliant (https://w3c.github.io/aria/#menu) — WebKit also needs to allow groups with menuitem children.

[Tyler Wilcock]

Pull request: https://github.com/WebKit/WebKit/pull/31353

[Westbrook]

Awesome! Glad to see there's a clear path to resolving this. Just for reference, I submitted these related tests to WPT: https://github.com/web-platform-tests/wpt/pull/47233

[EWS]

Committed 281481@main (82f243e3dea5): <https://commits.webkit.org/281481@main>

Reviewed commits have been landed. Closing PR #31353 and removing active labels.

[EWS]

Committed 280938.233@safari-7619-branch (e3ebd6e68061): <https://commits.webkit.org/280938.233@safari-7619-branch>

Reviewed commits have been landed. Closing PR #1600 and removing active labels.