react-a11y-mining-prime-field-1q5l

Read-only JSSG mining package for React accessibility issues in .tsx and .jsx files. It is designed for Codemod Insights dashboards and does not rewrite source files.

What It Detects

• button-missing-type: <button> without a type attribute
• img-missing-alt: <img> without an alt attribute
• anchor-missing-href: <a> without an href attribute
• clickable-div-missing-keyboard-support: <div onClick={...}> without onKeyDown, onKeyUp, or onKeyPress

Scope And Preserve Cases

• Targets React JSX in .tsx and .jsx files
• Matches native lowercase HTML tags only, not component names like <Button> or <Link>
• Treats an issue as present only when the relevant attribute is missing entirely
• Leaves source code unchanged and returns null for every file
• Ignores node_modules, dist, and build

Metric Design

Workflow step name: analyze

Metric: a11y_issue_instances
Cardinality keys:

• issueType
• element
• severity
• language
• topLevelArea
• pathBucket
• componentOrFile

Metric: a11y_issue_files
Cardinality keys:

• issueType
• topLevelArea
• pathBucket
• language

Metric: a11y_issue_types_present
Cardinality keys:

• issueType

Cardinality Notes

• severity is always warning
• language is derived from the file extension and is tsx or jsx
• topLevelArea is the first path segment such as apps or packages
• pathBucket is the first two path segments when available, such as apps/web or packages/ui
• componentOrFile is the file basename without its extension

Insights Queries

Issue type rollup:

ts
Copy
{
  type: "jssg",
  source: {
    type: "package",
    packageReference: {
      packageId: "<returned packageId>",
      packageVersionId: "<returned packageVersionId>",
      stepName: "analyze"
    }
  },
  select: { type: "metric", metricName: "a11y_issue_instances" },
  repositoryReference: {
    type: "direct",
    repositories: [{ repositoryId: "964753910", gitAccount: { id: 17, provider: "github" } }]
  },
  groupBy: [{ name: "cardinality", key: "issueType" }]
}

Path bucket rollup:

ts
Copy
{
  type: "jssg",
  source: {
    type: "package",
    packageReference: {
      packageId: "<returned packageId>",
      packageVersionId: "<returned packageVersionId>",
      stepName: "analyze"
    }
  },
  select: { type: "metric", metricName: "a11y_issue_files" },
  repositoryReference: {
    type: "direct",
    repositories: [{ repositoryId: "964753910", gitAccount: { id: 17, provider: "github" } }]
  },
  groupBy: [{ name: "cardinality", key: "pathBucket" }]
}

Distinct issue types present:

ts
Copy
{
  type: "jssg",
  source: {
    type: "package",
    packageReference: {
      packageId: "<returned packageId>",
      packageVersionId: "<returned packageVersionId>",
      stepName: "analyze"
    }
  },
  select: { type: "metric", metricName: "a11y_issue_types_present" },
  repositoryReference: {
    type: "direct",
    repositories: [{ repositoryId: "964753910", gitAccount: { id: 17, provider: "github" } }]
  },
  groupBy: [{ name: "cardinality", key: "issueType" }]
}

Development

bash
Copy
pnpm test
codemod workflow validate -w workflow.yaml
pnpm check-types
codemod publish

Validation Coverage

• Fixture tests assert that source files remain unchanged
• metrics.json snapshots assert expected metric increments for both .tsx and .jsx fixtures when the JSSG harness emits metrics snapshots
• Package validation can additionally verify workflow and type-check health

License

MIT