Remove invalid value attribute from <select> (#3421)

Co-authored-by: Chris Swithinbank <[email protected]>

Author: andersk

.changeset/plenty-sloths-repeat.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Removes an invalid `value` attribute from the language and theme selectors

packages/starlight/components/LanguageSelect.astro

@@ -18,7 +18,6 @@ function localizedPathname(locale: string | undefined): string {
 			<Select
 				icon="translate"
 				label={Astro.locals.t('languageSelect.accessibleLabel')}
-				value={localizedPathname(Astro.locals.starlightRoute.locale)}
 				options={Object.entries(config.locales).map(([code, locale]) => ({
 					value: localizedPathname(code),
 					selected: code === Astro.locals.starlightRoute.locale,

packages/starlight/components/Select.astro

@@ -3,7 +3,6 @@ import Icon from '../user-components/Icon.astro';
 
 interface Props {
 	label: string;
-	value: string;
 	icon: Parameters<typeof Icon>[0]['name'];
 	width?: string;
 	options: Array<{
@@ -26,7 +25,7 @@ interface Props {
 <label style={`--sl-select-width: ${Astro.props.width}`}>
 	<span class="sr-only">{Astro.props.label}</span>
 	<Icon name={Astro.props.icon} class="icon label-icon" />
-	<select value={Astro.props.value} autocomplete="off">
+	<select autocomplete="off">
 		{
 			Astro.props.options.map(({ value, selected, label }) => (
 				<option value={value} selected={selected} set:html={label} />

packages/starlight/components/ThemeSelect.astro

@@ -7,7 +7,6 @@ import Select from './Select.astro';
 	<Select
 		icon="laptop"
 		label={Astro.locals.t('themeSelect.accessibleLabel')}
-		value="auto"
 		options={[
 			{ label: Astro.locals.t('themeSelect.dark'), selected: false, value: 'dark' },
 			{ label: Astro.locals.t('themeSelect.light'), selected: false, value: 'light' },