chore: big changes

Author: harry-whorlow

examples/react/basic/package.json

@@ -17,6 +17,7 @@
     "@tanstack/react-query-devtools": "^5.90.1",
     "@tanstack/react-router": "^1.132.0",
     "@tanstack/react-router-devtools": "^1.132.0",
+    "@tanstack/devtools-a11y": "workspace:*",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "zod": "^4.1.11"

examples/react/basic/src/setup.tsx

@@ -1,5 +1,7 @@
 import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { createA11yDevtoolsReactPlugin } from '@tanstack/devtools-a11y/react'
+
 import {
   Link,
   Outlet,
@@ -70,10 +72,15 @@ export default function DevtoolsExample() {
             name: 'TanStack Router',
             render: <TanStackRouterDevtoolsPanel router={router} />,
           },
+          {
+            name: 'TanStack Router',
+            render: <TanStackRouterDevtoolsPanel router={router} />,
+          },
           {
             name: 'Package.json',
             render: () => <PackageJsonPanel />,
           },
+          createA11yDevtoolsReactPlugin({ runOnMount: false })[0](),
           /* {
       name: "The actual app",
       render: <iframe style={{ width: '100%', height: '100%' }} src="http://localhost:3005" />,

packages/devtools-a11y/src/contexts/allyContext.tsx

@@ -0,0 +1,81 @@
+import { createContext, createMemo, createSignal, useContext } from 'solid-js'
+import { createStore } from 'solid-js/store'
+
+import { runAudit } from '../scanner/audit'
+import { DEFAULT_CONFIG } from '../config'
+
+import type {
+  A11yAuditResult,
+  A11yPluginOptions,
+  SeverityThreshold,
+} from '../types'
+import type { ParentComponent } from 'solid-js'
+
+type UseAllyValueProps = {
+  options?: A11yPluginOptions
+}
+
+function useAllyValue(props: UseAllyValueProps) {
+  const [config, setConfig] = createStore<A11yPluginOptions>({
+    ...DEFAULT_CONFIG,
+    ...(props.options ?? {}),
+  })
+
+  const [allyResult, setAllyResult] = createStore<{
+    audit?: A11yAuditResult
+    state: 'init' | 'scanning' | 'done'
+  }>({ state: 'init' })
+  const [impactKey, setImpactKey] = createSignal<SeverityThreshold | 'all'>(
+    'all',
+  )
+
+  const triggerAllyScan = async () => {
+    const results = await runAudit(config)
+    setAllyResult({ audit: results, state: 'done' })
+  }
+
+  const filteredIssues = createMemo(() => {
+    if (allyResult.state !== 'done' || !allyResult.audit?.issues) return []
+    if (impactKey() === 'all') return allyResult.audit.issues
+
+    return allyResult.audit.issues.filter((val) => val.impact === impactKey())
+  })
+
+  return {
+    impactKey,
+    setImpactKey,
+
+    filteredIssues,
+
+    triggerAllyScan,
+
+    setConfig,
+
+    audit: allyResult.audit,
+    state: allyResult.state,
+  }
+}
+
+type ContextType = ReturnType<typeof useAllyValue>
+
+const AllyContext = createContext<ContextType | null>(null)
+
+type AllyProviderProps = { options?: A11yPluginOptions }
+
+export const AllyProvider: ParentComponent<AllyProviderProps> = (props) => {
+  const value = useAllyValue({ options: props.options })
+
+  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
+}

packages/devtools-a11y/src/core/A11yDevtoolsCore.tsx

@@ -2,7 +2,7 @@
 
 import { createSignal } from 'solid-js'
 import { A11yDevtoolsPanel } from '../ui/A11yDevtoolsPanel'
-import type {Accessor} from 'solid-js';
+import type { Accessor } from 'solid-js'
 import type { A11yPluginOptions } from '../types'
 
 function resolveTheme(theme: 'light' | 'dark' | 'system'): 'light' | 'dark' {