Enhance accessibility by adding aria-hidden attributes to icons acros…

apps/www/components/page/copy-button.integration.test.tsx

@@ -125,8 +125,9 @@ describe("CopyButton + useToast + Toaster integration", () => {
 
 		// Initially should show Copy icon
 		const button = screen.getByRole("button", { name: /copy command/i });
-		expect(screen.getByLabelText(/copy icon/i)).toBeInTheDocument();
-		expect(screen.queryByLabelText(/check icon/i)).not.toBeInTheDocument();
+		// Icons are decorative (aria-hidden), so check by SVG class
+		expect(button.querySelector(".lucide-copy")).toBeInTheDocument();
+		expect(button.querySelector(".lucide-check")).not.toBeInTheDocument();
 
 		await user.click(button);
 
@@ -137,10 +138,10 @@ describe("CopyButton + useToast + Toaster integration", () => {
 			expect(
 				screen.getByRole("button", { name: /copied/i }),
 			).toBeInTheDocument();
-			// Check icon should be visible
-			expect(screen.getByLabelText(/check icon/i)).toBeInTheDocument();
+			// Check icon should be visible (decorative, aria-hidden)
+			expect(button.querySelector(".lucide-check")).toBeInTheDocument();
 			// Copy icon should no longer be visible
-			expect(screen.queryByLabelText(/copy icon/i)).not.toBeInTheDocument();
+			expect(button.querySelector(".lucide-copy")).not.toBeInTheDocument();
 		});
 	});
 

apps/www/components/page/copy-button.tsx

@@ -42,11 +42,7 @@ export function CopyButton({ command }: CopyButtonProps) {
 			className="hover:bg-slate-800 text-slate-400 hover:text-slate-100"
 			aria-label={copied ? "Copied" : "Copy command"}
 		>
-			{copied ? (
-				<Check aria-label="Check icon" />
-			) : (
-				<Copy aria-label="Copy icon" />
-			)}
+			{copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
 		</Button>
 	);
 }

apps/www/components/page/edit-on-github.tsx

@@ -29,7 +29,11 @@ export const EditOnGithub = ({ path }: EditOnGithubProps) => {
 					target="_blank"
 					rel="noopener noreferrer"
 				>
-					<SquarePen className="w-4 h-4" data-testid="square-pen-icon" />
+					<SquarePen
+						aria-hidden="true"
+						className="w-4 h-4"
+						data-testid="square-pen-icon"
+					/>
 					Edit this page on GitHub
 				</Link>
 			</Button>

apps/www/components/page/sail-button.tsx

@@ -50,6 +50,7 @@ export function SailButton() {
 					className="inline-flex items-center justify-center gap-2 whitespace-nowrap"
 				>
 					<Sailboat
+						aria-hidden="true"
 						className={`transition-transform duration-[700ms] ease-in ${isSailing ? "translate-x-[1000%]" : ""}`}
 						onTransitionEnd={() => router.push("/docs/quickstart")}
 					/>

apps/www/components/page/star-us-button.tsx

@@ -139,9 +139,10 @@ export function StarUsButton({ className }: StarUsProps) {
 						rel="noopener noreferrer"
 					>
 						<div className="flex items-center gap-2">
-							<SiGithub className="w-4 h-4" />
+							<SiGithub aria-hidden="true" className="w-4 h-4" />
 							<span className="font-semibold">Star us on GitHub!</span>
 							<Star
+								aria-hidden="true"
 								className="w-5 h-5 text-yellow-600 dark:text-yellow-400"
 								fill="currentColor"
 							/>
@@ -175,7 +176,10 @@ export function StarUsButton({ className }: StarUsProps) {
 						rel="noopener noreferrer"
 					>
 						{/* Sparkle effects */}
-						<div className="absolute inset-0 pointer-events-none">
+						<div
+							className="absolute inset-0 pointer-events-none"
+							aria-hidden="true"
+						>
 							<div
 								className="absolute top-1 left-2 w-1 h-1 bg-yellow-400 rounded-full star-sparkle"
 								style={{ animationDelay: "0s" }}
@@ -196,9 +200,10 @@ export function StarUsButton({ className }: StarUsProps) {
 
 						{/* Main content */}
 						<div className="flex items-center gap-2 relative z-10">
-							<SiGithub className="w-4 h-4" />
+							<SiGithub aria-hidden="true" className="w-4 h-4" />
 							<span className="font-semibold">Star us on GitHub!</span>
 							<Star
+								aria-hidden="true"
 								className="w-5 h-5 transition-all duration-300 star-bounce text-yellow-600 dark:text-yellow-400"
 								fill="currentColor"
 							/>

apps/www/components/ui/toast.tsx

@@ -83,7 +83,7 @@ const ToastClose = React.forwardRef<
 		toast-close=""
 		{...props}
 	>
-		<X className="h-4 w-4" />
+		<X aria-hidden="true" className="h-4 w-4" />
 	</ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;

apps/www/content/docs/examples.mdx

@@ -10,5 +10,5 @@ import { SiGithub as GitHub } from "@icons-pack/react-simple-icons";
 ## Next steps
 
 <Cards>
-    <Card icon={<GitHub />} title="Contribute an example" href="https://github.com/yamcodes/arkenv/tree/main/examples#contributing-examples" />
+    <Card icon={<GitHub aria-hidden="true" />} title="Contribute an example" href="https://github.com/yamcodes/arkenv/tree/main/examples#contributing-examples" />
 </Cards>

apps/www/content/docs/index.mdx

@@ -13,6 +13,6 @@ import { SiGithub as GitHub } from "@icons-pack/react-simple-icons";
 <Cards>
   <Card title="Quickstart" href="/docs/quickstart" description="Add ArkEnv to an existing project" />
   <Card title="Start with an example" href="/docs/examples" description="Explore our collection of examples to start a new project" />
-  <Card icon={<GitHub />} title="ArkEnv on GitHub" href="https://github.com/yamcodes/arkenv" description="View the source code and contribute to the project" />
-  <Card icon={<Globe />} title="ArkType Documentation" href="https://arktype.io/docs" description="Learn more about the underlying type system" className="bg-blue-900" />
+  <Card icon={<GitHub aria-hidden="true" />} title="ArkEnv on GitHub" href="https://github.com/yamcodes/arkenv" description="View the source code and contribute to the project" />
+  <Card icon={<Globe aria-hidden="true" />} title="ArkType Documentation" href="https://arktype.io/docs" description="Learn more about the underlying type system" className="bg-blue-900" />
 </Cards>

apps/www/content/docs/quickstart.mdx

@@ -3,8 +3,6 @@ title: Quickstart
 description: Let's get you started with a few simple steps.
 ---
 
-import { FolderCode, Blocks } from "lucide-react";
-
 <Steps>
   <Step>
     ## Install

tooling/playwright-www/tests/a11y.test.ts

@@ -165,7 +165,6 @@ test.describe("A11y Smoke Tests", () => {
 					// fumadocs-ui renders secondary nav items in <div> instead of <ul>
 					// Track: https://github.com/fuma-nama/fumadocs/issues/2566
 					"listitem",
-					"svg-img-alt", // decorative SVGs in buttons/links
 				],
 			});
 		}