feat(theme): improve a11y

vuepress-theme-hope · Apr 7, 2023 · 6d13051 · 6d13051
1 parent 665332e
commit 6d13051
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/theme/src/client/modules/blog/components/BloggerInfo.ts b/packages/theme/src/client/modules/blog/components/BloggerInfo.ts
@@ -1,5 +1,6 @@
 import { useSiteLocaleData, withBase } from "@vuepress/client";
 import { type VNode, computed, defineComponent, h } from "vue";
+import { RouterLink } from "vue-router";
 import { getAuthor, keys } from "vuepress-shared/client";
 
 import { useNavigate, useThemeLocaleData } from "@theme-hope/composables/index";
@@ -96,19 +97,19 @@ export default defineComponent({
             ]
           ),
           h("div", { class: "num-wrapper" }, [
-            h("div", { onClick: () => navigate(articles.value.path) }, [
+            h(RouterLink, { to: articles.value.path }, () => [
               h("div", { class: "num" }, articles.value.items.length),
               h("div", locale.value.article),
             ]),
-            h("div", { onClick: () => navigate(categoryMap.value.path) }, [
+            h(RouterLink, { to: categoryMap.value.path }, () => [
               h("div", { class: "num" }, keys(categoryMap.value.map).length),
               h("div", locale.value.category),
             ]),
-            h("div", { onClick: () => navigate(tagMap.value.path) }, [
+            h(RouterLink, { to: tagMap.value.path }, () => [
               h("div", { class: "num" }, keys(tagMap.value.map).length),
               h("div", locale.value.tag),
             ]),
-            h("div", { onClick: () => navigate(timelines.value.path) }, [
+            h(RouterLink, { to: timelines.value.path }, () => [
               h("div", { class: "num" }, timelines.value.items.length),
               h("div", locale.value.timeline),
             ]),

diff --git a/packages/theme/src/client/modules/blog/styles/blogger-info.scss b/packages/theme/src/client/modules/blog/styles/blogger-info.scss
@@ -38,9 +38,13 @@
     width: 80%;
     margin: 0 auto 1rem;
 
-    > div {
+    > a {
+      display: block;
+
       width: 25%;
 
+      color: inherit;
+
       font-size: 13px;
       text-align: center;