From 6117f60dff4ef7f49ca09d4c0facb3ab8de921aa Mon Sep 17 00:00:00 2001
From: Ruud Andriessen <ruud.andriessen@uipath.com>
Date: Fri, 16 Oct 2026 13:44:48 +0200
Subject: [PATCH] fix(apollo-vertex): give docs example controls accessible
 names

Docs examples rendered icon-only buttons, progress bars and inputs with no
accessible name, which axe flags and which models the wrong usage.

- button, button-group, tooltip: aria-label on icon-only buttons
- progress: aria-label on each bar, including the usage snippet
- input, input-group: aria-label on placeholder-only inputs and snippets
- field: link FieldLabel to its control with htmlFor/id
- form-wizard: the headless demo reused the main demo's field names, so
  both rendered duplicate ids and the second demo's labels pointed at the
  first demo's inputs; rename its first step group to "profile"
- CommandInput: default aria-label from the new "search_input" locale key,
  overridable via props; registry item now ships vertex-translation
---
 .../content/docs/components/button-group.mdx  | 10 ++++-----
 .../content/docs/components/button.mdx        |  2 +-
 .../content/docs/components/field.mdx         | 12 +++++-----
 .../components/form-wizard-headless-demo.tsx  | 22 +++++++++----------
 .../content/docs/components/input-group.mdx   |  8 +++----
 .../content/docs/components/input.mdx         | 12 +++++-----
 .../content/docs/components/progress.mdx      |  8 +++----
 .../content/docs/components/tooltip.mdx       |  2 +-
 packages/apollo-vertex/locales/en.json        |  1 +
 packages/apollo-vertex/registry.json          |  5 +++--
 .../registry/command/command.tsx              |  3 +++
 11 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/apps/apollo-vertex/content/docs/components/button-group.mdx b/apps/apollo-vertex/content/docs/components/button-group.mdx
index 5748bb3136..8416317c3f 100644
--- a/apps/apollo-vertex/content/docs/components/button-group.mdx
+++ b/apps/apollo-vertex/content/docs/components/button-group.mdx
@@ -15,14 +15,14 @@ import { ChevronLeft, ChevronRight, Bold, Italic, Underline } from 'lucide-react
   </ButtonGroup>
 
   <ButtonGroup>
-    <Button variant="outline" size="icon"><ChevronLeft className="h-4 w-4" /></Button>
-    <Button variant="outline" size="icon"><ChevronRight className="h-4 w-4" /></Button>
+    <Button variant="outline" size="icon" aria-label="Previous"><ChevronLeft className="h-4 w-4" /></Button>
+    <Button variant="outline" size="icon" aria-label="Next"><ChevronRight className="h-4 w-4" /></Button>
   </ButtonGroup>
 
   <ButtonGroup>
-    <Button variant="outline" size="icon"><Bold className="h-4 w-4" /></Button>
-    <Button variant="outline" size="icon"><Italic className="h-4 w-4" /></Button>
-    <Button variant="outline" size="icon"><Underline className="h-4 w-4" /></Button>
+    <Button variant="outline" size="icon" aria-label="Bold"><Bold className="h-4 w-4" /></Button>
+    <Button variant="outline" size="icon" aria-label="Italic"><Italic className="h-4 w-4" /></Button>
+    <Button variant="outline" size="icon" aria-label="Underline"><Underline className="h-4 w-4" /></Button>
   </ButtonGroup>
 </Preview>
 
diff --git a/apps/apollo-vertex/content/docs/components/button.mdx b/apps/apollo-vertex/content/docs/components/button.mdx
index 6fa2b71446..cebb639881 100644
--- a/apps/apollo-vertex/content/docs/components/button.mdx
+++ b/apps/apollo-vertex/content/docs/components/button.mdx
@@ -23,7 +23,7 @@ import { Mail, Loader2, ChevronRight } from 'lucide-react'
   <Button size="sm">Small</Button>
   <Button size="default">Default</Button>
   <Button size="lg">Large</Button>
-  <Button size="icon"><Mail className="h-4 w-4" /></Button>
+  <Button size="icon" aria-label="Send email"><Mail className="h-4 w-4" /></Button>
 </Preview>
 
 ## With Icon
diff --git a/apps/apollo-vertex/content/docs/components/field.mdx b/apps/apollo-vertex/content/docs/components/field.mdx
index 4e44730007..5252d59591 100644
--- a/apps/apollo-vertex/content/docs/components/field.mdx
+++ b/apps/apollo-vertex/content/docs/components/field.mdx
@@ -9,17 +9,17 @@ import { Textarea } from '@/registry/textarea/textarea'
 
 <Preview className="space-y-6">
   <Field>
-    <FieldLabel>Email</FieldLabel>
+    <FieldLabel htmlFor="field-email">Email</FieldLabel>
     <FieldContent>
-      <Input type="email" placeholder="Enter your email" />
+      <Input id="field-email" type="email" placeholder="Enter your email" />
       <FieldDescription>We'll never share your email.</FieldDescription>
     </FieldContent>
   </Field>
 
   <Field>
-    <FieldLabel>Bio</FieldLabel>
+    <FieldLabel htmlFor="field-bio">Bio</FieldLabel>
     <FieldContent>
-      <Textarea placeholder="Tell us about yourself" />
+      <Textarea id="field-bio" placeholder="Tell us about yourself" />
       <FieldDescription>Max 500 characters.</FieldDescription>
     </FieldContent>
   </Field>
@@ -38,9 +38,9 @@ import {
 
 ```tsx
 <Field>
-  <FieldLabel>Email</FieldLabel>
+  <FieldLabel htmlFor="email">Email</FieldLabel>
   <FieldContent>
-    <Input type="email" placeholder="Enter your email" />
+    <Input id="email" type="email" placeholder="Enter your email" />
     <FieldDescription>We'll never share your email.</FieldDescription>
   </FieldContent>
 </Field>
diff --git a/apps/apollo-vertex/content/docs/components/form-wizard-headless-demo.tsx b/apps/apollo-vertex/content/docs/components/form-wizard-headless-demo.tsx
index 87de9fec5c..2a72d9a246 100644
--- a/apps/apollo-vertex/content/docs/components/form-wizard-headless-demo.tsx
+++ b/apps/apollo-vertex/content/docs/components/form-wizard-headless-demo.tsx
@@ -17,7 +17,7 @@ import {
 import { cn } from "@/lib/utils";
 import { LocaleProvider } from "@/registry/shell/shell-locale-provider";
 
-const accountSchema = z.object({
+const profileSchema = z.object({
   fullName: z.string().min(2, "Enter your name."),
   email: z.email("Enter a valid email."),
 });
@@ -31,7 +31,7 @@ const reviewSchema = z.object({
 });
 
 const wizardSchema = z.object({
-  account: accountSchema,
+  profile: profileSchema,
   plan: planSchema,
   review: reviewSchema,
 });
@@ -39,7 +39,7 @@ const wizardSchema = z.object({
 type WizardValues = z.infer<typeof wizardSchema>;
 
 const defaultValues = {
-  account: { fullName: "", email: "" },
+  profile: { fullName: "", email: "" },
   plan: { tier: "free" },
   review: { acceptTerms: false },
 };
@@ -52,7 +52,7 @@ const tierOptions = [
 ];
 
 const steps: WizardStepDef<WizardValues>[] = [
-  { id: "account", title: "Account" },
+  { id: "profile", title: "Profile" },
   { id: "plan", title: "Plan" },
   { id: "review", title: "Review" },
 ];
@@ -88,14 +88,14 @@ function CustomNav() {
   );
 }
 
-const AccountStep = withForm({
+const ProfileStep = withForm({
   ...wizardOpts,
   render: function Render({ form }) {
     const { next } = useFormWizardContext();
     return (
       <form.FormGroup
-        name="account"
-        validators={{ onDynamic: accountSchema }}
+        name="profile"
+        validators={{ onDynamic: profileSchema }}
         onGroupSubmit={() => next()}
       >
         {(group) => (
@@ -107,7 +107,7 @@ const AccountStep = withForm({
             }}
           >
             <FieldGroup>
-              <form.AppField name="account.fullName">
+              <form.AppField name="profile.fullName">
                 {(field) => (
                   <field.TextField
                     label="Full name"
@@ -115,7 +115,7 @@ const AccountStep = withForm({
                   />
                 )}
               </form.AppField>
-              <form.AppField name="account.email">
+              <form.AppField name="profile.email">
                 {(field) => (
                   <field.TextField
                     type="email"
@@ -260,8 +260,8 @@ export function FormWizardHeadlessDemo() {
           )}
         </FormWizardSteps>
 
-        <FormWizardStep stepId="account">
-          <AccountStep form={wizard.form} />
+        <FormWizardStep stepId="profile">
+          <ProfileStep form={wizard.form} />
         </FormWizardStep>
         <FormWizardStep stepId="plan">
           <PlanStep form={wizard.form} />
diff --git a/apps/apollo-vertex/content/docs/components/input-group.mdx b/apps/apollo-vertex/content/docs/components/input-group.mdx
index 2c157b6c2f..cf571c0ee6 100644
--- a/apps/apollo-vertex/content/docs/components/input-group.mdx
+++ b/apps/apollo-vertex/content/docs/components/input-group.mdx
@@ -11,21 +11,21 @@ import { Search, Mail } from 'lucide-react'
     <InputGroupAddon>
       <Search className="h-4 w-4" />
     </InputGroupAddon>
-    <InputGroupInput placeholder="Search..." />
+    <InputGroupInput placeholder="Search..." aria-label="Search" />
   </InputGroup>
 
   <InputGroup>
     <InputGroupAddon>
       <InputGroupText>https://</InputGroupText>
     </InputGroupAddon>
-    <InputGroupInput placeholder="example.com" />
+    <InputGroupInput placeholder="example.com" aria-label="Website" />
   </InputGroup>
 
   <InputGroup>
     <InputGroupAddon>
       <Mail className="h-4 w-4" />
     </InputGroupAddon>
-    <InputGroupInput placeholder="Email" />
+    <InputGroupInput placeholder="Email" aria-label="Email" />
     <InputGroupAddon align="inline-end">
       <InputGroupText>@gmail.com</InputGroupText>
     </InputGroupAddon>
@@ -48,6 +48,6 @@ import {
   <InputGroupAddon>
     <SearchIcon />
   </InputGroupAddon>
-  <InputGroupInput placeholder="Search..." />
+  <InputGroupInput placeholder="Search..." aria-label="Search" />
 </InputGroup>
 ```
diff --git a/apps/apollo-vertex/content/docs/components/input.mdx b/apps/apollo-vertex/content/docs/components/input.mdx
index a2b9b15487..a7116f0c29 100644
--- a/apps/apollo-vertex/content/docs/components/input.mdx
+++ b/apps/apollo-vertex/content/docs/components/input.mdx
@@ -8,13 +8,13 @@ import { Label } from '@/registry/label/label'
 import { Button } from '@/registry/button/button'
 
 <Preview className="space-y-4">
-  <Input type="email" placeholder="Email" />
+  <Input type="email" placeholder="Email" aria-label="Email" />
   
-  <Input type="password" placeholder="Password" />
+  <Input type="password" placeholder="Password" aria-label="Password" />
   
-  <Input disabled placeholder="Disabled" />
+  <Input disabled placeholder="Disabled" aria-label="Disabled input" />
   
-  <Input type="file" />
+  <Input type="file" aria-label="Upload file" />
 </Preview>
 
 ## With Label
@@ -30,7 +30,7 @@ import { Button } from '@/registry/button/button'
 
 <Preview>
   <div className="flex w-full max-w-sm items-center space-x-2">
-    <Input type="email" placeholder="Email" />
+    <Input type="email" placeholder="Email" aria-label="Email" />
     <Button type="submit">Subscribe</Button>
   </div>
 </Preview>
@@ -42,5 +42,5 @@ import { Input } from "@uipath/apollo-vertex"
 ```
 
 ```tsx
-<Input type="email" placeholder="Email" />
+<Input type="email" placeholder="Email" aria-label="Email" />
 ```
diff --git a/apps/apollo-vertex/content/docs/components/progress.mdx b/apps/apollo-vertex/content/docs/components/progress.mdx
index 7c7709dcba..f264ba1bad 100644
--- a/apps/apollo-vertex/content/docs/components/progress.mdx
+++ b/apps/apollo-vertex/content/docs/components/progress.mdx
@@ -6,9 +6,9 @@ description: "Displays an indicator showing the completion progress of a task."
 import { Progress } from '@/registry/progress/progress'
 
 <Preview className="space-y-4">
-  <Progress value={33} className="w-[60%]" />
-  <Progress value={66} className="w-[60%]" />
-  <Progress value={100} className="w-[60%]" />
+  <Progress value={33} aria-label="Upload progress" className="w-[60%]" />
+  <Progress value={66} aria-label="Sync progress" className="w-[60%]" />
+  <Progress value={100} aria-label="Download progress" className="w-[60%]" />
 </Preview>
 
 ## Usage
@@ -18,5 +18,5 @@ import { Progress } from "@uipath/apollo-vertex"
 ```
 
 ```tsx
-<Progress value={33} />
+<Progress value={33} aria-label="Upload progress" />
 ```
diff --git a/apps/apollo-vertex/content/docs/components/tooltip.mdx b/apps/apollo-vertex/content/docs/components/tooltip.mdx
index 90c9a36f0c..7153b69bcb 100644
--- a/apps/apollo-vertex/content/docs/components/tooltip.mdx
+++ b/apps/apollo-vertex/content/docs/components/tooltip.mdx
@@ -22,7 +22,7 @@ import { Plus } from 'lucide-react'
   <TooltipProvider>
     <Tooltip>
       <TooltipTrigger asChild>
-        <Button variant="outline" size="icon">
+        <Button variant="outline" size="icon" aria-label="Add new item">
           <Plus className="h-4 w-4" />
         </Button>
       </TooltipTrigger>
diff --git a/packages/apollo-vertex/locales/en.json b/packages/apollo-vertex/locales/en.json
index a2dbfbe113..13e05ef3fd 100644
--- a/packages/apollo-vertex/locales/en.json
+++ b/packages/apollo-vertex/locales/en.json
@@ -274,6 +274,7 @@
   "scroll_to_bottom": "Scroll to bottom",
   "search": "Search...",
   "search_frameworks": "Search frameworks",
+  "search_input": "Search",
   "secondary": "Secondary",
   "select_a_framework": "Select a framework",
   "select_all": "Select all",
diff --git a/packages/apollo-vertex/registry.json b/packages/apollo-vertex/registry.json
index 1a6cb7ee16..6cc1ffce7d 100644
--- a/packages/apollo-vertex/registry.json
+++ b/packages/apollo-vertex/registry.json
@@ -1777,13 +1777,14 @@
       "type": "registry:ui",
       "title": "Command",
       "description": "A command menu for searching and executing commands.",
-      "dependencies": ["cmdk"],
+      "dependencies": ["cmdk", "react-i18next"],
       "registryDependencies": ["@uipath/dialog"],
       "files": [
         {
           "path": "registry/command/command.tsx",
           "type": "registry:ui"
-        }
+        },
+        { "path": "lib/vertex-translation.ts", "type": "registry:lib" }
       ]
     },
     {
diff --git a/packages/apollo-vertex/registry/command/command.tsx b/packages/apollo-vertex/registry/command/command.tsx
index cab3c271b2..562d4757ff 100644
--- a/packages/apollo-vertex/registry/command/command.tsx
+++ b/packages/apollo-vertex/registry/command/command.tsx
@@ -11,6 +11,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
+import { useVertexTranslation } from "@/lib/vertex-translation";
 
 function Command({
   className,
@@ -63,6 +64,7 @@ function CommandInput({
   className,
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  const { t } = useVertexTranslation();
   return (
     <div
       data-slot="command-input-wrapper"
@@ -71,6 +73,7 @@ function CommandInput({
       <SearchIcon className="size-4 shrink-0 opacity-50" />
       <CommandPrimitive.Input
         data-slot="command-input"
+        aria-label={t("search_input")}
         className={cn(
           "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
           className,