From 44d93569859fa9040bafe9583c1c12c6dfa7c84e Mon Sep 17 00:00:00 2001
From: Susana Ferreira <susana@coder.com>
Date: Wed, 30 Jul 2025 09:54:43 +0100
Subject: [PATCH] fix(site): remove redundant alt text to prevent duplicated
 accessible names (#19087)

## 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:
https://github.com/coder/coder/pull/19063#discussion_r2240459424
---
 site/src/components/Combobox/Combobox.stories.tsx | 9 +++------
 site/src/components/Combobox/Combobox.tsx         | 2 +-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/site/src/components/Combobox/Combobox.stories.tsx b/site/src/components/Combobox/Combobox.stories.tsx
index 075a57261e..2207f4e646 100644
--- 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
index 6ef29cade0..f2db25b1ef 100644
--- 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 */