fix: dark mode toggle reachable with keyboard (#1931)

* Fixing Dark mode toggle is not reachable with keyboard navigation * Replacing a tag with the button Issue #1927 * Replacing a tag with the button Issue #1927 * Fix margins due to a tag changing to button Co-authored-by: vasu <vasu@vasus-MacBook-Air.local>
EddieHubCommunity · Nov 5, 2022 · 80fd19d · 80fd19d
1 parent ff35aba
commit 80fd19d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/Components/Navbar.css b/src/Components/Navbar.css
@@ -3,8 +3,11 @@
 }
 
 .theme--button {
-  margin-left: 1rem;
+  border: none;
+  background-color: transparent;
+  margin-left: 0.5rem;
   cursor: pointer;
+  margin-right: -0.4rem;
 }
 
 @media screen and (max-width: 320px) {

diff --git a/src/Components/Navbar.js b/src/Components/Navbar.js
@@ -43,7 +43,7 @@ function Navbar({ items, start, end }) {
 
         <div style={theme}>v{version}</div>
 
-        <div className="theme--button">
+        <button className="theme--button">
           {darkTheme
             ? (
             <GetIcons
@@ -56,7 +56,7 @@ function Navbar({ items, start, end }) {
             : (
             <GetIcons iconName="sun" onClick={toggleTheme} size={20} />
               )}
-        </div>
+        </button>
       </div>
     )
   }