chore: even bigger changes

Author: harry-whorlow

examples/react/a11y-devtools/src/index.tsx

@@ -1,16 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { createA11yDevtoolsReactPlugin } from '@tanstack/devtools-a11y/react'
+import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/react'
 
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
-
-    <TanStackDevtools
-      plugins={[createA11yDevtoolsReactPlugin({ runOnMount: false })[0]()]}
-    />
+    <TanStackDevtools plugins={[a11yDevtoolsPlugin()]} />§
   </StrictMode>,
 )

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

@@ -2,8 +2,10 @@
 
 import { For, Show } from 'solid-js'
 import { Button } from '@tanstack/devtools-ui'
-import { useStyles } from './styles'
-import type { A11yIssue, SeverityThreshold } from '../types'
+import { useStyles } from '../styles/styles'
+
+// types
+import type { A11yIssue, SeverityThreshold } from '../types/types'
 
 interface A11yIssueCardProps {
   issue: A11yIssue
@@ -15,7 +17,6 @@ interface A11yIssueCardProps {
 
 export function A11yIssueCard(props: A11yIssueCardProps) {
   const selector = () => props.issue.nodes[0]?.selector || 'unknown'
-
   const styles = useStyles()
 
   return (
@@ -30,9 +31,11 @@ export function A11yIssueCard(props: A11yIssueCardProps) {
         <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>
 
@@ -46,6 +49,7 @@ export function A11yIssueCard(props: A11yIssueCardProps) {
           >
             Learn more
           </a>
+
           <Button
             variant="secondary"
             ghost

…s/devtools-a11y/src/ui/A11yIssueCard.tsx …s-a11y/src/core/components/IssueCard.tsxpackages/devtools-a11y/src/ui/A11yIssueCard.tsx renamed to packages/devtools-a11y/src/core/components/IssueCard.tsx packages/devtools-a11y/src/ui/A11yIssueCard.tsx renamed to packages/devtools-a11y/src/core/components/IssueCard.tsx

@@ -2,20 +2,74 @@
 
 import { For, Show } from 'solid-js'
 import { useAllyContext } from '../contexts/allyContext'
-import { IMPACTS } from './panelUtils'
-import { SEVERITY_LABELS, useStyles } from './styles'
-import { A11yIssueCard } from './A11yIssueCard'
+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 {
-  selectedIssueId: string | null
-  onIssueClick: (issueId: string) => void
-  onDisableRule: (ruleId: string) => void
+  selectedIssueSignal: Signal<string>
 }
 
 export function A11yIssueList(props: A11yIssueListProps) {
+  const [selectedIssueId, setSelectedIssueId] = props.selectedIssueSignal
+
+  // hooks
   const styles = useStyles()
+  const { filteredIssues, audit, impactKey, setImpactKey, config, setConfig } =
+    useAllyContext()
+
+  // handlers
+  const handleIssueClick = (issueId: string) => {
+    if (selectedIssueId() === issueId) {
+      setSelectedIssueId('')
+      clearHighlights()
+
+      if (config.showOverlays && audit && filteredIssues.length > 0) {
+        highlightAllIssues(filteredIssues())
+      }
+
+      return
+    }
+
+    setSelectedIssueId(issueId)
+    clearHighlights()
+
+    const issue = 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
+          }
 
-  const { filteredIssues, audit, impactKey, setImpactKey } = useAllyContext()
+          highlightElement(selector, issue.impact, {
+            showTooltip: true,
+            ruleId: issue.ruleId,
+          })
+        }
+      } catch (error) {
+        console.warn('[A11y Panel] Invalid selector:', selector, error)
+      }
+    }
+  }
 
   return (
     <div>
@@ -69,9 +123,14 @@ export function A11yIssueList(props: A11yIssueListProps) {
                     <A11yIssueCard
                       issue={issue}
                       impact={impact}
-                      selected={props.selectedIssueId === issue.id}
-                      onSelect={() => props.onIssueClick(issue.id)}
-                      onDisableRule={props.onDisableRule}
+                      selected={selectedIssueId() === issue.id}
+                      onSelect={() => handleIssueClick(issue.id)}
+                      onDisableRule={() =>
+                        setConfig('disabledRules', [
+                          ...config.disabledRules,
+                          issue.ruleId,
+                        ])
+                      }
                     />
                   )}
                 </For>