From 500068b41b054abc52f28c838e88386406825731 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 12 Aug 2020 10:59:27 -0700
Subject: [PATCH] improve a11y for dark/light mode button

add an aria-label, and move it to a better tab position at the end of the page, to match the visual placement
---
 src/app/HomePage.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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