Align sprite-rendered icons with Lucide’s aria-hidden default

icon-sprite/src/_shared.tsx

@@ -20,10 +20,10 @@ export type IconProps = React.SVGProps<SVGSVGElement> & {
 };
 
 // Ultra-minimal renderUse - all logic in one place
-export function renderUse(id: string, path: string, { size, width, height, style, strokeWidth, ...rest }: IconProps) {
-	return (
+export function renderUse(id: string, path: string, { size, width, height, style, strokeWidth, "aria-hidden": ariaHidden, ...rest }: IconProps) {	return (
 		<svg
 			{...rest}
+      aria-hidden={ariaHidden === undefined ? true : ariaHidden}
 			width={width ?? size ?? 24}
 			height={height ?? size ?? 24}
 			style={strokeWidth != null ? ({ "--icon-stroke-width": strokeWidth, ...style } as React.CSSProperties) : style}

icon-sprite/tests/run-all-tests.js

@@ -18,6 +18,11 @@ const testSuites = [
 		file: "test-lucide-compat.test.js",
 		description: "Verify drop-in replacement for lucide-react (same export names)",
 	},
+	{
+		name: "Accessibility Defaults",
+		file: "test-accessibility-defaults.test.js",
+		description: "Verify icons are aria-hidden by default and user overrides win",
+	},
 	{
 		name: "Sprite ID Match Tests",
 		file: "test-sprite-id-match.test.js",

icon-sprite/tests/test-accessibility-defaults.test.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+/**
+ * Test: Verify icon accessibility defaults match lucide-react behavior.
+ */
+import path from "path";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+try {
+	const { renderUse } = await import(path.resolve(__dirname, "../dist/_shared.js"));
+	const defaultIcon = renderUse("bell", "/sprite.svg", {});
+	if (defaultIcon.props["aria-hidden"] !== true) {
+		throw new Error(`Expected default aria-hidden=true, got ${String(defaultIcon.props["aria-hidden"])}`);
+	}
+	const exposedIcon = renderUse("bell", "/sprite.svg", {
+		"aria-hidden": false,
+		role: "img",
+		"aria-label": "Notifications",
+	});
+	if (exposedIcon.props["aria-hidden"] !== false) {
+		throw new Error(`Expected aria-hidden override=false, got ${String(exposedIcon.props["aria-hidden"])}`);
+	}
+	if (exposedIcon.props.role !== "img" || exposedIcon.props["aria-label"] !== "Notifications") {
+		throw new Error("Expected explicit accessibility props to pass through");
+	}
+	console.log("✅ Icons default to aria-hidden=true.");
+	console.log("✅ Explicit accessibility props override the default.");
+} catch (e) {
+	console.error(`❌ Test failed: ${e.message}`);
+	process.exit(1);
+}