Add highlight button and bump @accesslint/vitest to 0.8.4

- Add Highlight toggle in violation details to outline the failing
  element in the Storybook preview using built-in highlight events
- Define HIGHLIGHT/REMOVE_HIGHLIGHT constants for the manager context
- Strip iframe-piercing selector prefix before highlighting
- Bump @accesslint/vitest to ^0.1.4 (fixes selector scoping in
  toBeAccessible matcher)

Author: ckundo

README.md

@@ -26,6 +26,8 @@ export default config;
 
 Restart Storybook and an **AccessLint** panel will appear in the addon bar. Every story is audited automatically after it renders.
 
+Expand any violation to see the failing element, WCAG criteria, and remediation guidance. Click **Highlight** to outline the element in the preview.
+
 ## Vitest integration
 
 If you use [`@storybook/addon-vitest`](https://storybook.js.org/docs/writing-tests/vitest-plugin), add the AccessLint plugin next to `storybookTest()` in your Vite config:

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@accesslint/storybook-addon",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Catch accessibility violations in your Storybook stories as you develop",
   "license": "MIT",
   "publishConfig": {
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "@accesslint/core": "^0.6.5",
-    "@accesslint/vitest": "^0.1.3"
+    "@accesslint/vitest": "^0.1.4"
   },
   "devDependencies": {
     "react": "^18.2.0",

package.json

@@ -2,7 +2,7 @@ import React, { useState, useMemo, useRef, useCallback, type FC } from "react";
 import { useChannel } from "storybook/internal/manager-api";
 import { useTheme } from "storybook/internal/theming";
 import { STORY_CHANGED } from "storybook/internal/core-events";
-import { RESULT_EVENT } from "./constants";
+import { RESULT_EVENT, HIGHLIGHT, REMOVE_HIGHLIGHT } from "./constants";
 
 interface EnrichedViolation {
   ruleId: string;
@@ -70,27 +70,31 @@ export const Panel: FC<PanelProps> = ({ active }) => {
   const [ruleCount, setRuleCount] = useState(0);
   const [skippedReason, setSkippedReason] = useState<string | null>(null);
   const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);
   const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
 
-  useChannel({
+  const emit = useChannel({
     [RESULT_EVENT]: ({ result }: { storyId?: string; result: { violations?: EnrichedViolation[]; ruleCount?: number; skipped?: boolean; reason?: string }; status?: string }) => {
       if (result.skipped) {
         setViolations([]);
         setRuleCount(0);
         setSkippedReason(result.reason ?? "skipped");
         setExpandedIndex(null);
+        setHighlightedIndex(null);
         return;
       }
       setViolations(result.violations ?? []);
       setRuleCount(result.ruleCount ?? 0);
       setSkippedReason(null);
       setExpandedIndex(null);
+      setHighlightedIndex(null);
     },
     [STORY_CHANGED]: () => {
       setViolations([]);
       setRuleCount(0);
       setSkippedReason(null);
       setExpandedIndex(null);
+      setHighlightedIndex(null);
     },
   });
 
@@ -163,7 +167,13 @@ export const Panel: FC<PanelProps> = ({ active }) => {
                   <button
                     ref={(el) => { buttonRefs.current[i] = el; }}
                     type="button"
-                    onClick={() => setExpandedIndex(isOpen ? null : i)}
+                    onClick={() => {
+                      setExpandedIndex(isOpen ? null : i);
+                      if (highlightedIndex !== null) {
+                        emit(REMOVE_HIGHLIGHT);
+                        setHighlightedIndex(null);
+                      }
+                    }}
                     onKeyDown={(e) => handleKeyDown(e, i)}
                     aria-expanded={isOpen}
                     style={{
@@ -252,8 +262,42 @@ export const Panel: FC<PanelProps> = ({ active }) => {
                       )}
                       {v.html && (
                         <div style={{ marginBottom: "8px" }}>
-                          <div style={{ fontSize: "11px", fontWeight: 500, color: colors.textMuted, marginBottom: "4px" }}>
-                            Element
+                          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "4px" }}>
+                            <div style={{ fontSize: "11px", fontWeight: 500, color: colors.textMuted }}>
+                              Element
+                            </div>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                if (highlightedIndex === i) {
+                                  emit(REMOVE_HIGHLIGHT);
+                                  setHighlightedIndex(null);
+                                } else {
+                                  const color = v.impact === "critical" || v.impact === "serious"
+                                    ? "#d32f2f"
+                                    : "#c43e00";
+                                  const localSelector = v.selector.replace(/^.*>>>\s*iframe>\s*/, "");
+                                  emit(HIGHLIGHT, {
+                                    elements: [localSelector],
+                                    color,
+                                    style: "solid",
+                                  });
+                                  setHighlightedIndex(i);
+                                }
+                              }}
+                              style={{
+                                padding: "2px 8px",
+                                fontSize: "11px",
+                                fontWeight: 500,
+                                border: `1px solid ${colors.codeBorder}`,
+                                borderRadius: "4px",
+                                background: highlightedIndex === i ? IMPACT_COLOR[v.impact] : colors.codeBg,
+                                color: highlightedIndex === i ? "#fff" : colors.text,
+                                cursor: "pointer",
+                              }}
+                            >
+                              Highlight
+                            </button>
                           </div>
                           <pre
                             style={{

src/Panel.tsx

@@ -2,3 +2,9 @@ export const ADDON_ID = "accesslint/a11y";
 export const PARAM_KEY = "accesslint";
 export const STATUS_TYPE_ID = "accesslint/a11y";
 export const RESULT_EVENT = `${ADDON_ID}/result`;
+
+// Storybook highlight addon events (storybook/highlight is only available on
+// the preview side, so we derive the event names the same way Storybook does).
+const HIGHLIGHT_ADDON_ID = "storybook/highlight";
+export const HIGHLIGHT = `${HIGHLIGHT_ADDON_ID}/add`;
+export const REMOVE_HIGHLIGHT = `${HIGHLIGHT_ADDON_ID}/remove`;