Extract rule: template-no-positive-tabindex

Author: NullVoxPopuli

README.md

@@ -197,6 +197,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-nested-interactive](docs/rules/template-no-nested-interactive.md)                                   | disallow nested interactive elements                                             |    |    |    |
 | [template-no-nested-landmark](docs/rules/template-no-nested-landmark.md)                                         | disallow nested landmark elements                                                |    |    |    |
 | [template-no-pointer-down-event-binding](docs/rules/template-no-pointer-down-event-binding.md)                   | disallow pointer down event bindings                                             |    |    |    |
+| [template-no-positive-tabindex](docs/rules/template-no-positive-tabindex.md)                                     | disallow positive tabindex values                                                |    |    |    |
 | [template-no-redundant-role](docs/rules/template-no-redundant-role.md)                                           | disallow redundant role attributes                                               |    | 🔧 |    |
 | [template-no-unsupported-role-attributes](docs/rules/template-no-unsupported-role-attributes.md)                 | disallow ARIA attributes that are not supported by the element role              |    | 🔧 |    |
 | [template-no-whitespace-within-word](docs/rules/template-no-whitespace-within-word.md)                           | disallow excess whitespace within words (e.g. "W e l c o m e")                   |    |    |    |

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

@@ -0,0 +1,67 @@
+# ember/template-no-positive-tabindex
+
+<!-- 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:
+
+> Avoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on assistive technology to navigate and operate page content. Instead, write the document with the elements in a logical sequence.
+
+This rule prevents usage of any `tabindex` values other than `0` and `-1`. It does allow for dynamic values (choosing which value to show based on some condition / helper / etc), but only if that inline `if` condition has static `0`/`-1` as the value.
+
+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:
+
+```gjs
+<template>
+  <div tabindex="0">Content</div>
+</template>
+```
+
+```gjs
+<template>
+  <div tabindex="-1">Content</div>
+</template>
+```
+
+```gjs
+<template>
+  <button>Click</button>
+</template>
+```
+
+## 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)

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

@@ -0,0 +1,123 @@
+/**
+ * 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.
+ */
+function isTabindexSafe(attrValue) {
+  if (!attrValue) {
+    return true;
+  }
+
+  // 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;
+  }
+
+  // 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;
+    }
+    if (path.type === 'GlimmerStringLiteral') {
+      const value = Number.parseInt(path.original, 10);
+      return !Number.isNaN(value) && value <= 0;
+    }
+
+    // Handle conditional expressions like {{if this.show -1 0}}
+    if (
+      path.type === 'GlimmerPathExpression' &&
+      (path.original === 'if' || path.original === 'unless')
+    ) {
+      return isConditionalTabindexSafe(attrValue.params);
+    }
+
+    // Any other dynamic value (variable, boolean, etc.) is not verifiably safe
+    return false;
+  }
+
+  // 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 false;
+  }
+
+  return false;
+}
+
+/**
+ * Check that all branches of a conditional (if/unless) expression are safe.
+ */
+function isConditionalTabindexSafe(params) {
+  if (!params) {
+    return false;
+  }
+
+  // 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;
+      }
+    } else if (param.type === 'GlimmerStringLiteral') {
+      const val = Number.parseInt(param.original, 10);
+      if (Number.isNaN(val) || val > 0) {
+        return false;
+      }
+    } else {
+      // Dynamic value in branch — not verifiably safe
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow positive tabindex values',
+      category: 'Accessibility',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-positive-tabindex.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      positive: 'Avoid positive integer values for tabindex.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-positive-tabindex.js',
+      docs: 'docs/rule/no-positive-tabindex.md',
+      tests: 'test/unit/rules/no-positive-tabindex-test.js',
+    },
+  },
+
+  create(context) {
+    return {
+      GlimmerElementNode(node) {
+        const tabindexAttr = node.attributes?.find((attr) => attr.name === 'tabindex');
+
+        if (!tabindexAttr || !tabindexAttr.value) {
+          return;
+        }
+
+        if (!isTabindexSafe(tabindexAttr.value)) {
+          context.report({
+            node: tabindexAttr,
+            messageId: 'positive',
+          });
+        }
+      },
+    };
+  },
+};