claude-code

web/components/a11y/VisuallyHidden.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+
+interface VisuallyHiddenProps {
+  children: ReactNode;
+  /** When true, renders as a span inline; defaults to span */
+  as?: "span" | "div" | "p";
+}
+
+/**
+ * Visually hides content while keeping it accessible to screen readers.
+ * Use for icon-only buttons, supplemental context, etc.
+ */
+export function VisuallyHidden({ children, as: Tag = "span" }: VisuallyHiddenProps) {
+  return (
+    <Tag
+      style={{
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        padding: 0,
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+      }}
+    >
+      {children}
+    </Tag>
+  );
+}