OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

improve a11y for dark/light mode button

Browse source 
add an aria-label, and move it to a better tab position at the end of the page, to match the visual placement
This commit is contained in:
Emi Matchu 2020-08-12 10:59:27 -07:00
parent 2aa4d2b2c0
commit 500068b41b
1 changed files with 4 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app/HomePage.js
View file

@ -31,7 +31,6 @@ function HomePage() {
return ( return (
<Flex direction="column" p="6" align="center" textAlign="center"> <Flex direction="column" p="6" align="center" textAlign="center">
<ColorModeToggleButton />
<Box height="8" /> <Box height="8" />
<Box <Box
width="200px" width="200px"
@ -66,6 +65,7 @@ function HomePage() {
</Box> </Box>
<Box height="4" /> <Box height="4" />
<SubmitPetForm /> <SubmitPetForm />
<ColorModeToggleButton />
</Flex> </Flex>
); );
} }
@ -246,6 +246,9 @@ function ColorModeToggleButton() {
return ( return (
<IconButton <IconButton
aria-label={
colorMode === "light" ? "Switch to dark mode" : "Switch to light mode"
}
icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />} icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode} onClick={toggleColorMode}
variant="ghost" variant="ghost"