fix(a11y): mobile and theme switcher (#2354)

vuejs · May 10, 2023 · d6c0985 · d6c0985
1 parent 97065ce
commit d6c0985
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
@@ -175,6 +175,12 @@ const classes = computed(() => ({
   }
 }
 
+@media (max-width: 768px) {
+  .content-body {
+    column-gap: 0.5rem;
+  }
+}
+
 .menu + .translations::before,
 .menu + .appearance::before,
 .menu + .social-links::before,

diff --git a/src/client/theme-default/components/VPNavBarSearchButton.vue b/src/client/theme-default/components/VPNavBarSearchButton.vue
@@ -61,7 +61,7 @@ defineProps<{
   align-items: center;
   margin: 0;
   padding: 0;
-  width: 32px;
+  width: 48px;
   height: 55px;
   background: transparent;
   transition: border-color 0.25s;

diff --git a/src/client/theme-default/components/VPSwitchAppearance.vue b/src/client/theme-default/components/VPSwitchAppearance.vue
@@ -75,16 +75,15 @@ watch(checked, (newIsDark) => {
 </script>
 
 <template>
-  <label title="toggle dark mode">
-    <VPSwitch
-      class="VPSwitchAppearance"
-      :aria-checked="checked"
-      @click="toggle"
-    >
-      <VPIconSun class="sun" />
-      <VPIconMoon class="moon" />
-    </VPSwitch>
-  </label>
+  <VPSwitch
+    title="toggle dark mode"
+    class="VPSwitchAppearance"
+    :aria-checked="checked"
+    @click="toggle"
+  >
+    <VPIconSun class="sun" />
+    <VPIconMoon class="moon" />
+  </VPSwitch>
 </template>
 
 <style scoped>