From eb9026d83ca17c59893e7063e0c64b0bf1b99765 Mon Sep 17 00:00:00 2001
From: Percy Ma <kecrily@gmail.com>
Date: Wed, 31 Aug 2022 12:57:28 +0800
Subject: [PATCH] perf(a11y): add aria-checked attribute to switch (#644)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 .../theme-default/components/VPSwitchAppearance.vue       | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/client/theme-default/components/VPSwitchAppearance.vue b/src/client/theme-default/components/VPSwitchAppearance.vue
index d4742bd43f82..9f97038d96eb 100644
--- a/src/client/theme-default/components/VPSwitchAppearance.vue
+++ b/src/client/theme-default/components/VPSwitchAppearance.vue
@@ -1,11 +1,17 @@
 <script lang="ts" setup>
+import { ref, onMounted } from 'vue'
 import { APPEARANCE_KEY } from '../../shared.js'
 import VPSwitch from './VPSwitch.vue'
 import VPIconSun from './icons/VPIconSun.vue'
 import VPIconMoon from './icons/VPIconMoon.vue'
 
+const checked = ref(false)
 const toggle = typeof localStorage !== 'undefined' ? useAppearance() : () => {}
 
+onMounted(() => {
+  checked.value = document.documentElement.classList.contains('dark')
+})
+
 function useAppearance() {
   const query = window.matchMedia('(prefers-color-scheme: dark)')
   const classList = document.documentElement.classList
@@ -33,6 +39,7 @@ function useAppearance() {
   }
 
   function setClass(dark: boolean): void {
+    checked.value = dark
     classList[dark ? 'add' : 'remove']('dark')
   }
 
@@ -44,6 +51,7 @@ function useAppearance() {
   <VPSwitch
     class="VPSwitchAppearance"
     aria-label="toggle dark mode"
+    :aria-checked="checked"
     @click="toggle"
   >
     <VPIconSun class="sun" />