[A11y] required-context-role

[MelSumner]

Rule Requested

The required context role defines the owning container where this role is allowed. If a role has a required context, authors MUST ensure that an element with the role is contained inside (or owned by) an element with the required context role. For example, an element with role="listitem" is only meaningful when contained inside (or owned by) an element with role="list".

Roles to check

Format: role | required context role

• columnheader | row
• gridcell | row
• listitem | group or list
• menuitem | group, menu, or menubar
• menuitemcheckbox | menu or menubar
• menuitemradio | group, menu, or menubar
• option | listbox
• row | grid, rowgroup, or treegrid
• rowgroup | grid
• rowheader | row
• tab | tablist
• treeitem | group or tree

Example(s)

Conformant Code:

<div role="list">
  <div role="listitem">Item One</div>
  <div role="listitem">Item Two</div>
</div>

Non-conformant code:

<div>
  <div role="listitem">Item One</div>
  <div role="listitem">Item Two</div>
</div>

Suggested Error Message

(Replace items in brackets with the item that violated the rule)

"You have an element with the role of {{role}} but it is missing the required (immediate) parent element of {{parent-element-options}}. Reference: https://www.w3.org/TR/wai-aria-1.0/roles#{{role}}."

Reference(s)

• https://www.w3.org/TR/wai-aria-1.0/roles#scope
• https://www.w3.org/TR/wai-aria-1.0/roles#columnheader
• https://www.w3.org/TR/wai-aria-1.0/roles#gridcell
• https://www.w3.org/TR/wai-aria-1.0/roles#listitem
• https://www.w3.org/TR/wai-aria-1.0/roles#menuitem
• https://www.w3.org/TR/wai-aria-1.0/roles#menuitemcheckbox
• https://www.w3.org/TR/wai-aria-1.0/roles#menuitemradio
• https://www.w3.org/TR/wai-aria-1.0/roles#option
• https://www.w3.org/TR/wai-aria-1.0/roles#row
• https://www.w3.org/TR/wai-aria-1.0/roles#rowgroup
• https://www.w3.org/TR/wai-aria-1.0/roles#rowheader
• https://www.w3.org/TR/wai-aria-1.0/roles#tab
• https://www.w3.org/TR/wai-aria-1.0/roles#treeitem

[rwjblue]

@MelSumner - Can you include example template snippets that would be good/bad (doesn't need to be exhaustive, but I'd like to make sure we are on the same page).

[lifeart]

@rwjblue any common/easy way to check parents without stack in hbs AST?

[lifeart]

@MelSumner, is this case valid?

<div role="list">
  <div>
      <div role="listitem">Item One</div>
      <div role="listitem">Item Two</div>
  </div>
</div>

when we have few nodes between roles

[MelSumner]

@lifeart no, that's not valid.

[lifeart]

@MelSumner can you provide error message for this rule?

[lifeart]

I can take it

[MelSumner]

@MelSumner can you provide error message for this rule?

Sure, I'll update the issue to include a suggested error message.

[lifeart]

Done

[roomman]

@lifeart no, that's not valid.

@MelSumner, the mdn docs suggest it's okay to include a presentation element between the parent (eg 'menu') and child roles (eg 'menuitem"): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role

Are those docs incorrect or does this rule need to be updated?