Solid

@a11y-hud/solid is a Solid adapter that mounts the a11y-hud Custom Element and re-runs axe via createEffect after reactive updates.

Requirements

• solid-js 1.8 or later
• a11y-hud (installed automatically as a dependency)

Install

npm

npm install --save-dev @a11y-hud/solid

pnpm

pnpm add -D @a11y-hud/solid

yarn

yarn add -D @a11y-hud/solid

Quick start — component

App.tsx

import { A11yHud } from "@a11y-hud/solid";

export default function App() {
  return (
    <>
      {import.meta.env.DEV && <A11yHud theme="auto" />}
      {/* rest of app */}
    </>
  );
}

Quick start — primitive

createA11yHud follows Solid's create* naming convention for reactive primitives:

import { createA11yHud } from "@a11y-hud/solid";

function DevTools() {
  const hud = createA11yHud({ theme: "auto" });
  return null;
}

For reactive options (e.g., a theme signal), pass getter properties:

import { createSignal } from "solid-js";
import { createA11yHud } from "@a11y-hud/solid";

const [theme, setTheme] = createSignal("auto");

const hud = createA11yHud({
  get theme() { return theme(); },
});

Server-side rendering

Importing @a11y-hud/solid is safe on the server (SolidStart): the Custom Element is only registered when customElements exists. The HUD mounts in onMount, which runs only in the browser, so nothing is rendered server-side.

Props / options

Prop	Type	Default	Description
theme	Theme	"auto"	Visual theme
scope	Element | null	—	Element for scan scope
autoScan	boolean	true	Re-scan on DOM mutations
debounce	number	500	Auto-scan debounce in ms
runOnly	string[]	—	axe rule tags to run

Scoping to a subtree

The scope prop is read reactively, so pass it from a signal — a plain let ref is undefined at render time and never updates:

import { createSignal } from "solid-js";
import { A11yHud } from "@a11y-hud/solid";

export default function App() {
  const [appRoot, setAppRoot] = createSignal<HTMLDivElement | null>(null);

  return (
    <>
      <A11yHud theme="auto" scope={appRoot()} />
      <div ref={setAppRoot}>
        {/* only this subtree is scanned */}
      </div>
    </>
  );
}

Route-change rescans

createEffect tracks Solid's reactive graph, so rescans happen automatically after reactive updates including router navigations. For explicit control, see the Route-change rescans cookbook.

Instance API

const hud = createA11yHud({ theme: "auto" });

hud.runScan()              // Promise<AxeResults | null> — null if not mounted yet
hud.setTheme("github-dark")
hud.setRunOnly(["wcag2aa"])
hud.exportResults()
hud.ignores.add("label")
hud.ignores.list()

See CreateA11yHudReturn for full type details.