feat(rules): add 4 jsx-a11y parity rules and fix 3 existing rule bugs

  Body:

  New rules (36 → 40):
  - anchor-is-valid: flags missing/invalid href and onClick-without-href
  - no-interactive-element-to-noninteractive-role: prevents role=none/presentation
    stripping semantics from button, a[href], input, select, textarea, summary
  - no-noninteractive-element-to-interactive-role: requires tabIndex + keyboard
    handler when adding interactive ARIA roles to static elements
  - no-redundant-roles: flags role attributes matching the element's implicit
    ARIA role (e.g. <button role=button>) with auto-fix suggestion

  Bug fixes:
  - image-alt: extend coverage to <input type=image> and <area>; allow empty
    alt on <area> without href (inactive image map areas)
  - link-text: fix false positive on <a><img alt=Home /></a> — img alt
    provides an accessible name for the link
  - form-label: remove cross-file false positive; a control with an id is
    now treated as having a labeling mechanism (label may be in another file)

  Bumps version to 0.15.0. recommended config: 24 → 28 rules,
  strict config: 36 → 40 rules.

Author: nolrm

CHANGELOG.md

@@ -7,21 +7,42 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.15.0] - 2026-02-23
+
+### Added
+- 4 new accessibility rules (total: 40 rules)
+  - `anchor-is-valid` — anchors must have a real href; flags empty `""`, `"#"`, and `javascript:` hrefs, and onClick-without-href (prefer `<button>`)
+  - `no-interactive-element-to-noninteractive-role` — prevents `role="none"` or `role="presentation"` on interactive elements (`button`, `a[href]`, `input`, `select`, `textarea`, `summary`)
+  - `no-noninteractive-element-to-interactive-role` — prevents interactive ARIA roles (button, link, checkbox, etc.) on non-interactive elements without both `tabIndex` and a keyboard event handler
+  - `no-redundant-roles` — flags explicit `role` attributes that match the element's implicit ARIA role (e.g. `<button role="button">`, `<nav role="navigation">`) with auto-fix suggestion
+
 ### Fixed
+- `image-alt` now also checks `<input type="image">` and `<area>` elements, not just `<img>`; empty alt on `<area>` without `href` is correctly allowed
+- `link-text` no longer false-positives on `<a><img alt="Home" /></a>` — an img child with a non-empty alt provides an accessible name for the link
+- `form-label` no longer false-positives when a form control has an `id` but its `<label for>` is in a different component file; presence of `id` is now treated as sufficient (label association may be elsewhere)
+
+### Changed
+- `recommended` config grows from 24 → 28 rules (new: `anchor-is-valid` as error, `no-interactive-element-to-noninteractive-role` as error, `no-noninteractive-element-to-interactive-role` as warn, `no-redundant-roles` as warn)
+- `strict` config grows from 36 → 40 rules (all new rules set to error)
+- Updated `config-presets.test.ts` rule counts (recommended: 28, strict: 40)
+
+---
+
+### Fixed (from 0.14.0 unreleased)
 - Fixed `./core` CJS export — `require('eslint-plugin-test-a11y-js/core')` now correctly exports `A11yChecker` instead of the ESLint plugin
 - Fixed `bin/eslint-with-progress.js` to work with both ESLint v8 and v9 (removed deprecated `useEslintrc` and `extensions` options)
 - Removed `vitest` from `peerDependencies` (should only be in devDependencies)
 - Replaced `TODO:` placeholder text in `link-text` autofix suggestions with user-friendly text
 
-### Changed
-- Updated `plugin-structure.test.ts` to verify all 36 rules (was stale at 6)
+### Changed (from 0.14.0 unreleased)
+- Updated `plugin-structure.test.ts` to verify all 40 rules
 - Enhanced `build-verification.test.ts` with formatter/formatter-progress file checks and export-to-disk validation
-- Rewrote `rule-structure.test.ts` to dynamically cover all 36 rules (was hardcoded to 6)
-- Rewrote `config-presets.test.ts` to test built plugin with exact rule counts (minimal: 3, recommended: 24, strict: 36)
+- Rewrote `rule-structure.test.ts` to dynamically cover all rule files
+- Rewrote `config-presets.test.ts` to test built plugin with exact rule counts (minimal: 3, recommended: 28, strict: 40)
 - Expanded `test:core` pipeline with config-presets, flat-config, plugin-structure, and all new integration tests
 - Clarified recommended config comment about excluded rules (no longer "temporarily disabled")
 
-### Added
+### Added (from 0.14.0 unreleased)
 - `package-publish-readiness.test.ts` — comprehensive publish gate covering npm pack contents, CJS require, export content validation, rule loading, version consistency, and package.json field checks
 - `formatter-output.test.ts` — functional tests for formatter and formatter-with-progress output
 - `bin-smoke.test.ts` — smoke test for bin/eslint-with-progress.js (shebang, syntax, structure)

README.md

@@ -10,7 +10,7 @@
 
 - ✅ **Zero config** - Works out of the box with React, Vue, and JSX
 - ✅ **Real-time feedback** - Catch issues in your editor, not in production
-- ✅ **36 accessibility rules** - Covers images, forms, buttons, landmarks, ARIA, focus, and more
+- ✅ **40 accessibility rules** - Covers images, forms, buttons, landmarks, ARIA, focus, and more
 - ✅ **Editor suggestions** - Get actionable fixes directly in your editor
 - ✅ **Dual API** - Use as ESLint plugin OR programmatic API
 - ✅ **Large project ready** - Minimal preset for incremental adoption
@@ -289,10 +289,10 @@ In VS Code and other editors with ESLint support, suggestions appear as Quick Fi
 
 ## ESLint Rules
 
-The plugin provides **36 accessibility rules**:
+The plugin provides **40 accessibility rules**:
 
 **Core rules:**
-- `test-a11y-js/image-alt` - Enforce images have alt attributes
+- `test-a11y-js/image-alt` - Enforce images, `input[type=image]`, and `area` elements have alt attributes
 - `test-a11y-js/button-label` - Enforce buttons have labels
 - `test-a11y-js/link-text` - Enforce links have descriptive text
 - `test-a11y-js/form-label` - Enforce form controls have labels
@@ -320,6 +320,9 @@ The plugin provides **36 accessibility rules**:
 **Focusable & ARIA rules:**
 - `test-a11y-js/no-aria-hidden-on-focusable` - Disallow aria-hidden on focusable elements
 - `test-a11y-js/no-role-presentation-on-focusable` - Disallow role="presentation" on focusable elements
+- `test-a11y-js/no-interactive-element-to-noninteractive-role` - Disallow role="none/presentation" on interactive elements (button, a, input, etc.)
+- `test-a11y-js/no-noninteractive-element-to-interactive-role` - Disallow interactive roles on non-interactive elements without keyboard support
+- `test-a11y-js/no-redundant-roles` - Disallow explicit roles that match the element's implicit ARIA role
 - `test-a11y-js/aria-activedescendant-has-tabindex` - Enforce aria-activedescendant targets are focusable
 
 **Event & keyboard rules:**
@@ -334,6 +337,7 @@ The plugin provides **36 accessibility rules**:
 - `test-a11y-js/heading-has-content` - Enforce headings have content
 - `test-a11y-js/img-redundant-alt` - Enforce img alt does not contain redundant words
 - `test-a11y-js/anchor-ambiguous-text` - Enforce link text is not generic
+- `test-a11y-js/anchor-is-valid` - Enforce anchors have valid href (not empty, `#`, or `javascript:`)
 - `test-a11y-js/accessible-emoji` - Enforce emoji have accessible labels
 - `test-a11y-js/autocomplete-valid` - Enforce autocomplete attribute is valid
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-test-a11y-js",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "ESLint accessibility (a11y) plugin for React, Vue, and JSX with flat-config (ESLint v9+) support and a matching runtime A11yChecker API. Alternative to eslint-plugin-jsx-a11y for modern design systems.",
   "main": "dist/linter/eslint-plugin/index.js",
   "module": "dist/linter/eslint-plugin/index.mjs",

src/linter/eslint-plugin/configs/recommended.ts

@@ -38,7 +38,13 @@ const recommended: RuleConfig = {
   // New rules - Moderate violations (warn)
   'test-a11y-js/click-events-have-key-events': 'warn',
   'test-a11y-js/no-static-element-interactions': 'warn',
-  'test-a11y-js/interactive-supports-focus': 'warn'
+  'test-a11y-js/interactive-supports-focus': 'warn',
+
+  // Phase 6: New rules
+  'test-a11y-js/anchor-is-valid': 'error',
+  'test-a11y-js/no-interactive-element-to-noninteractive-role': 'error',
+  'test-a11y-js/no-noninteractive-element-to-interactive-role': 'warn',
+  'test-a11y-js/no-redundant-roles': 'warn'
 
   // Not included in recommended (available in strict):
   // - aria-validation, semantic-html, form-validation

src/linter/eslint-plugin/configs/strict.ts

@@ -49,7 +49,12 @@ const strict: RuleConfig = {
   'test-a11y-js/anchor-ambiguous-text': 'error',
   'test-a11y-js/img-redundant-alt': 'error',
   'test-a11y-js/accessible-emoji': 'error',
-  'test-a11y-js/html-has-lang': 'error'
+  'test-a11y-js/html-has-lang': 'error',
+  // Phase 6: New rules
+  'test-a11y-js/anchor-is-valid': 'error',
+  'test-a11y-js/no-interactive-element-to-noninteractive-role': 'error',
+  'test-a11y-js/no-noninteractive-element-to-interactive-role': 'error',
+  'test-a11y-js/no-redundant-roles': 'error'
 }
 
 export default strict

src/linter/eslint-plugin/index.ts

@@ -64,6 +64,11 @@ import anchorAmbiguousText from './rules/anchor-ambiguous-text'
 import imgRedundantAlt from './rules/img-redundant-alt'
 import accessibleEmoji from './rules/accessible-emoji'
 import htmlHasLang from './rules/html-has-lang'
+// Phase 6: New rules (parity with jsx-a11y + bug fixes)
+import anchorIsValid from './rules/anchor-is-valid'
+import noInteractiveElementToNoninteractiveRole from './rules/no-interactive-element-to-noninteractive-role'
+import noNoninteractiveElementToInteractiveRole from './rules/no-noninteractive-element-to-interactive-role'
+import noRedundantRoles from './rules/no-redundant-roles'
 
 /**
  * ESLint plugin for accessibility checking
@@ -114,7 +119,12 @@ const plugin: ESLint.Plugin = {
     'anchor-ambiguous-text': anchorAmbiguousText,
     'img-redundant-alt': imgRedundantAlt,
     'accessible-emoji': accessibleEmoji,
-    'html-has-lang': htmlHasLang
+    'html-has-lang': htmlHasLang,
+    // Phase 6: New rules (parity with jsx-a11y + bug fixes)
+    'anchor-is-valid': anchorIsValid,
+    'no-interactive-element-to-noninteractive-role': noInteractiveElementToNoninteractiveRole,
+    'no-noninteractive-element-to-interactive-role': noNoninteractiveElementToInteractiveRole,
+    'no-redundant-roles': noRedundantRoles
   },
   configs: {
     minimal: {

src/linter/eslint-plugin/rules/anchor-is-valid.ts

@@ -0,0 +1,116 @@
+/**
+ * ESLint rule: anchor-is-valid
+ *
+ * Enforces that anchor elements have valid href attributes.
+ * Anchors without a real href are not valid links and should use
+ * a <button> element instead for clickable actions.
+ */
+
+import type { Rule } from 'eslint'
+import { getJSXAttribute, hasJSXAttribute } from '../utils/jsx-ast-utils'
+import { getVueAttribute } from '../utils/vue-ast-utils'
+import { isElementLike } from '../utils/component-mapping'
+
+const INVALID_HREFS = new Set(['', '#'])
+
+function isInvalidHref(value: string): boolean {
+  if (INVALID_HREFS.has(value)) return true
+  if (value.toLowerCase().startsWith('javascript:')) return true
+  return false
+}
+
+const rule: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce anchor elements have valid href attributes',
+      category: 'Accessibility',
+      recommended: true,
+      url: 'https://github.com/nolrm/eslint-plugin-test-a11y-js'
+    },
+    messages: {
+      missingHref: 'Anchor element must have an href attribute to be a valid link. Use a <button> for clickable actions.',
+      invalidHref: 'The href value "{{href}}" is not a valid URL. Use a real URL, or use a <button> for clickable actions.',
+      preferButton: 'Anchor elements with click handlers but no href should be <button> elements for proper keyboard accessibility.'
+    },
+    hasSuggestions: false,
+    fixable: undefined,
+    schema: []
+  },
+  create(context: Rule.RuleContext) {
+    return {
+      JSXOpeningElement(node: Rule.Node) {
+        const jsxNode = node as any
+
+        if (!jsxNode.name || jsxNode.name.type !== 'JSXIdentifier') {
+          return
+        }
+
+        if (jsxNode.name.name !== 'a' && !isElementLike(node, context, 'a')) {
+          return
+        }
+
+        const hrefAttr = getJSXAttribute(jsxNode, 'href')
+        const hasOnClick = hasJSXAttribute(jsxNode, 'onClick')
+
+        if (!hrefAttr) {
+          // No href at all
+          if (hasOnClick) {
+            context.report({ node, messageId: 'preferButton' })
+          } else {
+            context.report({ node, messageId: 'missingHref' })
+          }
+          return
+        }
+
+        // href exists — validate its value
+        if (hrefAttr.value?.type === 'Literal' && typeof hrefAttr.value.value === 'string') {
+          const hrefValue = hrefAttr.value.value
+          if (isInvalidHref(hrefValue)) {
+            context.report({
+              node,
+              messageId: 'invalidHref',
+              data: { href: hrefValue }
+            })
+          }
+        }
+      },
+
+      VElement(node: Rule.Node) {
+        const vueNode = node as any
+
+        if (vueNode.name !== 'a') {
+          return
+        }
+
+        const hrefAttr = getVueAttribute(vueNode, 'href')
+        const hasClickHandler = vueNode.startTag?.attributes?.some((attr: any) =>
+          attr.directive &&
+          attr.key?.name?.name === 'on' &&
+          attr.key?.argument?.name === 'click'
+        )
+
+        if (!hrefAttr) {
+          if (hasClickHandler) {
+            context.report({ node, messageId: 'preferButton' })
+          } else {
+            context.report({ node, messageId: 'missingHref' })
+          }
+          return
+        }
+
+        // href exists — validate its value
+        const hrefValue = hrefAttr.value?.value
+        if (typeof hrefValue === 'string' && isInvalidHref(hrefValue)) {
+          context.report({
+            node,
+            messageId: 'invalidHref',
+            data: { href: hrefValue }
+          })
+        }
+      }
+    }
+  }
+}
+
+export default rule

src/linter/eslint-plugin/rules/form-label.ts

@@ -24,66 +24,35 @@ const rule: Rule.RuleModule = {
     schema: []
   },
   create(context: Rule.RuleContext) {
-    // Track form controls and their labels in the current file
-    const formControls = new Map<string, any>()
-    const labels = new Map<string, any>()
-
     return {
       // Check JSX form control elements
       JSXOpeningElement(node: Rule.Node) {
         const jsxNode = node as any
-        
+
         // Only handle simple identifiers (not member expressions like <Form.Input>)
         if (!jsxNode.name || jsxNode.name.type !== 'JSXIdentifier') {
           return
         }
-        
+
         const tagName = jsxNode.name.name?.toLowerCase()
-        
+
         if (tagName === 'input' || tagName === 'select' || tagName === 'textarea') {
           // Check if it has aria-label or aria-labelledby
           const hasAriaLabel = hasJSXAttribute(jsxNode, 'aria-label')
           const hasAriaLabelledBy = hasJSXAttribute(jsxNode, 'aria-labelledby')
-          
-          // Get id attribute
-          const idAttr = jsxNode.attributes?.find((attr: any) => 
+
+          // Get id attribute — if present, a label may be in another component
+          const idAttr = jsxNode.attributes?.find((attr: any) =>
             attr.name?.name === 'id'
           )
           const id = idAttr?.value?.value
 
-          // If no aria-label, aria-labelledby, or id, report
+          // Report only when there is no labeling mechanism at all
           if (!hasAriaLabel && !hasAriaLabelledBy && !id) {
             context.report({
               node,
               messageId: 'missingLabel'
             })
-          } else if (id) {
-            // Store for later checking against label[for]
-            formControls.set(id, node)
-          }
-        }
-
-        // Check for label elements
-        if (tagName === 'label') {
-          const forAttr = jsxNode.attributes?.find((attr: any) => 
-            attr.name?.name === 'for' || attr.name?.name === 'htmlFor'
-          )
-          const forValue = forAttr?.value?.value
-          if (forValue) {
-            labels.set(forValue, node)
-          }
-        }
-      },
-
-      // After checking all nodes, verify label associations
-      'Program:exit'() {
-        // Check if form controls have matching labels
-        for (const [id, node] of formControls.entries()) {
-          if (!labels.has(id)) {
-            context.report({
-              node,
-              messageId: 'missingLabel'
-            })
           }
         }
       },
@@ -92,34 +61,22 @@ const rule: Rule.RuleModule = {
       VElement(node: Rule.Node) {
         const vueNode = node as any
         const tagName = vueNode.name?.toLowerCase()
-        
+
         if (tagName === 'input' || tagName === 'select' || tagName === 'textarea') {
           // Check if it has aria-label or aria-labelledby
           const hasAriaLabel = hasVueAttribute(vueNode, 'aria-label')
           const hasAriaLabelledBy = hasVueAttribute(vueNode, 'aria-labelledby')
-          
-          // Get id attribute
+
+          // Get id attribute — if present, a label may be in another component
           const idAttr = getVueAttribute(vueNode, 'id')
           const id = idAttr?.value?.value
 
-          // If no aria-label, aria-labelledby, or id, report
+          // Report only when there is no labeling mechanism at all
           if (!hasAriaLabel && !hasAriaLabelledBy && !id) {
             context.report({
               node,
               messageId: 'missingLabel'
             })
-          } else if (id) {
-            // Store for later checking against label[for]
-            formControls.set(id, node)
-          }
-        }
-
-        // Check for label elements
-        if (tagName === 'label') {
-          const forAttr = getVueAttribute(vueNode, 'for')
-          const forValue = forAttr?.value?.value
-          if (forValue) {
-            labels.set(forValue, node)
           }
         }
       }