Fix a11y incomplete checks and glyph icons

apps/docs/src/components/button.stories.tsx

@@ -1,6 +1,19 @@
 import { Button } from "@ai-ui/ui";
 import type { Meta, StoryObj } from "@storybook/react";
 
+function FavoriteIcon() {
+  return (
+    <svg aria-hidden="true" className="size-4" fill="none" viewBox="0 0 16 16">
+      <path
+        d="m8 2.4 1.67 3.4 3.76.55-2.72 2.64.64 3.73L8 10.98l-3.35 1.74.64-3.73L2.57 6.35l3.76-.55L8 2.4Z"
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="1.35"
+      />
+    </svg>
+  );
+}
+
 function getButtonFromCanvas(canvasElement: HTMLElement, name: string) {
   const buttons = canvasElement.querySelectorAll("button, a");
 
@@ -104,7 +117,7 @@ export const Sizes: Story = {
       <Button size="md">Medium</Button>
       <Button size="lg">Large</Button>
       <Button aria-label="Favorite" size="icon">
-        ☆
+        <FavoriteIcon />
       </Button>
     </div>
   )

apps/docs/src/components/checkbox.stories.tsx

@@ -5,6 +5,7 @@ const meta = {
   title: "Components/Checkbox",
   component: Checkbox,
   args: {
+    "aria-label": "Checkbox example",
     defaultChecked: true
   },
   argTypes: {
@@ -31,7 +32,9 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = {};
+export const Playground: Story = {
+  render: (args) => <Checkbox {...args} aria-label="Checkbox example" />
+};
 
 export const States: Story = {
   render: () => (

apps/docs/src/style-matrix.stories.tsx

@@ -39,6 +39,20 @@ const motionAccessibilityModes = [
 
 type MotionAccessibilityMode = (typeof motionAccessibilityModes)[number]["value"];
 
+function ClosePreviewIcon() {
+  return (
+    <svg aria-hidden="true" className="size-4" fill="none" viewBox="0 0 16 16">
+      <path
+        d="m4.5 4.5 7 7m0-7-7 7"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.75"
+      />
+    </svg>
+  );
+}
+
 function RuntimePill({ children }: { children: React.ReactNode }) {
   return (
     <span className="rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1 text-xs uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]">
@@ -71,7 +85,7 @@ function PanelPreview() {
           </p>
         </div>
         <Button aria-hidden="true" size="icon" tabIndex={-1} variant="ghost">
-          ×
+          <ClosePreviewIcon />
         </Button>
       </div>
       <div className="grid gap-2">