From dc331337b7d582cdb97751b2d76ab50f013b8365 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Tue, 1 Apr 2025 21:26:51 +0800
Subject: [PATCH] refactor(plugin-md-power): improve a11y in `Abbreviation`

---
 .../src/client/components/Abbreviation.vue    | 37 +++++++++++++++----
 .../plugin-md-power/src/node/inline/abbr.ts   |  4 +-
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/plugins/plugin-md-power/src/client/components/Abbreviation.vue b/plugins/plugin-md-power/src/client/components/Abbreviation.vue
index 47ef4800..700f5f05 100644
--- a/plugins/plugin-md-power/src/client/components/Abbreviation.vue
+++ b/plugins/plugin-md-power/src/client/components/Abbreviation.vue
@@ -1,11 +1,27 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
+import { onClickOutside, useMediaQuery, useToggle } from '@vueuse/core'
 import { nextTick, ref, useTemplateRef, watch } from 'vue'
 
-const show = ref(false)
+import '@vuepress/helper/transition/fade-in.css'
+
+const [show, toggle] = useToggle(false)
+
+const el = useTemplateRef<HTMLSpanElement>('el')
 const tooltip = useTemplateRef<HTMLSpanElement>('tooltip')
 const styles = ref<CSSProperties>()
 
+const isMobile = useMediaQuery('(max-width: 768px)')
+const showTooltip = () => toggle(true)
+const hiddenTooltip = () => toggle(false)
+
+onClickOutside(el, () => {
+  if (isMobile.value)
+    hiddenTooltip()
+}, {
+  ignore: [tooltip],
+})
+
 watch(show, () => nextTick(() => {
   if (__VUEPRESS_SSR__)
     return
@@ -33,16 +49,23 @@ watch(show, () => nextTick(() => {
 
 <template>
   <span
+    ref="el"
     class="vp-abbr"
-    @mouseenter="show = true"
-    @mouseleave="show = false"
-    @focus="show = true"
-    @blur="show = false"
+    role="tooltip"
+    tabindex="0"
+    v-bind="isMobile ? {
+      onClick: showTooltip,
+    } : {
+      onMouseenter: showTooltip,
+      onMouseleave: hiddenTooltip,
+      onFocus: showTooltip,
+      onBlur: hiddenTooltip,
+    }"
   >
     <slot />
     <ClientOnly>
-      <Transition name="fade">
-        <span v-show="show" ref="tooltip" class="vp-abbr-tooltip ignore-header" :style="styles">
+      <Transition name="fade-in">
+        <span v-show="show" ref="tooltip" class="vp-abbr-tooltip ignore-header" :style="styles" aria-hidden="true">
           <slot name="tooltip" />
         </span>
       </Transition>
diff --git a/plugins/plugin-md-power/src/node/inline/abbr.ts b/plugins/plugin-md-power/src/node/inline/abbr.ts
index 52cec264..944efe74 100644
--- a/plugins/plugin-md-power/src/node/inline/abbr.ts
+++ b/plugins/plugin-md-power/src/node/inline/abbr.ts
@@ -177,6 +177,8 @@ export const abbrPlugin: PluginSimple = (md) => {
 
   md.renderer.rules.abbreviation = (tokens, idx, _, env) => {
     const { content, info } = tokens[idx]
-    return `<Abbreviation>${content}${info ? `<template #tooltip>${md.renderInline(info, cleanMarkdownEnv(env))}</template>` : ''}</Abbreviation>`
+    const rendered = md.renderInline(info, cleanMarkdownEnv(env))
+    const label = rendered.replace(/<[^>]*>/g, '')
+    return `<Abbreviation aria-label="${label}">${content}${info ? `<template #tooltip>${rendered}</template>` : ''}</Abbreviation>`
   }
 }