🤖 fix(site): a11y polish on the AI providers admin form and list

jakehwll · jakehwll · commit 5166702db69a · 2026-05-14T13:55:28.000Z
Three accessibility gaps surfaced by the review pass on the AI
providers admin UI:

* FormField now wires its optional `description` to the input's
  `aria-describedby` chain via a stable `${id}-description` id. The
  description was previously rendered as an unanchored `&lt;div&gt;`, so
  screen readers never announced it when the input received focus.
  The chain composes with the existing helper/error ids.

* The providers `&lt;Table&gt;` carries an `aria-label="AI providers"` so
  screen readers can name it, per the site/AGENTS.md table rule.

* `ProviderRow` switches from a bare `onClick` + `cursor-pointer`
  className to the shared `useClickableTableRow` hook used by other
  clickable rows in the app (e.g. TemplateVersions). That gives the
  row a button role, a tab stop, Enter/Space activation, a focus
  ring, and middle-click handling, so keyboard-only users can
  navigate to and activate provider rows.
diff --git a/site/src/components/FormField/FormField.tsx b/site/src/components/FormField/FormField.tsx
@@ -21,12 +21,21 @@ export const FormField: FC<FormFieldProps> = ({
 	const id = inputProps.id ?? generatedId;
 	const errorId = `${id}-error`;
 	const helperId = `${id}-helper`;
+	const descriptionId = `${id}-description`;
+	const describedBy = [
+		description ? descriptionId : null,
+		field.error ? errorId : field.helperText ? helperId : null,
+	]
+		.filter(Boolean)
+		.join(" ");
 
 	return (
 		<div className="flex flex-col gap-2">
 			<Label htmlFor={id}>{label}</Label>
 			{description && (
-				<div className="text-xs text-content-secondary">{description}</div>
+				<div id={descriptionId} className="text-xs text-content-secondary">
+					{description}
+				</div>
 			)}
 			<Input
 				name={field.name}
@@ -36,9 +45,7 @@ export const FormField: FC<FormFieldProps> = ({
 				{...inputProps}
 				id={id}
 				aria-invalid={field.error}
-				aria-describedby={
-					field.error ? errorId : field.helperText ? helperId : undefined
-				}
+				aria-describedby={describedBy || undefined}
 				className={cn(field.error && "border-border-destructive", className)}
 			/>
 			{field.error ? (
diff --git a/site/src/pages/AISettingsPage/ProvidersPage/ProvidersPageView.tsx b/site/src/pages/AISettingsPage/ProvidersPage/ProvidersPageView.tsx
@@ -51,7 +51,7 @@ const ProvidersPageView: React.FC<ProvidersPageViewProps> = ({
 					conversations.
 				</PageHeaderSubtitle>
 			</PageHeader>
-			<Table className="table-fixed">
+			<Table className="table-fixed" aria-label="AI providers">
 				<TableHeader>
 					<TableRow>
 						<TableHead>Name</TableHead>
diff --git a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx
@@ -3,6 +3,7 @@ import type { AIProvider } from "#/api/typesGenerated";
 import { Avatar } from "#/components/Avatar/Avatar";
 import { AvatarData } from "#/components/Avatar/AvatarData";
 import { TableCell, TableRow } from "#/components/Table/Table";
+import { useClickableTableRow } from "#/hooks/useClickableTableRow";
 import { ProviderIcon } from "./ProviderIcon";
 
 type ProviderRowProps = {
@@ -14,13 +15,11 @@ export const ProviderRow: React.FC<ProviderRowProps> = ({
 	provider,
 	onClick,
 }) => {
+	const clickableProps = useClickableTableRow({
+		onClick: () => onClick?.(),
+	});
 	return (
-		<TableRow
-			key={provider.name}
-			hover
-			className="cursor-pointer"
-			onClick={() => onClick?.()}
-		>
+		<TableRow key={provider.name} {...clickableProps}>
 			<TableCell>
 				<AvatarData
 					title={provider.display_name}
