365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve accessibility for Dark Mode

Browse Source
This commit is contained in:
prototypa
2022-08-10 14:46:45 -04:00
parent 63e6ee9c05
commit fa8da6bdc1
5 changed files with 36 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/astro/headers/BasicHeader.astro
View File

@@ -1,6 +1,6 @@
---
import { IconSun, IconGithub, IconMenu } from "~/components/astro/icons";
const { } = Astro.props;
import { IconSun, IconGithub, IconMenu } from "~/components/astro/icons";
const { } = Astro.props;
---
<header
@@ -15,15 +15,12 @@
<div class="flex items-center lg:hidden">
<button type="button"
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Toggle between Dark and Light mode"
onclick="window.toggleDarkMode()">
aria-label="Toggle between Dark and Light mode" onclick="window.toggleDarkMode()">
<IconSun />
</button>
<button
class="ml-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="Toggle Menu"
onclick="toggleMenu()">
aria-label="Toggle Menu" onclick="toggleMenu()">
<IconMenu />
</button>
</div>