@tanstack/devtools-a11y 0.0.1 → 0.1.1

package/src/core/components/Shell.tsx

@@ -0,0 +1,154 @@
+/** @jsxImportSource solid-js */
+
+import { Match, Show, Switch, createMemo, createSignal } from 'solid-js'
+import { Button, Header, MainPanel } from '@tanstack/devtools-ui'
+import { useAllyContext } from '../contexts/allyContext'
+import { RULE_SET_LABELS, SEVERITY_LABELS } from '../utils/ui.utils'
+import { useStyles } from '../styles/styles'
+import { A11yIssueList } from './IssueList'
+import { A11ySettingsOverlay } from './Settings'
+
+export function Shell() {
+  const styles = useStyles()
+
+  // ally context
+  const { filteredIssues, allyResult, config, setConfig, triggerAllyScan } =
+    useAllyContext()
+
+  // ui state
+  const selectedIssueSignal = createSignal<string>('')
+  const [displaySettings, setDisplaySettings] = createSignal<boolean>(false)
+
+  const handleExport = (format: 'json' | 'csv') => {
+    if (allyResult.audit) return
+    // Keep export logic in runtime via event -> overlay? export is still a direct helper.
+    // We keep this import local to avoid pulling export code into the runtime module.
+
+    void import('../utils/export-audit.uitls').then((m) =>
+      m.exportAuditResults(allyResult.audit!, { format }),
+    )
+  }
+
+  const showOverlayState = createMemo(() => config.showOverlays)
+
+  return (
+    <MainPanel class={styles().root} withPadding={false}>
+      <Header class={styles().header}>
+        <div class={styles().headerTitleRow}>
+          <h2 class={styles().headerTitle}>Accessibility Audit</h2>
+
+          <Show when={allyResult.state === 'done' && filteredIssues()}>
+            <span class={styles().headerSub}>
+              {`${filteredIssues().length} issue${filteredIssues().length !== 1 ? 's' : ''}`}
+            </span>
+          </Show>
+        </div>
+
+        <div class={styles().headerActions}>
+          <Button
+            variant="primary"
+            onClick={triggerAllyScan}
+            disabled={allyResult.state === 'scanning'}
+          >
+            {allyResult.state === 'scanning' ? 'Scanning...' : 'Run Audit'}
+          </Button>
+
+          <Show
+            when={
+              allyResult.state === 'done' &&
+              allyResult.audit &&
+              allyResult.audit.issues.length > 0
+            }
+          >
+            <div class={styles().buttonRow}>
+              <Button
+                variant="secondary"
+                outline
+                onClick={() => handleExport('json')}
+              >
+                Export JSON
+              </Button>
+
+              <Button
+                variant="secondary"
+                outline
+                onClick={() => handleExport('csv')}
+              >
+                Export CSV
+              </Button>
+            </div>
+
+            <Button
+              variant={showOverlayState() ? 'success' : 'warning'}
+              onClick={() => setConfig('showOverlays', !config.showOverlays)}
+            >
+              {showOverlayState() ? 'Hide' : 'Show'} Overlays
+            </Button>
+          </Show>
+        </div>
+      </Header>
+
+      <div class={styles().statusBar}>
+        <span>
+          <Show when={allyResult.state === 'done'}>
+            {`${SEVERITY_LABELS[config.threshold]}+ | ${RULE_SET_LABELS[config.ruleSet]}`}
+
+            <Show when={config.disabledRules.length > 0}>
+              {` | ${config.disabledRules.length} rule(s) disabled`}
+            </Show>
+          </Show>
+        </span>
+
+        <div class={styles().statusSpacer} />
+
+        <Button
+          variant="secondary"
+          outline
+          onClick={() => setDisplaySettings(true)}
+        >
+          Settings
+        </Button>
+      </div>
+
+      <div class={styles().content}>
+        <Switch>
+          <Match when={allyResult.state === 'init'}>
+            <div class={styles().emptyState}>
+              <p class={styles().emptyPrimary}>No audit results yet</p>
+
+              <p class={styles().emptySecondary}>
+                Click "Run Audit" to scan for accessibility issues
+              </p>
+            </div>
+          </Match>
+
+          <Match
+            when={
+              allyResult.state === 'done' &&
+              allyResult.audit &&
+              allyResult.audit.issues.length === 0
+            }
+          >
+            <div class={styles().successState}>
+              <p class={styles().successTitle}>
+                No accessibility issues found!
+              </p>
+
+              <p class={styles().successSub}>
+                Scanned in {allyResult.audit!.duration.toFixed(0)}ms
+              </p>
+            </div>
+          </Match>
+
+          <Match when={allyResult.audit && allyResult.audit.issues.length > 0}>
+            <A11yIssueList selectedIssueSignal={selectedIssueSignal} />
+          </Match>
+        </Switch>
+      </div>
+
+      <Show when={displaySettings()}>
+        <A11ySettingsOverlay onClose={() => setDisplaySettings(false)} />
+      </Show>
+    </MainPanel>
+  )
+}

package/src/core/components/index.tsx

@@ -0,0 +1,12 @@
+/** @jsxImportSource solid-js */
+
+import { AllyProvider } from '../contexts/allyContext'
+import { Shell } from './Shell'
+
+export default function Devtools() {
+  return (
+    <AllyProvider>
+      <Shell />
+    </AllyProvider>
+  )
+}

package/src/core/contexts/allyContext.tsx

@@ -0,0 +1,118 @@
+/** @jsxImportSource solid-js */
+
+import {
+  createContext,
+  createEffect,
+  createMemo,
+  createSignal,
+  useContext,
+} from 'solid-js'
+import { createStore } from 'solid-js/store'
+import { filterIssuesAboveThreshold, runAudit } from '../utils/ally-audit.utils'
+import { mergeConfig, saveConfig } from '../utils/config.utils'
+import { clearHighlights, highlightAllIssues } from '../utils/ui.utils'
+
+// types
+import type {
+  A11yAuditResult,
+  A11yPluginOptions,
+  SeverityThreshold,
+} from '../types/types'
+import type { ParentComponent } from 'solid-js'
+
+//
+// context state
+//
+
+function useAllyValue() {
+  const [config, setConfig] =
+    createStore<Required<A11yPluginOptions>>(mergeConfig())
+
+  const [allyResult, setAllyResult] = createStore<{
+    audit?: A11yAuditResult
+    state: 'init' | 'scanning' | 'done'
+  }>({ state: 'init' })
+
+  const [impactKey, setImpactKey] = createSignal<SeverityThreshold | 'all'>(
+    'all',
+  )
+
+  const triggerAllyScan = async () => {
+    setAllyResult('state', 'scanning')
+    setAllyResult({ audit: await runAudit(config), state: 'done' })
+  }
+
+  const filteredIssues = createMemo(() => {
+    if (allyResult.state !== 'done' || !allyResult.audit?.issues) return []
+    let results = allyResult.audit.issues
+
+    results = filterIssuesAboveThreshold(results, config.threshold)
+
+    // removes excluded rules
+    if (config.disabledRules.length > 0) {
+      results = results.filter(
+        (issue) => !config.disabledRules.includes(issue.ruleId),
+      )
+    }
+
+    // early return if all impacts selected
+    if (impactKey() === 'all') return results
+
+    return results.filter((val) => val.impact === impactKey())
+  })
+
+  createEffect(() => {
+    if (config.showOverlays === false) {
+      clearHighlights()
+      return
+    }
+
+    if (allyResult.state === 'done') highlightAllIssues(filteredIssues())
+  })
+
+  createEffect(() => {
+    saveConfig(config)
+  })
+
+  return {
+    impactKey,
+    setImpactKey,
+
+    filteredIssues,
+
+    triggerAllyScan,
+
+    setConfig,
+    config,
+
+    allyResult,
+  }
+}
+
+type ContextType = ReturnType<typeof useAllyValue>
+
+//
+// context
+//
+
+const AllyContext = createContext<ContextType | null>(null)
+
+type AllyProviderProps = {}
+
+export const AllyProvider: ParentComponent<AllyProviderProps> = (props) => {
+  const value = useAllyValue()
+
+  return (
+    <AllyContext.Provider value={value}>{props.children}</AllyContext.Provider>
+  )
+}
+
+export function useAllyContext() {
+  const context = useContext(AllyContext)
+
+  if (context === null) {
+    throw new Error('useAllyContext must be used within an AllyProvider')
+  }
+
+  return context
+}

package/src/core/core.tsx

@@ -0,0 +1,11 @@
+/** @jsxImportSource solid-js */
+
+import { constructCoreClass } from '@tanstack/devtools-utils/solid'
+
+export interface A11yDevtoolsInit {}
+
+const [A11yDevtoolsCore, A11yDevtoolsCoreNoOp] = constructCoreClass(
+  () => import('./components'),
+)
+
+export { A11yDevtoolsCore, A11yDevtoolsCoreNoOp }

package/src/core/index.ts

@@ -0,0 +1,10 @@
+'use client'
+
+import * as Devtools from './core'
+
+export const A11yDevtoolsCore =
+  process.env.NODE_ENV !== 'development'
+    ? Devtools.A11yDevtoolsCoreNoOp
+    : Devtools.A11yDevtoolsCore
+
+export type { A11yDevtoolsInit } from './core'

package/src/core/production.ts

@@ -0,0 +1,5 @@
+'use client'
+
+export { A11yDevtoolsCore } from './core'
+
+export type { A11yDevtoolsInit } from './core'