feat(components): enhance link a11y

koishijs · Dec 17, 2023 · 8d1957b · 8d1957b
1 parent b7790ec
commit 8d1957b
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 32 deletions.
diff --git a/packages/components/client/index.scss b/packages/components/client/index.scss
@@ -0,0 +1,8 @@
+.k-link {
+  cursor: pointer;
+  text-decoration: underline dotted;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
diff --git a/packages/components/client/index.ts b/packages/components/client/index.ts
@@ -4,6 +4,8 @@ import virtual from './virtual'
 import Comment from './k-comment.vue'
 import ImageViewer from './image-viewer.vue'
 
+import './index.scss'
+
 export * from 'cosmokit'
 export * from './chat'
 export * from './form'

diff --git a/packages/components/client/k-comment.vue b/packages/components/client/k-comment.vue
@@ -70,6 +70,14 @@ const icon = computed(() => {
   & + & {
     margin-top: -1rem;
   }
+
+  :deep(a) {
+    text-decoration: underline dotted;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 </style>
diff --git a/plugins/market/client/extensions/dep-link.vue b/plugins/market/client/extensions/dep-link.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="link" @click.stop="active = name">
+  <span class="k-link" @click.stop="active = name">
     {{ name }}
   </span>
   <span v-if="store.packages[name]?.runtime?.id"> (已加载)</span>
@@ -17,14 +17,3 @@ defineProps<{
 }>()
 
 </script>
-
-<style scoped lang="scss">
-
-.link {
-  &:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-}
-
-</style>
diff --git a/plugins/market/client/extensions/missing.vue b/plugins/market/client/extensions/missing.vue
@@ -1,6 +1,6 @@
 <template>
   <k-comment type="danger">
-    <p>此插件尚未安装，<span class="link" @click="gotoMarket">点击前往插件市场</span>。</p>
+    <p>此插件尚未安装，<span class="k-link" @click="gotoMarket">点击前往插件市场</span>。</p>
   </k-comment>
 </template>
 
@@ -18,14 +18,3 @@ function gotoMarket() {
 }
 
 </script>
-
-<style lang="scss" scoped>
-
-.link {
-  &:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-}
-
-</style>
diff --git a/plugins/market/client/extensions/version.vue b/plugins/market/client/extensions/version.vue
@@ -31,7 +31,7 @@
 
   <!-- external -->
   <k-comment type="warning" v-if="!data.local.workspace && store.dependencies && !store.dependencies[data.name]">
-    <p>尚未将当前插件列入依赖，<span class="link" @click="send('market/install', { [data.name]: data.local.package.version })">点击添加</span>。</p>
+    <p>尚未将当前插件列入依赖，<span class="k-link" @click="send('market/install', { [data.name]: data.local.package.version })">点击添加</span>。</p>
   </k-comment>
 </template>
 
@@ -54,13 +54,6 @@ const versions = computed(() => store.registry?.[props.data.name])
 
 <style lang="scss" scoped>
 
-.link {
-  &:hover {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-}
-
 .navigation {
   margin-bottom: 2rem;
   display: flex;