ember/template-require-context-role

April 20, 2026 · View on GitHub

💼 This rule is enabled in the 📋 template-lint-migration config.

`<* role><* role /></*>`

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". You may place intermediate elements with role="presentation" or role="none" to remove their semantic meaning.

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

Examples

This rule allows the following:

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

<div role='menu'>
  <div role='presentation'>
    <a role='menuitem'>Item One</a>
  </div>
  <div role='presentation'>
    <a role='menuitem'>Item Two</a>
  </div>
</div>

This rule forbids the following:

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

<div role='menu'>
  <div role='button'>
    <a role='menuitem'>Item One</a>
  </div>
  <div>
    <a role='menuitem'>Item Two</a>
  </div>
</div>

<* role><* role /></*>

Roles to check

Examples

References

`<* role><* role /></*>`