Label select elements for screen readers

ZEBAS204 · Mar 24, 2023 · 6d059ba · 6d059ba
1 parent 1d664ca
commit 6d059ba
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/components/settings/Interface.jsx b/src/components/settings/Interface.jsx
@@ -59,7 +59,7 @@ const Interface = ({
 
 	return (
 		<>
-			<Stack heading={t('settings.language')} mt={0}>
+			<Stack as="label" heading={t('settings.language')} mt={0}>
 				<Select
 					value={
 						// Get current language without country code
@@ -77,7 +77,7 @@ const Interface = ({
 					}
 				</Select>
 			</Stack>
-			<Stack heading={t('settings.language_words')}>
+			<Stack as="label" heading={t('settings.language_words')}>
 				<LanguageSelector
 					value={wordsLang}
 					onChange={(e) => setWordsLang(e.target.value)}
@@ -89,7 +89,7 @@ const Interface = ({
 				//* Allow to manually set language options when language="custom"
 				wordsLang === 'custom' && (
 					<Stack mt={2} justify="space-around">
-						<Stack mt={0} direction="column">
+						<Stack as="label" mt={0} direction="column">
 							<SmallHeading>{t('common.adjective')}</SmallHeading>
 							<LanguageSelector
 								value={adjLang}
@@ -108,7 +108,7 @@ const Interface = ({
 							onClick={() => toggleWordFlip()}
 						/>
 
-						<Stack mt={0} direction="column">
+						<Stack as="label" mt={0} direction="column">
 							<SmallHeading>{t('common.noun')}</SmallHeading>
 							<LanguageSelector
 								value={nounLang}