ember/template-require-mandatory-role-attributes

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

Elements with ARIA roles must also include all required attributes for that role. This ensures that a given element possesses the necessary states and properties to behave consistently with user expectations for other elements with the same ARIA role.

This rule enforces that elements with an ARIA role also declare all required ARIA attributes for that role.

Examples

This rule forbids the following:

<template>
  <div role="option" />
  <CustomComponent role="checkbox" aria-required="true" />
  {{some-component role="heading"}}
</template>

This rule allows the following:

<template>
  <div role="option" aria-selected="false" />
  <CustomComponent role="checkbox" aria-required="true" aria-checked="false" />
  {{some-component role="heading" aria-level="2"}}

  {{! Native inputs supply required ARIA state for matching roles. Lookup is
      based on axobject-query's elementAXObjects + AXObjectRoles (see below). }}
  <input type="checkbox" role="switch" />
  <input type="checkbox" role="checkbox" />
  <input type="radio" role="radio" />
  <input type="range" role="slider" />
</template>

Semantic-role exemptions

When the role attribute explicitly declares a role that the native element already provides, the native element supplies the required ARIA state and the rule does not flag missing attributes. The exemption is looked up via axobject-query's elementAXObjects + AXObjectRoles maps, matching the approach used by eslint-plugin-jsx-a11y and @angular-eslint/template.

Exempt pairings include (non-exhaustive):

Element	Role	Required ARIA state supplied by
<input type="checkbox">	checkbox, switch	native checked state
<input type="radio">	radio	native checked state
<input type="range">	slider	native value / min / max
<input type="number">	spinbutton	native value / min / max (spinbutton's required aria-valuenow is derived from the native value)
<input type="text">	textbox	no required ARIA
<input type="search">	searchbox	no required ARIA

Undocumented pairings (e.g. <input type="checkbox" role="menuitemcheckbox"> — axobject-query does not list this) remain flagged.

References

• WAI-ARIA Roles
• WAI-ARIA APG — Switch pattern
• HTML-AAM — <input type="checkbox"> → checkbox role mapping — primary-spec source: HTML-AAM maps the native element to the checkbox role and derives aria-checked from the element's checkedness (and indeterminate for mixed). axobject-query encodes that mapping for tooling.
• axobject-query — AX-tree data source for the exemption lookup (secondary, encodes HTML-AAM)