@tanstack/devtools-a11y 0.0.1 → 0.1.1

package/package.json

@@ -1,10 +1,113 @@
 {
   "name": "@tanstack/devtools-a11y",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @tanstack/devtools-a11y",
+  "version": "0.1.1",
+  "description": "Accessibility auditing plugin for TanStack Devtools powered by axe-core",
+  "author": "TanStack",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TanStack/devtools.git",
+    "directory": "packages/devtools-a11y"
+  },
+  "homepage": "https://tanstack.com/devtools",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
   "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
-}
+    "devtools",
+    "accessibility",
+    "a11y",
+    "wcag",
+    "axe-core",
+    "audit"
+  ],
+  "type": "module",
+  "exports": {
+    "./core": {
+      "import": {
+        "types": "./dist/esm/core/index.d.ts",
+        "default": "./dist/esm/core/index.js"
+      }
+    },
+    "./core/production": {
+      "import": {
+        "types": "./dist/esm/core/production.d.ts",
+        "default": "./dist/esm/core/production.js"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/esm/react/index.d.ts",
+        "default": "./dist/esm/react/index.js"
+      }
+    },
+    "./react/production": {
+      "import": {
+        "types": "./dist/esm/react/production.d.ts",
+        "default": "./dist/esm/react/production.js"
+      }
+    },
+    "./solid": {
+      "import": {
+        "types": "./dist/esm/solid/index.d.ts",
+        "default": "./dist/esm/solid/index.js"
+      }
+    },
+    "./solid/production": {
+      "import": {
+        "types": "./dist/esm/solid/production.d.ts",
+        "default": "./dist/esm/solid/production.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist/",
+    "src"
+  ],
+  "dependencies": {
+    "axe-core": "^4.10.0",
+    "goober": "^2.1.16",
+    "@tanstack/devtools-ui": "0.5.1",
+    "@tanstack/devtools-utils": "^0.4.0"
+  },
+  "devDependencies": {
+    "vite-plugin-solid": "^2.11.11"
+  },
+  "peerDependencies": {
+    "@types/react": ">=17.0.0",
+    "preact": ">=10.0.0",
+    "react": ">=17.0.0",
+    "solid-js": ">=1.9.7",
+    "vue": ">=3.2.0"
+  },
+  "peerDependenciesMeta": {
+    "preact": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "clean": "premove ./build ./dist",
+    "lint:fix": "eslint ./src --fix",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  }
+}

package/src/core/components/IssueCard.tsx

@@ -0,0 +1,75 @@
+/** @jsxImportSource solid-js */
+
+import { For, Show } from 'solid-js'
+import { Button } from '@tanstack/devtools-ui'
+import { useStyles } from '../styles/styles'
+
+// types
+import type { A11yIssue, SeverityThreshold } from '../types/types'
+
+interface A11yIssueCardProps {
+  issue: A11yIssue
+  impact: SeverityThreshold
+  selected: boolean
+  onSelect: () => void
+  onDisableRule: (ruleId: string) => void
+}
+
+export function A11yIssueCard(props: A11yIssueCardProps) {
+  const selector = () => props.issue.nodes[0]?.selector || 'unknown'
+  const styles = useStyles()
+
+  return (
+    <div
+      class={styles().issueCard}
+      classList={{
+        [styles().issueCardSelected]: props.selected,
+      }}
+      onClick={props.onSelect}
+    >
+      <div class={styles().issueRow}>
+        <div class={styles().issueMain}>
+          <div class={styles().issueTitleRow}>
+            <span class={styles().dot(props.impact)} />
+
+            <span>{props.issue.ruleId}</span>
+          </div>
+          <p class={styles().issueMessage}>{props.issue.message}</p>
+
+          <div class={styles().selector}>{selector()}</div>
+        </div>
+
+        <div class={styles().issueAside}>
+          <a
+            class={styles().helpLink}
+            href={props.issue.helpUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(event) => event.stopPropagation()}
+          >
+            Learn more
+          </a>
+
+          <Button
+            variant="secondary"
+            ghost
+            onClick={(event: MouseEvent) => {
+              event.stopPropagation()
+              props.onDisableRule(props.issue.ruleId)
+            }}
+          >
+            Disable rule
+          </Button>
+        </div>
+      </div>
+
+      <Show when={props.issue.wcagTags.length > 0}>
+        <div class={styles().tags}>
+          <For each={props.issue.wcagTags.slice(0, 3)}>
+            {(tag) => <span class={styles().tag}>{tag}</span>}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/core/components/IssueList.tsx

@@ -0,0 +1,155 @@
+/** @jsxImportSource solid-js */
+
+import { For, Show } from 'solid-js'
+import { useAllyContext } from '../contexts/allyContext'
+import {
+  SEVERITY_LABELS,
+  clearHighlights,
+  highlightAllIssues,
+  highlightElement,
+  scrollToElement,
+} from '../utils/ui.utils'
+import { IMPACTS } from '../utils/ally-audit.utils'
+import { useStyles } from '../styles/styles'
+import { A11yIssueCard } from './IssueCard'
+
+// types
+import type { Signal } from 'solid-js'
+
+interface A11yIssueListProps {
+  selectedIssueSignal: Signal<string>
+}
+
+export function A11yIssueList(props: A11yIssueListProps) {
+  const [selectedIssueId, setSelectedIssueId] = props.selectedIssueSignal
+
+  // hooks
+  const styles = useStyles()
+  const ally = useAllyContext()
+
+  // handlers
+  const handleIssueClick = (issueId: string) => {
+    if (selectedIssueId() === issueId) {
+      setSelectedIssueId('')
+      clearHighlights()
+
+      if (
+        ally.config.showOverlays &&
+        ally.allyResult.audit &&
+        ally.filteredIssues().length > 0
+      ) {
+        highlightAllIssues(ally.filteredIssues())
+      }
+
+      return
+    }
+
+    setSelectedIssueId(issueId)
+    clearHighlights()
+
+    const issue = ally.allyResult.audit?.issues.find((i) => i.id === issueId)
+    if (!issue || issue.nodes.length === 0) return
+
+    let scrolled = false
+    for (const node of issue.nodes) {
+      const selector = node.selector
+      if (!selector) continue
+
+      try {
+        const el = document.querySelector(selector)
+        if (el) {
+          if (!scrolled) {
+            scrollToElement(selector)
+            scrolled = true
+          }
+
+          highlightElement(selector, issue.impact, {
+            showTooltip: true,
+            ruleId: issue.ruleId,
+          })
+        }
+      } catch (error) {
+        console.warn('[A11y Panel] Invalid selector:', selector, error)
+      }
+    }
+  }
+
+  return (
+    <div>
+      <div class={styles().summaryGrid}>
+        <For each={IMPACTS}>
+          {(impact) => {
+            // Count issues from the reactive filteredIssues memo so counts update when config.threshold changes
+            const issuesForImpact = () =>
+              ally.filteredIssues().filter((issue) => issue.impact === impact)
+            const count = () => issuesForImpact().length || 0
+
+            const active = () => ally.impactKey() === impact
+
+            return (
+              <button
+                class={styles().summaryButton}
+                classList={{
+                  [styles().summaryButtonActive(impact)]: active(),
+                }}
+                onClick={() => {
+                  ally.setImpactKey(
+                    ally.impactKey() === impact ? 'all' : impact,
+                  )
+
+                  setSelectedIssueId('')
+                }}
+              >
+                <div class={styles().summaryCount(impact)}>{count()}</div>
+                <div class={styles().summaryLabel}>
+                  {SEVERITY_LABELS[impact]}
+                </div>
+              </button>
+            )
+          }}
+        </For>
+      </div>
+
+      <For each={IMPACTS}>
+        {(impact) => {
+          const issues = () =>
+            ally.filteredIssues().filter((issue) => issue.impact === impact)
+
+          const shouldRender = () => {
+            if (ally.impactKey() !== 'all') {
+              return ally.impactKey() === impact
+            }
+            return issues().length > 0
+          }
+
+          return (
+            <Show when={shouldRender()}>
+              <div class={styles().section}>
+                <h3 class={styles().sectionTitle(impact)}>
+                  {SEVERITY_LABELS[impact]} ({issues().length})
+                </h3>
+
+                <For each={issues()}>
+                  {(issue) => (
+                    <A11yIssueCard
+                      issue={issue}
+                      impact={impact}
+                      selected={selectedIssueId() === issue.id}
+                      onSelect={() => handleIssueClick(issue.id)}
+                      onDisableRule={() =>
+                        ally.setConfig('disabledRules', [
+                          ...ally.config.disabledRules,
+                          issue.ruleId,
+                        ])
+                      }
+                    />
+                  )}
+                </For>
+              </div>
+            </Show>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

package/src/core/components/Settings.tsx

@@ -0,0 +1,221 @@
+/** @jsxImportSource solid-js */
+
+import { For, Show, createMemo, createSignal } from 'solid-js'
+import { Button, Input, Select } from '@tanstack/devtools-ui'
+import { getAvailableRules } from '../utils/ally-audit.utils'
+import { useAllyContext } from '../contexts/allyContext'
+import { CATEGORIES, CATEGORY_LABELS, useStyles } from '../styles/styles'
+
+// types
+import type {
+  RuleCategory,
+  RuleSetPreset,
+  SeverityThreshold,
+} from '../types/types'
+
+interface A11ySettingsOverlayProps {
+  onClose: () => void
+}
+
+export function A11ySettingsOverlay(props: A11ySettingsOverlayProps) {
+  const { config, setConfig } = useAllyContext()
+  const styles = useStyles()
+
+  const disabledRulesSet = createMemo(() => new Set(config.disabledRules))
+  const availableRules = createMemo(() => getAvailableRules())
+
+  const [searchString, setSearchString] = createSignal('')
+  const [searchCategory, setSearchCategory] = createSignal<RuleCategory>('all')
+
+  const filteredRules = createMemo(() => {
+    const cat = searchCategory()
+    const query = searchString().toLowerCase()
+    return availableRules().filter((rule) => {
+      if (cat !== 'all' && !rule.tags.includes(cat)) {
+        return false
+      }
+
+      if (!query) return true
+      return (
+        rule.id.toLowerCase().includes(query) ||
+        rule.description.toLowerCase().includes(query)
+      )
+    })
+  })
+
+  return (
+    <div class={styles().settingsOverlay}>
+      <div class={styles().settingsHeader}>
+        <h3 class={styles().settingsTitle}>Settings</h3>
+        <Button variant="secondary" outline onClick={props.onClose}>
+          Done
+        </Button>
+      </div>
+
+      <div class={styles().settingsContent}>
+        <div class={styles().settingsSection}>
+          <h4 class={styles().settingsSectionLabel}>General</h4>
+          <div class={styles().settingsRowStack}>
+            <Select<SeverityThreshold>
+              label="Severity Threshold"
+              description="Only show issues at or above this level"
+              value={config.threshold}
+              options={[
+                { value: 'critical', label: 'Critical' },
+                { value: 'serious', label: 'Serious' },
+                { value: 'moderate', label: 'Moderate' },
+                { value: 'minor', label: 'Minor' },
+              ]}
+              onChange={(value: string) => {
+                setConfig('threshold', value as SeverityThreshold)
+              }}
+            />
+            <Select<RuleSetPreset>
+              label="Rule Set"
+              description="WCAG conformance level or standard"
+              value={config.ruleSet}
+              options={[
+                { value: 'wcag2a', label: 'WCAG 2.0 A' },
+                { value: 'wcag2aa', label: 'WCAG 2.0 AA' },
+                { value: 'wcag21aa', label: 'WCAG 2.1 AA' },
+                { value: 'wcag22aa', label: 'WCAG 2.2 AA' },
+                { value: 'section508', label: 'Section 508' },
+                { value: 'best-practice', label: 'Best Practice' },
+                { value: 'all', label: 'All Rules' },
+              ]}
+              onChange={(value: string) => {
+                setConfig('ruleSet', value as RuleSetPreset)
+              }}
+            />
+          </div>
+        </div>
+
+        <div>
+          <div class={styles().rulesHeaderRow}>
+            <h4 class={styles().settingsSectionLabel}>
+              Rules ({availableRules().length} total,{' '}
+              {config.disabledRules.length} disabled)
+            </h4>
+
+            <div class={styles().rulesHeaderActions}>
+              <Button
+                variant="success"
+                outline
+                onClick={() => setConfig('disabledRules', [])}
+              >
+                Enable All
+              </Button>
+
+              <Button
+                variant="danger"
+                outline
+                onClick={() =>
+                  setConfig(
+                    'disabledRules',
+                    availableRules().map((rule) => rule.id),
+                  )
+                }
+              >
+                Disable All
+              </Button>
+            </div>
+          </div>
+
+          <div class={styles().filtersRow}>
+            <Select<RuleCategory>
+              label="Category"
+              value={searchCategory()}
+              options={CATEGORIES.map((cat) => ({
+                value: cat,
+                label: CATEGORY_LABELS[cat],
+              }))}
+              onChange={(value: string) =>
+                setSearchCategory(value as RuleCategory)
+              }
+            />
+
+            <Input
+              label="Search"
+              placeholder="Search rules..."
+              value={searchString()}
+              onChange={(value: string) => setSearchString(value)}
+            />
+          </div>
+
+          <div class={styles().rulesList}>
+            <For each={filteredRules()}>
+              {(rule, idx) => {
+                const isDisabled = () => disabledRulesSet().has(rule.id)
+                const isBestPracticeOnly = () =>
+                  rule.tags.includes('best-practice') &&
+                  !rule.tags.some(
+                    (tag) =>
+                      tag.startsWith('wcag') || tag.startsWith('section508'),
+                  )
+                const categoryTag = () =>
+                  rule.tags.find((tag) => tag.startsWith('cat.'))
+                const hasBorder = () => idx() < filteredRules().length - 1
+
+                return (
+                  <label
+                    class={styles().ruleRow}
+                    classList={{
+                      [styles().ruleRowDisabled]: isDisabled(),
+                      [styles().ruleRowBorder]: hasBorder(),
+                    }}
+                  >
+                    <input
+                      class={styles().ruleCheckbox}
+                      type="checkbox"
+                      checked={!isDisabled()}
+                      onChange={() =>
+                        setConfig('disabledRules', (rules) => {
+                          if (disabledRulesSet().has(rule.id)) {
+                            return rules.filter((id) => id !== rule.id)
+                          } else {
+                            return [...rules, rule.id]
+                          }
+                        })
+                      }
+                    />
+                    <div class={styles().ruleInfo}>
+                      <div class={styles().ruleTop}>
+                        <span
+                          class={styles().ruleId}
+                          classList={{
+                            [styles().ruleIdDisabled]: isDisabled(),
+                          }}
+                        >
+                          {rule.id}
+                        </span>
+                        <Show when={isBestPracticeOnly()}>
+                          <span
+                            class={styles().bpBadge}
+                            title="Best Practice only"
+                          >
+                            BP
+                          </span>
+                        </Show>
+                      </div>
+                      <div class={styles().ruleDesc}>{rule.description}</div>
+                      <Show when={categoryTag()}>
+                        {(tag) => (
+                          <div class={styles().catTagRow}>
+                            <span class={styles().catTag}>
+                              {CATEGORY_LABELS[tag() as RuleCategory] ||
+                                tag().replace('cat.', '')}
+                            </span>
+                          </div>
+                        )}
+                      </Show>
+                    </div>
+                  </label>
+                )
+              }}
+            </For>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}