feat(link-node): add tooltip support and aria-label for accessibility

Author: Simon-He95

src/components/LinkNode/LinkNode.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, useAttrs } from 'vue'
+import { hideTooltip, showTooltipForAnchor } from '../../composables/useSingletonTooltip'
 import EmphasisNode from '../EmphasisNode/EmphasisNode.vue'
 import StrikethroughNode from '../StrikethroughNode'
 import StrongNode from '../StrongNode'
@@ -17,10 +18,12 @@ interface LinkNode {
 }
 
 // 接收props — 把动画/颜色相关配置暴露为props，并通过CSS变量注入样式
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   node: LinkNode
   indexKey: number | string
   customId?: string
+  /** whether to show the custom singleton tooltip on hover/focus. Default: true */
+  showTooltip?: boolean
   /** link text / underline color (CSS color string) */
   color?: string
   /** underline height in px */
@@ -35,7 +38,9 @@ const props = defineProps<{
   animationTiming?: string
   /** animation iteration (e.g. 'infinite' or a number) */
   animationIteration?: string | number
-}>()
+}>(), {
+  showTooltip: true,
+})
 
 const cssVars = computed(() => {
   const bottom = props.underlineBottom !== undefined
@@ -63,19 +68,39 @@ const nodeComponents = {
 
 // forward any non-prop attributes (e.g. custom-id) to the rendered element
 const attrs = useAttrs()
+
+// Tooltip handlers using singleton tooltip
+function onAnchorEnter(e: Event) {
+  if (!props.showTooltip)
+    return
+  const ev = e as MouseEvent
+  const origin = ev?.clientX != null && ev?.clientY != null ? { x: ev.clientX, y: ev.clientY } : undefined
+  // show the link href in tooltip; fall back to title/text if href missing
+  const txt = props.node?.href ?? props.node?.title ?? props.node?.text ?? ''
+  showTooltipForAnchor(e.currentTarget as HTMLElement, txt, 'top', false, origin)
+}
+
+function onAnchorLeave() {
+  if (!props.showTooltip)
+    return
+  hideTooltip()
+}
 </script>
 
 <template>
   <a
     v-if="!node.loading"
     class="link-node"
     :href="node.href"
-    :title="String(node.title ?? '')"
+    :title="!props.showTooltip ? String(node.href ?? node.title ?? '') : undefined"
+    :aria-label="`Link: ${node.href ?? node.title ?? node.text}`"
     :aria-hidden="node.loading ? 'true' : 'false'"
     target="_blank"
     rel="noopener noreferrer"
     v-bind="attrs"
     :style="cssVars"
+    @mouseenter="(e) => onAnchorEnter(e)"
+    @mouseleave="onAnchorLeave"
   >
     <component
       :is="nodeComponents[child.type]"

test/e2e/__snapshots__/node-renderer.e2e.test.ts.snap

@@ -282,7 +282,7 @@ exports[`markdownRender node e2e coverage > renders link node 1`] = `
   <div data-v-8dfe8a80="">
     <!-- Skip wrapping code_block nodes in transitions to avoid touching Monaco editor internals -->
     <transition-stub data-v-8dfe8a80="" name="typewriter" appear="true" persisted="false" css="true">
-      <p data-v-93ee5c2d="" data-v-8dfe8a80="" dir="auto" class="paragraph-node" is-dark="false"><span data-v-a84b8095="" data-v-93ee5c2d="" class="whitespace-pre-wrap break-words text-node" index-key="markdown-renderer-0-0">Visit </span><a data-v-994bfd08="" data-v-93ee5c2d="" class="link-node" href="https://vuejs.org" title="" aria-hidden="false" target="_blank" rel="noopener noreferrer" style="--link-color: #0366d6; --underline-height: 2px; --underline-bottom: -3px; --underline-opacity: 0.9; --underline-duration: 0.8s; --underline-timing: linear; --underline-iteration: infinite;"><span data-v-a84b8095="" data-v-994bfd08="" class="whitespace-pre-wrap break-words text-node" index-key="markdown-renderer-0-1-0">Vue</span></a><span data-v-a84b8095="" data-v-93ee5c2d="" class="whitespace-pre-wrap break-words text-node" index-key="markdown-renderer-0-2"> now.</span></p>
+      <p data-v-93ee5c2d="" data-v-8dfe8a80="" dir="auto" class="paragraph-node" is-dark="false"><span data-v-a84b8095="" data-v-93ee5c2d="" class="whitespace-pre-wrap break-words text-node" index-key="markdown-renderer-0-0">Visit </span><a data-v-994bfd08="" data-v-93ee5c2d="" class="link-node" href="https://vuejs.org" aria-label="Link: https://vuejs.org" aria-hidden="false" target="_blank" rel="noopener noreferrer" style="--link-color: #0366d6; --underline-height: 2px; --underline-bottom: -3px; --underline-opacity: 0.9; --underline-duration: 0.8s; --underline-timing: linear; --underline-iteration: infinite;"><span data-v-a84b8095="" data-v-994bfd08="" class="whitespace-pre-wrap break-words text-node" index-key="markdown-renderer-0-1-0">Vue</span></a><span data-v-a84b8095="" data-v-93ee5c2d="" class="whitespace-pre-wrap break-words text-node" index-key="markdown-renderer-0-2"> now.</span></p>
     </transition-stub>
   </div>
 </div>"