Skip to content

template-require-context-role.md

Latest commit

 

History

History
76 lines (57 loc) · 1.72 KB

template-require-context-role.md

File metadata and controls

76 lines (57 loc) · 1.72 KB

ember/template-require-context-role

💼 This rule is enabled in the following configs: strict-gjs, strict-gts.

Requires certain ARIA roles to be used in appropriate context.

Some ARIA roles must be contained within specific parent roles to be meaningful and accessible. For example, a role="listitem" must be inside an element with role="list".

Rule Details

This rule checks that context-dependent ARIA roles are used within the appropriate parent roles.

Roles requiring context:

  • listitem → must be in list
  • option → must be in listbox
  • tab → must be in tablist
  • menuitem, menuitemcheckbox, menuitemradio → must be in menu or menubar
  • treeitem → must be in tree
  • row → must be in table, grid, treegrid, or rowgroup
  • And more...

Examples

Examples of incorrect code for this rule:

<template>
  <div role="listitem">Item</div>
</template>
<template>
  <div role="tab">Tab 1</div>
</template>
<template>
  <div role="menuitem">Item</div>
</template>

Examples of correct code for this rule:

<template>
  <ul role="list">
    <li role="listitem">Item</li>
  </ul>
</template>
<template>
  <div role="tablist">
    <div role="tab">Tab 1</div>
  </div>
</template>
<template>
  <div role="menu">
    <div role="menuitem">Item</div>
  </div>
</template>

References