Skip to content

template-no-invalid-role.md

Latest commit

 

History

History
82 lines (59 loc) · 2.06 KB

template-no-invalid-role.md

File metadata and controls

82 lines (59 loc) · 2.06 KB

ember/template-no-invalid-role

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

Disallows invalid ARIA roles in templates.

ARIA roles must be valid according to the ARIA specification. Using invalid roles can confuse assistive technologies and reduce accessibility.

Rule Details

This rule checks that all role attributes contain valid ARIA role values. It also disallows role="presentation" and role="none" on semantic HTML elements, as doing so strips meaning from elements that inherently convey information.

Examples

Examples of incorrect code for this rule:

<template>
  <div role="invalid">Content</div>
</template>
<template>
  <div role="btn">Should be "button"</div>
</template>
<template>
  <button role="presentation">Content</button>
</template>
<template>
  <nav role="none">Navigation</nav>
</template>

Examples of correct code for this rule:

<template>
  <div role="button">Content</div>
</template>
<template>
  <div role="navigation">Nav</div>
</template>
<template>
  <div role="presentation">Decorative</div>
</template>
<template>
  <div>No role attribute</div>
</template>

Migration

  • If violations are found, remediation should be planned to replace the semantic HTML with the div element. Additional CSS will likely be required.

Options

Name Type Default Description
catchNonexistentRoles boolean true When true, reports roles that don't exist in the ARIA spec.

References