@wix/agent-skills 1.18.2 → 1.19.1

package/skills/wix-app/scripts/scan-a11y-eslint.cjs

@@ -3,6 +3,7 @@
 
 // oxlint-disable no-console preserve-caught-error
 
+const fs = require('fs');
 const path = require('path');
 const { createRequire } = require('module');
 
@@ -34,10 +35,11 @@ const RULE_CONFIG = {
   'jsx-a11y/no-aria-hidden-on-focusable': 'error',
   'jsx-a11y/no-autofocus': 'error',
   'jsx-a11y/no-distracting-elements': 'error',
-  'jsx-a11y/no-interactive-element-to-noninteractive-role': 'error',
+  'jsx-a11y/no-interactive-element-to-noninteractive-role': ['error', { canvas: ['img'] }],
   'jsx-a11y/no-noninteractive-element-interactions': 'error',
   'jsx-a11y/no-noninteractive-element-to-interactive-role': 'error',
-  'jsx-a11y/no-noninteractive-tabindex': 'error',
+  // A tabpanel with no focusable content takes tabIndex=0 (ARIA Authoring Practices).
+  'jsx-a11y/no-noninteractive-tabindex': ['error', { roles: ['tabpanel'] }],
   'jsx-a11y/no-redundant-roles': 'error',
   'jsx-a11y/no-static-element-interactions': 'error',
   'jsx-a11y/prefer-tag-over-role': 'error',
@@ -51,6 +53,86 @@ function toRelative(filePath) {
   return path.relative(ROOT, filePath) || filePath;
 }
 
+/** DOM handler → SDK prop it forwards (FUNCTION-HANDLERS.md). */
+const SDK_HANDLER_PROPS = {
+  onClick: 'onClick',
+  onDoubleClick: 'onDblClick',
+  onMouseEnter: 'onMouseIn',
+  onMouseLeave: 'onMouseOut',
+};
+const isSdkRoot = (tag) => /\bid=\{\s*(?:props\.)?id\s*\}/.test(tag);
+
+/** Every handler on the tag forwards its SDK prop, `onClick={onClick}` or `onMouseEnter={props.onMouseIn}`; anything else makes the root a control. */
+function forwardsOnlySdkHandlers(tag) {
+  const handlers = [...tag.matchAll(/\b(on[A-Z]\w*)=\{([^}]*)\}/g)];
+  return (
+    handlers.length > 0 &&
+    handlers.every(([, name, value]) => {
+      const sdkProp = SDK_HANDLER_PROPS[name];
+      return Boolean(sdkProp) && value.trim().replace(/^props\./, '') === sdkProp;
+    })
+  );
+}
+
+/** Roles whose native element cannot express a styled component. */
+const ROLES_WITHOUT_NATIVE_TAG = new Set(['img', 'presentation', 'none', 'group', 'status']);
+
+/**
+ * `role="img"` or `role={cond ? 'img' : undefined}`: every string literal in the role
+ * attribute must be an exempt role, so `role={cond ? 'button' : 'img'}` stays flagged.
+ */
+function roleHasNoNativeTag(tag) {
+  const attr = tag.match(/\brole=(?:"[^"]*"|'[^']*'|\{[^}]*\})/);
+  if (!attr) return false;
+  const literals = [...attr[0].slice(5).matchAll(/["']([^"']*)["']/g)].map((m) => m[1]);
+  return literals.length > 0 && literals.every((role) => ROLES_WITHOUT_NATIVE_TAG.has(role));
+}
+
+/**
+ * Editor React Component patterns that jsx-a11y reads as defects. A rule in
+ * `rules` is skipped when the opening tag of the reported element matches `tag`.
+ */
+const EXEMPTIONS = [
+  {
+    // SDK handlers (`onClick`, `onMouseIn`, ...) are forwarded on the root
+    // element, which carries `id={id}`; the root itself is not the control.
+    rules: new Set([
+      'jsx-a11y/click-events-have-key-events',
+      'jsx-a11y/mouse-events-have-key-events',
+      'jsx-a11y/no-noninteractive-element-interactions',
+      'jsx-a11y/no-static-element-interactions',
+    ]),
+    tag: (tag) => isSdkRoot(tag) && forwardsOnlySdkHandlers(tag),
+  },
+  {
+    // Roles whose native element cannot express a styled component: graphics
+    // (svg, canvas, star ratings), decorative wrappers, widget groups, live
+    // regions. axe still requires their names (`role-img-alt`).
+    rules: new Set(['jsx-a11y/prefer-tag-over-role']),
+    tag: roleHasNoNativeTag,
+  },
+];
+
+/** Text of the opening tag that contains the reported range. */
+function openingTag(source, msg) {
+  const lines = source.split('\n');
+  const offset =
+    lines.slice(0, msg.line - 1).reduce((n, line) => n + line.length + 1, 0) + msg.column - 1;
+  const start = source.lastIndexOf('<', offset);
+  if (start === -1) return '';
+  // The tag ends at the first `>` outside braces, so `=>` inside handlers does not count.
+  let depth = 0;
+  for (let i = start; i < source.length; i++) {
+    if (source[i] === '{') depth++;
+    else if (source[i] === '}') depth--;
+    else if (source[i] === '>' && depth === 0) return source.slice(start, i);
+  }
+  return '';
+}
+
+const isExempt = (source, msg) =>
+  EXEMPTIONS.some((x) => x.rules.has(msg.ruleId) && x.tag(openingTag(source, msg)));
+
 function severityLabel(severity) {
   if (severity === 2) return 'error';
   if (severity === 1) return 'warning';
@@ -117,22 +199,11 @@ function createEslint() {
   }
 }
 
-async function main() {
-  const files = process.argv.slice(2);
-  if (files.length === 0) {
-    console.log(
-      JSON.stringify(
-        {
-          error: 'No files specified.',
-          usage: 'node <SKILL_ROOT>/scripts/scan-a11y-eslint.cjs <file1> [file2] ...',
-        },
-        null,
-        2,
-      ),
-    );
-    process.exit(1);
-  }
-
+/**
+ * Lint the given files with the jsx-a11y rule set.
+ * Returns the same report shape the CLI prints.
+ */
+async function scan(files) {
   const absoluteFiles = files.map((f) => path.resolve(f));
 
   const eslint = createEslint();
@@ -144,6 +215,7 @@ async function main() {
 
   for (const result of results) {
     const relFile = toRelative(result.filePath);
+    const source = () => result.source || fs.readFileSync(result.filePath, 'utf8');
 
     for (const msg of result.messages) {
       if (msg.fatal) {
@@ -157,6 +229,7 @@ async function main() {
       }
 
       if (!msg.ruleId || !msg.ruleId.startsWith('jsx-a11y/')) continue;
+      if (isExempt(source(), msg)) continue;
 
       findings.push({
         file: relFile,
@@ -176,7 +249,7 @@ async function main() {
     ruleBreakdown[f.rule] = (ruleBreakdown[f.rule] || 0) + 1;
   }
 
-  const output = {
+  return {
     meta: {
       filesScanned: files.length,
       engine: 'eslint + eslint-plugin-jsx-a11y',
@@ -191,11 +264,32 @@ async function main() {
       ruleBreakdown,
     },
   };
+}
+
+async function main() {
+  const files = process.argv.slice(2);
+  if (files.length === 0) {
+    console.log(
+      JSON.stringify(
+        {
+          error: 'No files specified.',
+          usage: 'node <SKILL_ROOT>/scripts/scan-a11y-eslint.cjs <file1> [file2] ...',
+        },
+        null,
+        2,
+      ),
+    );
+    process.exit(1);
+  }
 
-  console.log(JSON.stringify(output, null, 2));
+  console.log(JSON.stringify(await scan(files), null, 2));
 }
 
-main().catch((err) => {
-  console.error(JSON.stringify({ error: err.message }, null, 2));
-  process.exit(1);
-});
+module.exports = { scan, RULE_CONFIG };
+
+if (require.main === module) {
+  main().catch((err) => {
+    console.error(JSON.stringify({ error: err.message }, null, 2));
+    process.exit(1);
+  });
+}