fix(site): remove redundant alt text to prevent duplicated accessible names (#19087)

ssncferreira · web-flow · commit 44d93569859f · 2025-07-30T09:54:43.000+01:00
## Description Removes the redundant `alt` text in the `Combobox` component to prevent screen readers from announcing duplicated names (e.g. "Rust Rust"). ## Changes * Remove redundant `alt` text from `Combobox` `ExternalImage` * Update `Combobox` tests accordingly Related to: #19063 (comment)
diff --git a/site/src/components/Combobox/Combobox.stories.tsx b/site/src/components/Combobox/Combobox.stories.tsx
@@ -103,8 +103,7 @@ export const SearchAndFilter: Story = {
 				screen.queryByRole("option", { name: "Kotlin" }),
 			).not.toBeInTheDocument();
 		});
-		// Accessible name includes both image alt text and text content: "Rust Rust"
-		await userEvent.click(screen.getByRole("option", { name: "Rust Rust" }));
+		await userEvent.click(screen.getByRole("option", { name: "Rust" }));
 	},
 };
 
@@ -138,11 +137,9 @@ export const ClearSelectedOption: Story = {
 		await userEvent.click(canvas.getByRole("button"));
 		// const goOption = screen.getByText("Go");
 		// First select an option
-		// Accessible name includes both image alt text and text content: "Go Go"
-		await userEvent.click(await screen.findByRole("option", { name: "Go Go" }));
+		await userEvent.click(await screen.findByRole("option", { name: "Go" }));
 		// Then clear it by selecting it again
-		// Accessible name includes both image alt text and text content: "Go Go"
-		await userEvent.click(await screen.findByRole("option", { name: "Go Go" }));
+		await userEvent.click(await screen.findByRole("option", { name: "Go" }));
 
 		await waitFor(() =>
 			expect(canvas.getByRole("button")).toHaveTextContent("Select option"),
diff --git a/site/src/components/Combobox/Combobox.tsx b/site/src/components/Combobox/Combobox.tsx
@@ -124,7 +124,7 @@ export const Combobox: FC<ComboboxProps> = ({
 											<ExternalImage
 												className="w-4 h-4 object-contain"
 												src={option.icon}
-												alt={option.displayName}
+												alt=""
 											/>
 										) : (
 											/* Placeholder for missing icon to maintain layout consistency */
