fix(webview): label codex speed selector

Author: WebMad

webview-ui/src/components/settings/providers/OpenAICodexSpeedSelector.tsx

@@ -15,17 +15,20 @@ interface OpenAICodexSpeedSelectorProps {
 
 export const OpenAICodexSpeedSelector: React.FC<OpenAICodexSpeedSelectorProps> = ({ value, onValueChange }) => {
 	const { t } = useAppTranslation()
+	const selectId = React.useId()
 
 	return (
 		<div className="flex flex-col gap-1" data-testid="openai-codex-service-tier">
 			<div className="flex items-center gap-1">
-				<label className="block font-medium">{t("settings:openAiCodexSpeed.label")}</label>
+				<label htmlFor={selectId} className="block font-medium">
+					{t("settings:openAiCodexSpeed.label")}
+				</label>
 				<StandardTooltip content={t("settings:openAiCodexSpeed.tooltip")}>
 					<i className="codicon codicon-info text-vscode-descriptionForeground text-xs" />
 				</StandardTooltip>
 			</div>
 			<Select value={value ?? OpenAiCodexServiceTier.Default} onValueChange={onValueChange}>
-				<SelectTrigger className="w-full">
+				<SelectTrigger id={selectId} className="w-full">
 					<SelectValue placeholder={t("settings:common.select")} />
 				</SelectTrigger>
 				<SelectContent>

webview-ui/src/components/settings/providers/__tests__/OpenAICodex.visual.tsx

@@ -26,9 +26,11 @@ for (const theme of themes) {
 	test(`renders both OpenAI Codex speeds in the VS Code ${theme.name} theme`, async ({ mount }) => {
 		const component = await mount(<OpenAICodexFixture />)
 		const selectors = component.getByTestId("openai-codex-service-tier")
+		const comboboxes = component.getByRole("combobox", { name: "Speed" })
 		const selector = selectors.first()
 
 		await expect(selectors).toHaveCount(2)
+		await expect(comboboxes).toHaveCount(2)
 		await selector.evaluate((element, { bodyClass, themeId }) => {
 			const { document } = element.ownerDocument.defaultView!