feat(ui): improve a11y

Author: elianiva

webview-ui/src/components/chat/ApiConfigSelector.tsx

@@ -223,11 +223,21 @@ export const ApiConfigSelector = ({
 				<div
 					key={config.id}
 					data-config-item
+					role="option"
+					aria-selected={isCurrentConfig}
+					aria-label={`${config.name}${config.modelId ? ` - ${config.modelId}` : ""}`}
 					draggable={isReorderMode && sortMode === "custom"}
 					onDragStart={(e) => isReorderMode && handleDragStart(e, index)}
 					onDragOver={(e) => isReorderMode && handleDragOver(e, index)}
 					onDragEnd={handleDragEnd}
 					onClick={() => !isReorderMode && handleSelect(config.id)}
+					onKeyDown={(e) => {
+						if (!isReorderMode && (e.key === "Enter" || e.key === " ")) {
+							e.preventDefault()
+							handleSelect(config.id)
+						}
+					}}
+					tabIndex={!isReorderMode ? 0 : -1}
 					className={cn(
 						"px-3 py-1.5 text-sm flex items-center group relative",
 						!isReorderMode && "cursor-pointer hover:bg-vscode-list-hoverBackground",
@@ -270,6 +280,7 @@ export const ApiConfigSelector = ({
 									variant="ghost"
 									size="icon"
 									tabIndex={-1}
+									aria-label={isPinned ? t("apiConfigSelector.unpin") : t("apiConfigSelector.pin")}
 									onClick={(e) => {
 										e.stopPropagation()
 										togglePinnedApiConfig(config.id)
@@ -307,6 +318,9 @@ export const ApiConfigSelector = ({
 				<PopoverTrigger
 					disabled={disabled}
 					data-testid="dropdown-trigger"
+					aria-label={title}
+					aria-expanded={open}
+					aria-haspopup="listbox"
 					className={cn(
 						"w-full min-w-0 max-w-full inline-flex items-center gap-1.5 relative whitespace-nowrap px-1.5 py-1 text-xs",
 						"bg-transparent border border-[rgba(255,255,255,0.08)] rounded-md text-vscode-foreground",
@@ -347,6 +361,15 @@ export const ApiConfigSelector = ({
 									<span
 										className="codicon codicon-close text-vscode-input-foreground opacity-50 hover:opacity-100 text-xs cursor-pointer"
 										onClick={() => setSearchValue("")}
+										aria-label="Clear search"
+										role="button"
+										tabIndex={0}
+										onKeyDown={(e) => {
+											if (e.key === "Enter" || e.key === " ") {
+												e.preventDefault()
+												setSearchValue("")
+											}
+										}}
 									/>
 								</div>
 							)}
@@ -360,7 +383,11 @@ export const ApiConfigSelector = ({
 					)}
 
 					{/* Config list */}
-					<div ref={scrollContainerRef} className="max-h-[300px] overflow-y-auto">
+					<div
+						ref={scrollContainerRef}
+						className="max-h-[300px] overflow-y-auto"
+						role="listbox"
+						aria-label={t("prompts:apiConfiguration.select")}>
 						{filteredConfigs.length === 0 && searchValue ? (
 							<div className="py-2 px-3 text-sm text-vscode-foreground/70">
 								{t("common:ui.no_results")}
@@ -398,6 +425,8 @@ export const ApiConfigSelector = ({
 												key={mode}
 												variant="ghost"
 												size="sm"
+												aria-label={`${t("apiConfigSelector.sort")} ${mode === "alphabetical" ? t("apiConfigSelector.alphabetical") : t("apiConfigSelector.custom")}`}
+												aria-pressed={sortMode === mode}
 												onClick={() => handleSortModeChange(mode)}
 												className={cn(
 													"h-6 px-2 text-xs",
@@ -415,6 +444,7 @@ export const ApiConfigSelector = ({
 									<Button
 										variant="ghost"
 										size="sm"
+										aria-label={t("apiConfigSelector.reorder")}
 										onClick={handleReorderClick}
 										className="h-6 px-2 text-xs">
 										{t("apiConfigSelector.reorder")}
@@ -433,13 +463,15 @@ export const ApiConfigSelector = ({
 									<Button
 										variant="ghost"
 										size="sm"
+										aria-label={t("apiConfigSelector.cancel")}
 										onClick={handleReorderCancel}
 										className="h-6 px-2 text-xs">
 										{t("apiConfigSelector.cancel")}
 									</Button>
 									<Button
 										variant="ghost"
 										size="sm"
+										aria-label={t("apiConfigSelector.done")}
 										onClick={handleReorderDone}
 										className="h-6 px-2 text-xs bg-vscode-button-background text-vscode-button-foreground">
 										{t("apiConfigSelector.done")}
@@ -456,14 +488,19 @@ export const ApiConfigSelector = ({
 									title={t("apiConfigSelector.editConfigurations")}
 									onClick={handleEditClick}
 									tooltip={false}
+									aria-label="chat:edit"
 								/>
 							</div>
 
 							{/* Info icon and title on the right with matching spacing */}
 							<div className="flex items-center gap-1 pr-1">
 								{listApiConfigMeta.length > 6 && (
 									<StandardTooltip content={t("prompts:apiConfiguration.select")}>
-										<span className="codicon codicon-info text-xs text-vscode-descriptionForeground opacity-70 hover:opacity-100 cursor-help" />
+										<span
+											className="codicon codicon-info text-xs text-vscode-descriptionForeground opacity-70 hover:opacity-100 cursor-help"
+											aria-label={t("prompts:apiConfiguration.select")}
+											role="img"
+										/>
 									</StandardTooltip>
 								)}
 								<h4 className="m-0 font-medium text-sm text-vscode-descriptionForeground">

webview-ui/src/components/chat/__tests__/ApiConfigSelector.spec.tsx

@@ -346,7 +346,7 @@ describe("ApiConfigSelector", () => {
 
 		// Find the settings button by its icon class within the popover content
 		const popoverContent = screen.getByTestId("popover-content")
-		const settingsButton = popoverContent.querySelector(".codicon-settings-gear") as HTMLElement
+		const settingsButton = popoverContent.querySelector('[aria-label="chat:edit"]') as HTMLElement
 		expect(settingsButton).toBeInTheDocument()
 		fireEvent.click(settingsButton)