Skip to content

fix(apollo-vertex): give docs example controls accessible names #1392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ruudandriessen merged 1 commit into from
Oct 16, 2026
Merged

fix(apollo-vertex): give docs example controls accessible names #1392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions apps/apollo-vertex/content/docs/components/button-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion apps/apollo-vertex/content/docs/components/button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
12 changes: 6 additions & 6 deletions apps/apollo-vertex/content/docs/components/field.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
22 changes: 11 additions & 11 deletions apps/apollo-vertex/content/docs/components/form-wizard-headless-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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."),
});
Expand All @@ -31,15 +31,15 @@ const reviewSchema = z.object({
});

const wizardSchema = z.object({
account: accountSchema,
profile: profileSchema,
plan: planSchema,
review: reviewSchema,
});

type WizardValues = z.infer<typeof wizardSchema>;

const defaultValues = {
account: { fullName: "", email: "" },
profile: { fullName: "", email: "" },
plan: { tier: "free" },
review: { acceptTerms: false },
};
Expand All @@ -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" },
];
Expand Down Expand Up @@ -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) => (
Expand All @@ -107,15 +107,15 @@ const AccountStep = withForm({
}}
>
<FieldGroup>
<form.AppField name="account.fullName">
<form.AppField name="profile.fullName">
{(field) => (
<field.TextField
label="Full name"
placeholder="Ada Lovelace"
/>
)}
</form.AppField>
<form.AppField name="account.email">
<form.AppField name="profile.email">
{(field) => (
<field.TextField
type="email"
Expand Down Expand Up @@ -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} />
Expand Down
8 changes: 4 additions & 4 deletions apps/apollo-vertex/content/docs/components/input-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -48,6 +48,6 @@ import {
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
<InputGroupInput placeholder="Search..." />
<InputGroupInput placeholder="Search..." aria-label="Search" />
</InputGroup>
```
12 changes: 6 additions & 6 deletions apps/apollo-vertex/content/docs/components/input.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand All @@ -42,5 +42,5 @@ import { Input } from "@uipath/apollo-vertex"
```

```tsx
<Input type="email" placeholder="Email" />
<Input type="email" placeholder="Email" aria-label="Email" />
```
8 changes: 4 additions & 4 deletions apps/apollo-vertex/content/docs/components/progress.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -18,5 +18,5 @@ import { Progress } from "@uipath/apollo-vertex"
```

```tsx
<Progress value={33} />
<Progress value={33} aria-label="Upload progress" />
```
2 changes: 1 addition & 1 deletion apps/apollo-vertex/content/docs/components/tooltip.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions packages/apollo-vertex/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 3 additions & 2 deletions packages/apollo-vertex/registry.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" }
]
},
{
Expand Down
3 changes: 3 additions & 0 deletions packages/apollo-vertex/registry/command/command.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
DialogTitle,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
import { useVertexTranslation } from "@/lib/vertex-translation";

function Command({
className,
Expand Down Expand Up @@ -63,6 +64,7 @@ function CommandInput({
className,
...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
const { t } = useVertexTranslation();
return (
<div
data-slot="command-input-wrapper"
Expand All @@ -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,
Expand Down
Loading