Fix Storybook a11y violations

apps/docs/src/components/data-table.stories.tsx

@@ -149,7 +149,15 @@ const routingColumns: DataTableColumn<RoutingLaneRow>[] = [
     accessor: "state",
     cell: (row) => (
       <div className="flex flex-wrap items-center gap-3">
-        <Badge size="sm" tone={getStateTone(row.state)} variant="solid">
+        <Badge
+          size="sm"
+          style={{
+            backgroundColor: "var(--color-background)",
+            color: "var(--color-foreground)"
+          }}
+          tone={getStateTone(row.state)}
+          variant="outline"
+        >
           {row.state}
         </Badge>
         <span className="text-xs uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]">

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

@@ -36,7 +36,7 @@ export const Playground: Story = {
   render: () => (
     <div className="w-[320px]">
       <Select defaultValue="editorial">
-        <SelectTrigger>
+        <SelectTrigger aria-label="Review lane">
           <SelectValue placeholder="Choose a review lane" />
         </SelectTrigger>
         <SelectContent>
@@ -47,7 +47,7 @@ export const Playground: Story = {
             <SelectItem value="legal">Legal review</SelectItem>
           </SelectGroup>
         </SelectContent>
-        </Select>
+      </Select>
     </div>
   ),
   play: async ({ canvasElement }) => {

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

@@ -31,7 +31,14 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Playground: Story = {};
+export const Playground: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <Switch id="switch-playground" {...args} />
+      <Label htmlFor="switch-playground">Live publishing</Label>
+    </div>
+  )
+};
 
 export const States: Story = {
   render: () => (