Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(a11y): update theme switch button for better accessibility

Browse Source 
Update title, add aria-label and aria-live in theme switch button.
This commit is contained in:
satnaing
2022-11-26 23:45:17 +06:30
parent 0eeed8e870
commit 2ba459b413
1 changed files with 3 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.astro
+3 -14
View File
@@ -76,7 +76,9 @@ const { activeNav } = Astro.props;
<button <button
id="theme-btn" id="theme-btn"
class="focus-outline" class="focus-outline"
aria-label="switch theme" title="Toggles light & dark"
aria-label="auto"
aria-live="polite"
> >
<svg xmlns="http://www.w3.org/2000/svg" id="moon-svg"> <svg xmlns="http://www.w3.org/2000/svg" id="moon-svg">
<path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z" /> <path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z" />
@@ -165,19 +167,6 @@ const { activeNav } = Astro.props;
</style> </style>
<script> <script>
// Toggle Theme
const themeBtn = document.querySelector("#theme-btn");
const htmlClassList = document.querySelector("html")?.classList;
themeBtn?.addEventListener("click", function () {
if (htmlClassList?.contains("theme-dark")) {
localStorage.setItem("theme", "light");
htmlClassList?.remove("theme-dark");
} else {
localStorage.setItem("theme", "dark");
htmlClassList?.add("theme-dark");
}
});
// Toggle menu // Toggle menu
const menuBtn = document.querySelector(".hamburger-menu"); const menuBtn = document.querySelector(".hamburger-menu");
const navClassList = document.querySelector("nav")?.classList; const navClassList = document.querySelector("nav")?.classList;