fix(ui): sync kbd-shortcuts data attribute on toggle

Author: danielroe

app/components/Button/Base.vue

@@ -27,7 +27,6 @@ const props = withDefaults(
 const el = useTemplateRef('el')
 
 const keyboardShortcutsEnabled = useKeyboardShortcuts()
-const showKbdHint = computed(() => keyboardShortcutsEnabled.value && !!props.ariaKeyshortcuts)
 
 defineExpose({
   focus: () => el.value?.focus(),
@@ -64,7 +63,7 @@ defineExpose({
     <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
     <kbd
-      v-if="showKbdHint"
+      v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
       data-kbd-hint
       class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"

app/components/Link/Base.vue

@@ -60,7 +60,6 @@ const isButton = computed(() => !isLink.value)
 const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
 const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
 const keyboardShortcutsEnabled = useKeyboardShortcuts()
-const showKbdHint = computed(() => keyboardShortcutsEnabled.value && !!props.ariaKeyshortcuts)
 </script>
 
 <template>
@@ -116,7 +115,7 @@ const showKbdHint = computed(() => keyboardShortcutsEnabled.value && !!props.ari
       aria-hidden="true"
     />
     <kbd
-      v-if="showKbdHint"
+      v-if="keyboardShortcutsEnabled && ariaKeyshortcuts"
       data-kbd-hint
       class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"

app/composables/useSettings.ts

@@ -104,10 +104,26 @@ export function useRelativeDates() {
  * Composable for accessing just the keyboard shortcuts setting.
  * Useful for components that only need to read this specific setting.
  */
-export function useKeyboardShortcuts() {
+export const useKeyboardShortcuts = createSharedComposable(function useKeyboardShortcuts() {
   const { settings } = useSettings()
-  return computed(() => settings.value.keyboardShortcuts)
-}
+  const enabled = computed(() => settings.value.keyboardShortcuts)
+
+  if (import.meta.client) {
+    watch(
+      enabled,
+      value => {
+        if (value) {
+          delete document.documentElement.dataset.kbdShortcuts
+        } else {
+          document.documentElement.dataset.kbdShortcuts = 'false'
+        }
+      },
+      { immediate: true },
+    )
+  }
+
+  return enabled
+})
 
 /**
  * Composable for managing accent color.