template-no-redundant-role.md

ember/template-no-redundant-role

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

🔧 This rule is automatically fixable by the --fix CLI option.

Disallows redundant role attributes on semantic HTML elements.

The rule checks for redundancy between any semantic HTML element with a default/implicit ARIA role and the role provided.

For example, if a landmark element is used, any role provided will either be redundant or incorrect. This rule ensures that no role attribute is placed on any of the landmark elements, with the following exceptions:

• a nav element with the navigation role to make the structure of the page more accessible to user agents
• a form element with the search role to identify the form's search functionality
• a input element with combobox role to identify the input as a combobox

Examples

This rule forbids the following:

<header role='banner'></header>

<main role='main'></main>

<aside role='complementary'></aside>

<footer role='contentinfo'></footer>

<form role='form'></form>

This rule allows the following:

<form role='search'></form>

<nav role='navigation'></nav>

<input role='combobox' />

Configuration

This rule accepts an options object with the following properties:

• checkAllHTMLElements (default: true) - When set to true, checks all HTML elements for redundant roles. When false, only checks landmark elements.

// .eslintrc.js
module.exports = {
  rules: {
    'ember/template-no-redundant-role': ['error', { checkAllHTMLElements: false }],
  },
};

References

• ARIA Roles
• HTML ARIA