feat(components): improve a11y on backToTop button

vuepress-theme-hope · Nov 20, 2023 · dcfbe3f · dcfbe3f · thanesh · Dec 14, 2023
1 parent 46f930d
commit dcfbe3f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/packages/components/src/client/components/BackToTop.ts b/packages/components/src/client/components/BackToTop.ts
@@ -56,7 +56,7 @@ export default defineComponent({
     );
 
     const progress = computed(
-      () => y.value / (bodyHeight.value - windowHeight.value),
+      () => (y.value / (bodyHeight.value - windowHeight.value)) * 100,
     );
 
     onMounted(() => {
@@ -83,19 +83,27 @@ export default defineComponent({
                 props.noProgress
                   ? null
                   : h(
-                      "svg",
-                      { class: "vp-scroll-progress" },
-                      h("circle", {
-                        cx: "50%",
-                        cy: "50%",
-                        style: {
-                          "stroke-dasharray": `calc(${
-                            Math.PI * progress.value * 100
-                          }% - ${4 * Math.PI}px) calc(${Math.PI * 100}% - ${
-                            4 * Math.PI
-                          }px)`,
-                        },
-                      }),
+                      "span",
+                      {
+                        class: "vp-scroll-progress",
+                        role: "progressbar",
+                        "aria-labelledby": "loadinglabel",
+                        "aria-valuenow": progress.value,
+                      },
+                      h(
+                        "svg",
+                        h("circle", {
+                          cx: "50%",
+                          cy: "50%",
+                          style: {
+                            "stroke-dasharray": `calc(${
+                              Math.PI * progress.value
+                            }% - ${4 * Math.PI}px) calc(${Math.PI * 100}% - ${
+                              4 * Math.PI
+                            }px)`,
+                          },
+                        }),
+                      ),
                     ),
                 h(BackToTopIcon),
               ],

diff --git a/packages/components/src/client/styles/back-to-top.scss b/packages/components/src/client/styles/back-to-top.scss
@@ -56,6 +56,11 @@
     height: 40px;
   }
 
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
   circle {
     opacity: 0.9;
     fill: none;