test-a11y-js 0.8.0 → 0.8.2

package/README.md

@@ -129,6 +129,61 @@ module.exports = {
 - `plugin:test-a11y-js/react` - Optimized for React/JSX
 - `plugin:test-a11y-js/vue` - Optimized for Vue SFC
 
+#### Ignoring Files and Lines
+
+Sometimes you need to ignore specific files or lines. Here are your options:
+
+**Ignore a single line:**
+```jsx
+// eslint-disable-next-line test-a11y-js/image-alt
+<img src="decorative.jpg" alt="" />
+```
+
+**Ignore an entire file:**
+```jsx
+/* eslint-disable test-a11y-js/heading-order */
+// Entire file exempt from heading-order rule
+```
+
+**Ignore directories:**
+```javascript
+// .eslintrc.js
+module.exports = {
+  plugins: ['test-a11y-js'],
+  extends: ['plugin:test-a11y-js/recommended'],
+  ignorePatterns: [
+    '**/node_modules/**',
+    '**/dist/**',
+    '**/*.test.{js,ts,jsx,tsx}' // Optional: exclude test files
+  ]
+}
+```
+
+**Disable rules for specific files:**
+```javascript
+// .eslintrc.js
+module.exports = {
+  plugins: ['test-a11y-js'],
+  extends: ['plugin:test-a11y-js/recommended'],
+  overrides: [
+    {
+      files: ['**/legacy/**'],
+      rules: {
+        'test-a11y-js/**': 'warn' // Only warnings in legacy code
+      }
+    }
+  ]
+}
+```
+
+**Vue template ignore:**
+```vue
+<!-- eslint-disable-next-line test-a11y-js/image-alt -->
+<img src="photo.jpg" />
+```
+
+> **Best Practice:** Always add a comment explaining why you're ignoring a rule. For example: `// eslint-disable-next-line test-a11y-js/image-alt -- Decorative image, no semantic meaning`
+
 ### Quick Start for Large Projects
 
 ```javascript
@@ -166,7 +221,18 @@ const videoViolations = A11yChecker.checkVideoCaptions(element)
 const audioViolations = A11yChecker.checkAudioCaptions(element)
 const landmarkViolations = A11yChecker.checkLandmarks(element)
 const dialogViolations = A11yChecker.checkDialogModal(element)
+
+// Phase 1: ARIA, Semantic HTML, Form Validation
+const ariaRoleViolations = A11yChecker.checkAriaRoles(element)
+const ariaPropertyViolations = A11yChecker.checkAriaProperties(element)
+const ariaRelationshipViolations = A11yChecker.checkAriaRelationships(element)
+const accessibleNameViolations = A11yChecker.checkAccessibleName(element)
+const compositePatternViolations = A11yChecker.checkCompositePatterns(element)
+const semanticHTMLViolations = A11yChecker.checkSemanticHTML(element)
+const formValidationViolations = A11yChecker.checkFormValidationMessages(element)
 ```
+<｜tool▁calls▁begin｜><｜tool▁call▁begin｜>
+read_file
 
 ## API
 
@@ -362,6 +428,64 @@ function MyComponent() {
 </template>
 ```
 
+### ARIA Validation (Phase 1)
+
+```tsx
+// ❌ ESLint will catch these ARIA issues
+function MyComponent() {
+  return (
+    <div>
+      <div role="invalid-role">Content</div>  {/* Invalid role */}
+      <button role="button">Click</button>     {/* Redundant role */}
+      <div role="tab">Tab</div>                {/* Missing tablist context */}
+      <input aria-label="" />                  {/* Empty aria-label */}
+    </div>
+  )
+}
+
+// ✅ Fixed
+function MyComponent() {
+  return (
+    <div role="tablist">
+      <button>Click</button>                    {/* Native button, no role needed */}
+      <div role="tab" aria-controls="panel-1">Tab</div>
+      <input aria-label="Email address" />
+    </div>
+  )
+}
+```
+
+### Semantic HTML (Phase 1)
+
+```tsx
+// ❌ ESLint will catch semantic HTML misuse
+function MyComponent() {
+  return (
+    <div>
+      <div role="button" onClick={handleClick}>Click</div>  {/* Use <button> */}
+      <a>Link without href</a>                               {/* Missing href */}
+      <button><a href="/">Nested link</a></button>          {/* Nested interactive */}
+      <main>Content</main>
+      <main>Another main</main>                             {/* Multiple main */}
+    </div>
+  )
+}
+
+// ✅ Fixed
+function MyComponent() {
+  return (
+    <div>
+      <button onClick={handleClick}>Click</button>
+      <a href="/page">Link</a>
+      <button>Action</button>
+      <main>Content</main>
+    </div>
+  )
+}
+```
+<｜tool▁calls▁begin｜><｜tool▁call▁begin｜>
+run_terminal_cmd
+
 ## How It Compares
 
 | Feature | test-a11y-js | eslint-plugin-jsx-a11y | @axe-core/react |

package/dist/index.js

@@ -1832,7 +1832,10 @@ ${index + 1}. ${violation.id} (${violation.impact})`);
         if (!ids.has(id)) {
           ids.set(id, []);
         }
-        ids.get(id).push(el);
+        const elements = ids.get(id);
+        if (elements) {
+          elements.push(el);
+        }
       }
     }
     for (const [id, elements] of ids.entries()) {
@@ -4131,7 +4134,7 @@ var form_validation_default = rule16;
 var plugin = {
   meta: {
     name: "test-a11y-js",
-    version: "0.8.0"
+    version: "0.8.2"
   },
   rules: {
     "image-alt": image_alt_default,

package/dist/index.mjs

@@ -1813,7 +1813,10 @@ ${index + 1}. ${violation.id} (${violation.impact})`);
         if (!ids.has(id)) {
           ids.set(id, []);
         }
-        ids.get(id).push(el);
+        const elements = ids.get(id);
+        if (elements) {
+          elements.push(el);
+        }
       }
     }
     for (const [id, elements] of ids.entries()) {
@@ -4112,7 +4115,7 @@ var form_validation_default = rule16;
 var plugin = {
   meta: {
     name: "test-a11y-js",
-    version: "0.8.0"
+    version: "0.8.2"
   },
   rules: {
     "image-alt": image_alt_default,

package/dist/linter/eslint-plugin/index.js

@@ -1900,7 +1900,10 @@ ${index + 1}. ${violation.id} (${violation.impact})`);
         if (!ids.has(id)) {
           ids.set(id, []);
         }
-        ids.get(id).push(el);
+        const elements = ids.get(id);
+        if (elements) {
+          elements.push(el);
+        }
       }
     }
     for (const [id, elements] of ids.entries()) {
@@ -4130,7 +4133,7 @@ var form_validation_default = rule16;
 var plugin = {
   meta: {
     name: "test-a11y-js",
-    version: "0.8.0"
+    version: "0.8.2"
   },
   rules: {
     "image-alt": image_alt_default,

package/dist/linter/eslint-plugin/index.mjs

@@ -1882,7 +1882,10 @@ ${index + 1}. ${violation.id} (${violation.impact})`);
         if (!ids.has(id)) {
           ids.set(id, []);
         }
-        ids.get(id).push(el);
+        const elements = ids.get(id);
+        if (elements) {
+          elements.push(el);
+        }
       }
     }
     for (const [id, elements] of ids.entries()) {
@@ -4112,7 +4115,7 @@ var form_validation_default = rule16;
 var plugin = {
   meta: {
     name: "test-a11y-js",
-    version: "0.8.0"
+    version: "0.8.2"
   },
   rules: {
     "image-alt": image_alt_default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "test-a11y-js",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Zero-config accessibility testing for React, Vue & JSX. ESLint plugin + programmatic API. Catch a11y issues before production.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",