Sync with ember-template-lint

Author: NullVoxPopuli

docs/rules/template-no-positive-tabindex.md

@@ -2,14 +2,6 @@
 
 <!-- end auto-generated rule header -->
 
-Disallows positive `tabindex` values.
-
-Positive `tabindex` values disrupt the natural tab order of the page, making keyboard navigation confusing for users. This is especially problematic for users who rely on keyboard navigation, such as those with motor disabilities.
-
-## Rule Details
-
-This rule disallows positive integer values for the `tabindex` attribute. Only `0` (for naturally focusable elements) and `-1` (for programmatically focusable elements) are allowed.
-
 ## `<* tabindex>`
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) explains the motivation of this rule nicely:
@@ -22,46 +14,29 @@ This rule takes no arguments.
 
 ## Examples
 
-Examples of **incorrect** code for this rule:
-
-```gjs
-<template>
-  <div tabindex="1">Content</div>
-</template>
-```
-
-```gjs
-<template>
-  <button tabindex="2">Click</button>
-</template>
-```
-
-Examples of **correct** code for this rule:
+This rule **allows** the following:
 
-```gjs
-<template>
-  <div tabindex="0">Content</div>
-</template>
+```hbs
+<span tabindex='0'>foo</span>
+<span tabindex='-1'>bar</span>
+<span tabindex={{0}}>baz</span>
+<button tabindex={{if this.isHidden '-1'}}>baz</button>
+<div role='tab' tabindex={{if this.isHidden '-1' '0'}}>baz</div>
 ```
 
-```gjs
-<template>
-  <div tabindex="-1">Content</div>
-</template>
-```
+This rule **forbids** the following:
 
-```gjs
-<template>
-  <button>Click</button>
-</template>
+```hbs
+<span tabindex='5'>foo</span>
+<span tabindex='3'>bar</span>
+<span tabindex={{dynamicValue}}>zoo</span>
+<span tabindex='1'>baz</span>
+<span tabindex='2'>never really sure what goes after baz</span>
 ```
 
-## When Not To Use It
-
-This rule should generally always be enabled for accessibility. However, if you have a specific use case where positive tabindex values are necessary and well-tested, you may disable it.
-
 ## References
 
-- [eslint-plugin-ember template-no-positive-tabindex](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-positive-tabindex.md)
-- [MDN tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
-- [WebAIM: Keyboard Accessibility](https://webaim.org/techniques/keyboard/tabindex)
+1. [AX_FOCUS_03](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_03)
+1. [w3.org/TR/wai-aria-practices/#kbd_general_between](https://www.w3.org/TR/wai-aria-practices/#kbd_general_between)
+1. [w3.org/TR/2009/WD-wai-aria-practices-20090224/#focus_tabindex](https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/#focus_tabindex)
+1. [MDN: tabindex documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)

lib/rules/template-no-positive-tabindex.js

@@ -1,82 +1,91 @@
 /**
- * Check if a tabindex value is statically verifiable as safe (0 or negative).
- * Returns true only if we can confirm the value is not positive.
- * Dynamic, non-numeric, or boolean values are considered unsafe.
+ * Check a tabindex attribute value and return the violation type, if any.
+ * Returns null if safe, 'positive' if the value is a positive integer,
+ * or 'mustBeNegativeNumeric' if the value is non-numeric/dynamic/boolean.
  */
-function isTabindexSafe(attrValue) {
+function getTabindexViolation(attrValue) {
   if (!attrValue) {
-    return true;
+    return null;
   }
 
   // Handle simple text values like tabindex="0" or tabindex="-1"
   if (attrValue.type === 'GlimmerTextNode') {
     const value = Number.parseInt(attrValue.chars, 10);
-    return !Number.isNaN(value) && value <= 0;
+    if (Number.isNaN(value)) {
+      return 'mustBeNegativeNumeric';
+    }
+    return value > 0 ? 'positive' : null;
   }
 
   // Handle mustache statements like tabindex={{-1}} or tabindex={{someProperty}}
   if (attrValue.type === 'GlimmerMustacheStatement') {
     const path = attrValue.path;
 
     if (path.type === 'GlimmerNumberLiteral') {
-      return Number.parseInt(path.original, 10) <= 0;
+      return Number.parseInt(path.original, 10) > 0 ? 'positive' : null;
     }
     if (path.type === 'GlimmerStringLiteral') {
       const value = Number.parseInt(path.original, 10);
-      return !Number.isNaN(value) && value <= 0;
+      if (Number.isNaN(value)) {
+        return 'mustBeNegativeNumeric';
+      }
+      return value > 0 ? 'positive' : null;
     }
 
     // Handle conditional expressions like {{if this.show -1 0}}
     if (
       path.type === 'GlimmerPathExpression' &&
       (path.original === 'if' || path.original === 'unless')
     ) {
-      return isConditionalTabindexSafe(attrValue.params);
+      return getConditionalTabindexViolation(attrValue.params);
     }
 
     // Any other dynamic value (variable, boolean, etc.) is not verifiably safe
-    return false;
+    return 'mustBeNegativeNumeric';
   }
 
   // Handle concat statements like tabindex="{{-1}}" or tabindex="{{false}}"
   if (attrValue.type === 'GlimmerConcatStatement') {
     const parts = attrValue.parts || [];
     if (parts.length > 0 && parts[0].type === 'GlimmerMustacheStatement') {
-      return isTabindexSafe(parts[0]);
+      return getTabindexViolation(parts[0]);
     }
-    return false;
+    return 'mustBeNegativeNumeric';
   }
 
-  return false;
+  return 'mustBeNegativeNumeric';
 }
 
 /**
  * Check that all branches of a conditional (if/unless) expression are safe.
  */
-function isConditionalTabindexSafe(params) {
+function getConditionalTabindexViolation(params) {
   if (!params) {
-    return false;
+    return 'mustBeNegativeNumeric';
   }
 
   // Check the value branches (params[1] and optionally params[2])
   for (let i = 1; i < params.length && i < 3; i++) {
     const param = params[i];
     if (param.type === 'GlimmerNumberLiteral') {
       if (Number.parseInt(param.original, 10) > 0) {
-        return false;
+        return 'positive';
       }
     } else if (param.type === 'GlimmerStringLiteral') {
       const val = Number.parseInt(param.original, 10);
-      if (Number.isNaN(val) || val > 0) {
-        return false;
+      if (Number.isNaN(val)) {
+        return 'mustBeNegativeNumeric';
+      }
+      if (val > 0) {
+        return 'positive';
       }
     } else {
       // Dynamic value in branch — not verifiably safe
-      return false;
+      return 'mustBeNegativeNumeric';
     }
   }
 
-  return true;
+  return null;
 }
 
 /** @type {import('eslint').Rule.RuleModule} */
@@ -93,6 +102,7 @@ module.exports = {
     schema: [],
     messages: {
       positive: 'Avoid positive integer values for tabindex.',
+      mustBeNegativeNumeric: 'Tabindex values must be negative numeric.',
     },
     originallyFrom: {
       name: 'ember-template-lint',
@@ -111,10 +121,11 @@ module.exports = {
           return;
         }
 
-        if (!isTabindexSafe(tabindexAttr.value)) {
+        const violation = getTabindexViolation(tabindexAttr.value);
+        if (violation) {
           context.report({
             node: tabindexAttr,
-            messageId: 'positive',
+            messageId: violation,
           });
         }
       },

tests/lib/rules/template-no-positive-tabindex.js

@@ -16,19 +16,6 @@ const ruleTester = new RuleTester({
 
 ruleTester.run('template-no-positive-tabindex', rule, {
   valid: [
-    `<template>
-      <div tabindex="0">Content</div>
-    </template>`,
-    `<template>
-      <div tabindex="-1">Content</div>
-    </template>`,
-    `<template>
-      <button>Click</button>
-    </template>`,
-    `<template>
-      <div>No tabindex</div>
-    </template>`,
-
     '<template><button tabindex="0"></button></template>',
     '<template><button tabindex="-1"></button></template>',
     '<template><button tabindex={{-1}}>baz</button></template>',
@@ -44,47 +31,10 @@ ruleTester.run('template-no-positive-tabindex', rule, {
   ],
 
   invalid: [
-    {
-      code: `<template>
-        <div tabindex="1">Content</div>
-      </template>`,
-      output: null,
-      errors: [
-        {
-          message: 'Avoid positive integer values for tabindex.',
-          type: 'GlimmerAttrNode',
-        },
-      ],
-    },
-    {
-      code: `<template>
-        <div tabindex="5">Content</div>
-      </template>`,
-      output: null,
-      errors: [
-        {
-          message: 'Avoid positive integer values for tabindex.',
-          type: 'GlimmerAttrNode',
-        },
-      ],
-    },
-    {
-      code: `<template>
-        <button tabindex="2">Click</button>
-      </template>`,
-      output: null,
-      errors: [
-        {
-          message: 'Avoid positive integer values for tabindex.',
-          type: 'GlimmerAttrNode',
-        },
-      ],
-    },
-
     {
       code: '<template><button tabindex={{someProperty}}></button></template>',
       output: null,
-      errors: [{ message: 'Avoid positive integer values for tabindex.' }],
+      errors: [{ message: 'Tabindex values must be negative numeric.' }],
     },
     {
       code: '<template><button tabindex="1"></button></template>',
@@ -94,17 +44,17 @@ ruleTester.run('template-no-positive-tabindex', rule, {
     {
       code: '<template><button tabindex="text"></button></template>',
       output: null,
-      errors: [{ message: 'Avoid positive integer values for tabindex.' }],
+      errors: [{ message: 'Tabindex values must be negative numeric.' }],
     },
     {
       code: '<template><button tabindex={{true}}></button></template>',
       output: null,
-      errors: [{ message: 'Avoid positive integer values for tabindex.' }],
+      errors: [{ message: 'Tabindex values must be negative numeric.' }],
     },
     {
       code: '<template><button tabindex="{{false}}"></button></template>',
       output: null,
-      errors: [{ message: 'Avoid positive integer values for tabindex.' }],
+      errors: [{ message: 'Tabindex values must be negative numeric.' }],
     },
     {
       code: '<template><button tabindex="{{5}}"></button></template>',
@@ -149,7 +99,7 @@ const hbsRuleTester = new RuleTester({
   parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
 });
 
-hbsRuleTester.run('template-no-positive-tabindex (hbs)', rule, {
+hbsRuleTester.run('template-no-positive-tabindex', rule, {
   valid: [
     '<button tabindex="0"></button>',
     '<button tabindex="-1"></button>',
@@ -168,7 +118,7 @@ hbsRuleTester.run('template-no-positive-tabindex (hbs)', rule, {
     {
       code: '<button tabindex={{someProperty}}></button>',
       output: null,
-      errors: [{ message: 'Avoid positive integer values for tabindex.' }],
+      errors: [{ message: 'Tabindex values must be negative numeric.' }],
     },
     {
       code: '<button tabindex="1"></button>',
@@ -178,17 +128,17 @@ hbsRuleTester.run('template-no-positive-tabindex (hbs)', rule, {
     {
       code: '<button tabindex="text"></button>',
       output: null,
-      errors: [{ message: 'Avoid positive integer values for tabindex.' }],
+      errors: [{ message: 'Tabindex values must be negative numeric.' }],
     },
     {
       code: '<button tabindex={{true}}></button>',
       output: null,
-      errors: [{ message: 'Avoid positive integer values for tabindex.' }],
+      errors: [{ message: 'Tabindex values must be negative numeric.' }],
     },
     {
       code: '<button tabindex="{{false}}"></button>',
       output: null,
-      errors: [{ message: 'Avoid positive integer values for tabindex.' }],
+      errors: [{ message: 'Tabindex values must be negative numeric.' }],
     },
     {
       code: '<button tabindex="{{5}}"></button>',