fix($core): vuejs#2627 Dup ID violates HTML5-4

adico1 · Oct 9, 2020 · 56daec7 · 56daec7
1 parent 235a4aa
commit 56daec7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/packages/@vuepress/core/lib/client/components/OutboundLink.vue b/packages/@vuepress/core/lib/client/components/OutboundLink.vue
@@ -1,13 +1,9 @@
 <template>
-  <span
-    :title="openInNewWindowTitle"
-    class="sr-only"
-  >
+  <span>
     <svg
       class="icon outbound"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
-      role="img"
       focusable="false"
       x="0px"
       y="0px"
@@ -24,6 +20,7 @@
         points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
       />
     </svg>
+    <span class="sr-only">{{ openInNewWindowTitle }}</span>
   </span>
 </template>
 

diff --git a/packages/@vuepress/theme-default/styles/index.styl b/packages/@vuepress/theme-default/styles/index.styl
@@ -189,6 +189,16 @@ th, td
     .sidebar
       top 0
 
+.sr-only 
+  position absolute
+  width 1px
+  height 1px
+  padding 0
+  margin -1px
+  overflow hidden
+  clip rect(0, 0, 0, 0)
+  white-space nowrap
+  border-width 0
 
 @media (min-width: ($MQMobile + 1px))
   .theme-container.no-sidebar