fix: Improve accessibility of the theme switcher (#160)

* fix: Improve accessibility of the theme switcher * Added some styles back, these aren't redundant in "center" header mode * Restore data-hide attribute * chore: update resources folder with example config.toml * Hide theme switcher's parent via CSS when theme switcher isn't visible * chore: Fixed whitespace * Don't emit the theme switcher's parent at all if theme switcher is hidden Co-authored-by: reuixiy <reuixiy@gmail.com>
reuixiy · May 18, 2020 · e5e6230 · e5e6230
1 parent 115914a
commit e5e6230
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 76 deletions.
diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js
@@ -36,17 +36,20 @@ lightModeMediaQuery.addListener((e) => {
 
 const themeSwitcher = document.getElementById('theme-switcher');
 
-themeSwitcher.addEventListener('change', (e) => {
-    if (!e.target.checked) {
-        changeModeMeta('light');
-        changeMode('light');
-        storePrefers('light');
-    } else {
-        changeModeMeta('dark');
-        changeMode('dark');
-        storePrefers('dark');
-    }
-});
+if (themeSwitcher) {
+    themeSwitcher.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (document.documentElement.dataset.theme == "dark") {
+            changeModeMeta('light');
+            changeMode('light');
+            storePrefers('light');
+        } else {
+            changeModeMeta('dark');
+            changeMode('dark');
+            storePrefers('dark');
+        }
+    });
+}
 
 // Sync Across Tabs
 // https://codepen.io/tevko/pen/GgWYpg
@@ -66,8 +69,6 @@ window.addEventListener('storage', function (event) {
 function changeMode(theme) {
     const isDark = theme === 'dark';
 
-    document.getElementById('theme-switcher').checked = isDark ? true : false;
-
     // Change Chroma Code Highlight Theme
     const oldChromaTheme = isDark ? 'chroma' : 'chroma-dark';
     const newChromaTheme = isDark ? 'chroma-dark' : 'chroma';

diff --git a/assets/js/header.js b/assets/js/header.js
@@ -33,13 +33,11 @@ headerInner.style.setProperty('opacity', 1);
 function addDisplayNone(e) {
     const ele = document.querySelector(e);
     if (ele !== null) {
-        const hide = ele.getAttribute('data-hide') || ele.getAttribute('aria-hidden');
+        const hide = ele.getAttribute('data-hide');
         if (hide !== null) {
             ele.parentNode.style = 'display: none';
         }
     }
 }
 
-addDisplayNone('#theme-switcher');
-
 addDisplayNone('#lang-switcher');
diff --git a/assets/scss/components/_dark-mode.scss b/assets/scss/components/_dark-mode.scss
@@ -1,42 +1,28 @@
 #theme-switcher {
-    position: absolute;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
+    color: var(--color-contrast-medium);
+    transition: color $duration;
+    z-index: 4;
 
-    ~ .switcher-label {
-        .theme-icon-dark {
-            display: none;
-        }
+    &:hover {
+        color: var(--color-primary);
     }
 
-    &:checked {
-        ~ .switcher-label {
-            .theme-icon-light {
-                display: none;
-            }
-            .theme-icon-dark {
-                display: inline-block;
-            }
-        }
+    .theme-icon-dark {
+        display: none;
     }
-}
 
-.switcher-label {
-    position: relative;
-    color: var(--color-contrast-medium);
-    transition: color $duration;
-    cursor: pointer;
-    z-index: 4;
+    [data-theme="dark"] & {
+        .theme-icon-light {
+            display: none;
+        }
+        .theme-icon-dark {
+            display: inline-block;
+        }
+    }
 
     .icon {
         margin-right: 0 !important;
     }
-
-    &:hover {
-        color: var(--color-primary);
-    }
 }
 
 [data-theme="dark"] {
@@ -45,12 +31,8 @@
     }
 }
 
-@if ($headerLayoutFlex) {
-    .switcher-label {
-        display: inline-block;
-    }
-} @else {
-    .switcher-label {
+@if (not $headerLayoutFlex) {
+    #theme-switcher {
         padding: 1em;
         float: right;
     }

diff --git a/...leSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.content b/...leSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.content
diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.json b/exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.json
@@ -1 +1 @@
-{"Target":"css/meme.min.d4f136de05c84f06fc995268df1635c24eb10d07df861c9f4dfaf70b695bf394.css","MediaType":"text/css","Data":{"Integrity":"sha256-1PE23gXITwb8mVJo3xY1wk6xDQffhhyfTfr3C2lb85Q="}}
+{"Target":"css/meme.min.03dd2e12e9a64179095c732f039219abc5b1636e424496e2fb970775f860afa4.css","MediaType":"text/css","Data":{"Integrity":"sha256-A90uEummQXkJXHMvA5IZq8WxY25CRJbi+5cHdfhgr6Q="}}
diff --git a/layouts/partials/components/dark-mode.html b/layouts/partials/components/dark-mode.html
@@ -1,20 +1,9 @@
-{{ if .Site.Params.enableDarkMode }}
-    {{ with .Site.Params.defaultTheme | default "light" }}
-        {{- $hide := or (and $.IsHome $.Site.Params.hideThemeToggleInHome) (and (not $.IsHome) $.Site.Params.hideThemeToggle) -}}
-        <input
-            type="checkbox"
-            id="theme-switcher"
-            {{ if eq . "dark" }}checked{{ end }}
-            {{ if $hide }}aria-hidden="true"{{ end }}
-        />
-        <label
-            for="theme-switcher"
-            class="switcher-label"
-        >
-            {{- if not $hide -}}
-                {{- partial "utils/icon.html" (dict "Deliver" $ "name" "sun" "class" "theme-icon-light") -}}
-                {{- partial "utils/icon.html" (dict "Deliver" $ "name" "moon" "class" "theme-icon-dark") -}}
-            {{- end -}}
-        </label>
-    {{ end }}
-{{ end }}
+{{- if .Site.Params.enableDarkMode -}}
+    {{- $hide := or (and $.IsHome $.Site.Params.hideThemeToggleInHome) (and (not $.IsHome) $.Site.Params.hideThemeToggle) -}}
+    {{- if not $hide -}}
+        <a id="theme-switcher" href="#">
+            {{- partial "utils/icon.html" (dict "Deliver" $ "name" "sun" "class" "theme-icon-light") -}}
+            {{- partial "utils/icon.html" (dict "Deliver" $ "name" "moon" "class" "theme-icon-dark") -}}
+        </a>
+    {{- end -}}
+{{- end -}}
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
@@ -10,9 +10,12 @@
         {{ range .Site.Menus.main }}
             {{ if and (eq .Identifier "theme-switcher") $.Site.Params.enableDarkMode }}
                 {{ if eq $.Site.Params.headerLayout "flex" }}
-                    <li class="menu-item">
-                        {{ partial "components/dark-mode.html" $ctx }}
-                    </li>
+                    {{ $switcher := partial "components/dark-mode.html" $ctx }}
+                    {{ with $switcher }}
+                      <li class="menu-item">
+                          {{ . }}
+                      </li>
+                    {{ end }}
                 {{ end }}
             {{ else if eq .Identifier "lang-switcher" }}
                 {{ if and $.Site.IsMultiLingual $.Site.Params.enableLangToggle }}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"Target":"css/meme.min.d4f136de05c84f06fc995268df1635c24eb10d07df861c9f4dfaf70b695bf394.css","MediaType":"text/css","Data":{"Integrity":"sha256-1PE23gXITwb8mVJo3xY1wk6xDQffhhyfTfr3C2lb85Q="}}
		{"Target":"css/meme.min.03dd2e12e9a64179095c732f039219abc5b1636e424496e2fb970775f860afa4.css","MediaType":"text/css","Data":{"Integrity":"sha256-A90uEummQXkJXHMvA5IZq8WxY25CRJbi+5cHdfhgr6Q="}}