Function Shell

packages/devtools-a11y/src/core/components/Shell.tsx:11–154

()

import { A11ySettingsOverlay } from './Settings'

export function Shell() {
  const styles = createStyles()

  // ally context
  const { filteredIssues, allyResult, config, setConfig, triggerAllyScan } =
    createAllyContext()

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