Make flip words button act as checkbox

Now screen readers should be able to distinguish when it is activated or not.
ZEBAS204 · Mar 28, 2023 · 0cd1f91 · 0cd1f91
1 parent ce51b6b
commit 0cd1f91
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/src/components/settings/Interface.jsx b/src/components/settings/Interface.jsx
@@ -98,14 +98,15 @@ const Interface = ({
 						</Stack>
 
 						<IconButton
+							role="checkbox"
 							size="lg"
 							rounded="full"
 							variant="solid"
 							icon={<FlipIcon />}
-							title={t('settings.language_word_flip')}
-							aria-label={t('settings.language_word_flip')}
+							aria-checked={isWordDisplayFlip}
 							colorScheme={isWordDisplayFlip ? 'green' : 'red'}
 							onClick={() => toggleWordFlip()}
+							title={t('settings.language_word_flip')}
 						/>
 
 						<Stack as="label" mt={0} direction="column">