From 963f8abeda3369701bf1f5fbd0812bab635a0263 Mon Sep 17 00:00:00 2001
From: Ruud Andriessen <ruud.andriessen@uipath.com>
Date: Fri, 16 Oct 2026 13:42:55 +0200
Subject: [PATCH] fix(apollo-vertex): give select example trigger an accessible
 name

Radix renders SelectTrigger as <button role="combobox">. Combobox is not
named from content, so the placeholder or selected value text never names
it and axe reports button-name even after a value is chosen. Associate a
Label with the trigger in the preview and the usage snippet.
---
 .../content/docs/components/select.mdx        | 40 +++++++++++--------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/apps/apollo-vertex/content/docs/components/select.mdx b/apps/apollo-vertex/content/docs/components/select.mdx
index 36446833a..16b400809 100644
--- a/apps/apollo-vertex/content/docs/components/select.mdx
+++ b/apps/apollo-vertex/content/docs/components/select.mdx
@@ -3,30 +3,35 @@ title: "Select"
 description: "Displays a list of options for the user to pick from—triggered by a button."
 ---
 
+import { Label } from '@/registry/label/label'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/registry/select/select'
 
 <Preview>
-  <Select>
-    <SelectTrigger className="w-[180px]">
-      <SelectValue placeholder="Select a fruit" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectGroup>
-        <SelectLabel>Fruits</SelectLabel>
-        <SelectItem value="apple">Apple</SelectItem>
-        <SelectItem value="banana">Banana</SelectItem>
-        <SelectItem value="blueberry">Blueberry</SelectItem>
-        <SelectItem value="grapes">Grapes</SelectItem>
-        <SelectItem value="pineapple">Pineapple</SelectItem>
-      </SelectGroup>
-    </SelectContent>
-  </Select>
+  <div className="flex flex-col gap-2">
+    <Label htmlFor="fruit">Fruit</Label>
+    <Select>
+      <SelectTrigger id="fruit" className="w-[180px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+          <SelectItem value="grapes">Grapes</SelectItem>
+          <SelectItem value="pineapple">Pineapple</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  </div>
 </Preview>
 
 ## Usage
 
 ```tsx
 import {
+  Label,
   Select,
   SelectContent,
   SelectItem,
@@ -36,9 +41,10 @@ import {
 ```
 
 ```tsx
+<Label htmlFor="theme">Theme</Label>
 <Select>
-  <SelectTrigger className="w-[180px]">
-    <SelectValue placeholder="Theme" />
+  <SelectTrigger id="theme" className="w-[180px]">
+    <SelectValue placeholder="Select a theme" />
   </SelectTrigger>
   <SelectContent>
     <SelectItem value="light">Light</SelectItem>