[context-menu] Update role attribute on checkable items to use menuitemcheckbox

[anezthes]

The current implementation uses <vaadin-list-box role="list"> which is semantically incorrect if we wish to build a menu. The role should be set to "menu" and the items should have role="menuitem".

(Ideally aria-haspopup, aria-controls and aria-expanded should also exist on the element that triggers the popup.)

The semantics change a bit depending on the menu type. Some examples below...

Example 1: Application Menus

<ul role="menu">
  <li role="menuitem">New File</li>
  <li role="menuitem">Open File...</li>
  <li role="menuitem">Print...</li>
  ...
</ul>

It's important to note that elements with role="menuitem" should not contain interactive content.

---

Example 2: Text Style

<ul role="menu">
  <li role="menuitemcheckbox" aria-checked="false">Bold</li>
  <li role="menuitemcheckbox" aria-checked="true">Italics</li>
  <li role="menuitemcheckbox" aria-checked="false">Underline</li>
  ...
</ul>

Allows multiple items to be selected.

---

Example 3: Font Selection

<ul role="menu">
  <li role="menuitemradio" aria-checked="false">Arial</li>
  <li role="menuitemradio" aria-checked="false">Courier New</li>
  <li role="menuitemradio" aria-checked="true">Helvetica Neue</li>
  ...
</ul>

Should only allow one selection.

---

Example 4: Navigation

<ul role="menu">
  <li role="none">
    <a role="menuitem" href="www.vaadin.com">Home</a>
  </li>
  ...
</ul>

While this technically works VoiceOver will announce "Home, menu item" instead of "Home, link". The latter is more accessible IMO. We should be careful in recommending this approach over the established usage of <nav>, <ul>, <li> and <a>.

---

Prototyping
Tested a few approaches and found that putting the attributes (role and aria-checked) on <vaadin-context-menu> and <vaadin-context-menu-item> produces a result that's fairly close to the native HTML approach.

<vaadin-context-menu role="menu">
  <vaadin-context-menu-item role="menuitem">Item 1</vaadin-context-menu-item>
  <vaadin-context-menu-item role="menuitem">Item 2</vaadin-context-menu-item>
  ...
</vaadin-context-menu>

<vaadin-context-menu role="menu">
  <vaadin-context-menu-item role="menuitemcheckbox/menuitemradio" aria-checked="true">Item 1</vaadin-context-menu-item>
  <vaadin-context-menu-item role="menuitemcheckbox/menuitemradio" aria-checked="false">Item 2</vaadin-context-menu-item>
  ...
</vaadin-context-menu>

Tested in Chrome and Safari with VoiceOver.

[web-padawan]

This can be probably workarounded in vaadin-context-menu-list-box.

Proper implementation would be to split lists (select) and menus (context-menu).
Related improvement idea: vaadin/vaadin-list-box#67

[web-padawan]

Most of problems described here were addressed in Vaadin 24, see issue and PR below:

• Update internal item and list-box elements to use mixins instead of extending #5358
• fix!: set correct role attribute on the list-box and item #5401

However, we still need to add menuitemcheckbox role support. Renamed the issue.