Sync with ember-template-lint

NullVoxPopuli · NullVoxPopuli · commit 5bebdec17e73 · 2026-03-21T12:23:28.000-04:00
diff --git a/docs/rules/template-no-redundant-role.md b/docs/rules/template-no-redundant-role.md
@@ -4,8 +4,6 @@
 
 <!-- end auto-generated rule header -->
 
-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:
@@ -18,56 +16,51 @@ For example, if a landmark element is used, any role provided will either be red
 
 This rule **forbids** the following:
 
-```gjs
-<template><header role='banner'></header></template>
+```hbs
+<header role='banner'></header>
 ```
 
-```gjs
-<template><main role='main'></main></template>
+```hbs
+<main role='main'></main>
 ```
 
-```gjs
-<template><aside role='complementary'></aside></template>
+```hbs
+<aside role='complementary'></aside>
 ```
 
-```gjs
-<template><footer role='contentinfo'></footer></template>
+```hbs
+<footer role='contentinfo'></footer>
 ```
 
-```gjs
-<template><form role='form'></form></template>
+```hbs
+<form role='form'></form>
 ```
 
 This rule **allows** the following:
 
-```gjs
-<template><form role='search'></form></template>
+```hbs
+<form role='search'></form>
 ```
 
-```gjs
-<template><nav role='navigation'></nav></template>
+```hbs
+<nav role='navigation'></nav>
 ```
 
-```gjs
-<template><input role='combobox' /></template>
+```hbs
+<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.
+- boolean -- if `true`, default configuration is applied
 
-```js
-// .eslintrc.js
-module.exports = {
-  rules: {
-    'ember/template-no-redundant-role': ['error', { checkAllHTMLElements: false }],
-  },
-};
-```
+- object -- containing the following property:
+  - boolean -- `checkAllHTMLElements` -- if `true`, the rule checks for redundancy between any semantic HTML element with a default/implicit ARIA role and the role provided, instead of just landmark roles (default: `true`)
 
 ## References
 
-- [ARIA Roles](https://www.w3.org/TR/wai-aria-1.2/#role_definitions)
-- [HTML ARIA](https://www.w3.org/TR/html-aria/)
+- [Landmark Roles (WAI-ARIA spec)](https://www.w3.org/WAI/PF/aria/roles#landmark_roles)
+- [Using ARIA landmarks to identify regions of a page](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11)
+- [Document conformance requirements for use of ARIA attributes in HTML](https://www.w3.org/TR/html-aria/#docconformance)
+- [ARIA Spec, ARIA Adds Nothing to Default Semantics of Most HTML Elements](https://www.w3.org/TR/using-aria/#aria-does-nothing)
+- [Disabling a link](https://www.scottohara.me/blog/2021/05/28/disabled-links.html)
diff --git a/lib/rules/template-no-redundant-role.js b/lib/rules/template-no-redundant-role.js
@@ -88,7 +88,6 @@ module.exports = {
     docs: {
       description: 'disallow redundant role attributes',
       category: 'Accessibility',
-      recommended: false,
       url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-redundant-role.md',
       templateMode: 'both',
     },
diff --git a/tests/lib/rules/template-no-redundant-role.js b/tests/lib/rules/template-no-redundant-role.js
@@ -146,6 +146,14 @@ hbsRuleTester.run('template-no-redundant-role', rule, {
     '<button role="link"></button>',
     '<input type="checkbox" value="yes" checked />',
     '<input type="range" />',
+    {
+      code: '<body role="document"></body>',
+      options: [{ checkAllHTMLElements: false }],
+    },
+    {
+      code: '<dialog role="dialog" />',
+      options: [{ checkAllHTMLElements: false }],
+    },
     '<ul class="list" role="combobox"></ul>',
   ],
   invalid: [
@@ -235,5 +243,27 @@ hbsRuleTester.run('template-no-redundant-role', rule, {
         '<select name="color" id="color" multiple><option value="default-color">black</option></select>',
       errors: [{ message: 'Use of redundant or invalid role: listbox on <select> detected.' }],
     },
+    {
+      code: '<main role="main"></main>',
+      output: '<main></main>',
+      options: [{ checkAllHTMLElements: false }],
+      errors: [
+        {
+          message:
+            'Use of redundant or invalid role: main on <main> detected. If a landmark element is used, any role provided will either be redundant or incorrect.',
+        },
+      ],
+    },
+    {
+      code: '<aside role="complementary"></aside>',
+      output: '<aside></aside>',
+      options: [{ checkAllHTMLElements: false }],
+      errors: [
+        {
+          message:
+            'Use of redundant or invalid role: complementary on <aside> detected. If a landmark element is used, any role provided will either be redundant or incorrect.',
+        },
+      ],
+    },
   ],
 });
