Function A11yIssueList

packages/devtools-a11y/src/core/components/IssueList.tsx:23–155

(props: A11yIssueListProps)

}

export function A11yIssueList(props: A11yIssueListProps) {
  const [selectedIssueId, setSelectedIssueId] = props.selectedIssueSignal

  // hooks
  const styles = createStyles()
  const ally = createAllyContext()

  // 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}>