perf(a11y): change copy code span to button (#1056)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

src/client/theme-default/composables/copy-code.ts

@@ -11,7 +11,7 @@ export function useCopyCode() {
         nextTick(() => {
           document
             .querySelectorAll<HTMLSpanElement>(
-              '.vp-doc div[class*="language-"] > span.copy'
+              '.vp-doc div[class*="language-"] > button.copy'
             )
             .forEach(handleElement)
         })
@@ -67,7 +67,8 @@ async function copyToClipboard(text: string) {
 function handleElement(el: HTMLElement) {
   el.onclick = () => {
     const parent = el.parentElement
-    const sibling = el.nextElementSibling as HTMLPreElement | null
+    const sibling = el.nextElementSibling
+      ?.nextElementSibling as HTMLPreElement | null
     if (!parent || !sibling) {
       return
     }
@@ -86,7 +87,8 @@ function handleElement(el: HTMLElement) {
       el.classList.add('copied')
       setTimeout(() => {
         el.classList.remove('copied')
-      }, 3000)
+        el.blur()
+      }, 2000)
     })
   }
 }

src/client/theme-default/styles/components/vp-doc.css

@@ -363,11 +363,11 @@
   transition: border-color 0.5s, color 0.5s;
 }
 
-.vp-doc [class*='language-'] > span.copy {
+.vp-doc [class*='language-'] > button.copy {
   position: absolute;
   top: 8px;
   right: 8px;
-  z-index: 2;
+  z-index: 3;
   display: block;
   justify-content: center;
   align-items: center;
@@ -384,23 +384,24 @@
   transition: opacity 0.4s;
 }
 
-.vp-doc [class*='language-']:hover > span.copy {
+.vp-doc [class*='language-']:hover > button.copy,
+.vp-doc [class*='language-'] > button.copy:focus {
   opacity: 1;
 }
 
-.vp-doc [class*='language-'] > span.copy:hover {
+.vp-doc [class*='language-'] > button.copy:hover {
   background-color: var(--vp-code-copy-code-hover-bg);
 }
 
-.vp-doc [class*='language-'] > span.copy.copied,
+.vp-doc [class*='language-'] > button.copy.copied,
-.vp-doc [class*='language-'] > span.copy:hover.copied {
+.vp-doc [class*='language-'] > button.copy:hover.copied {
   border-radius: 0 4px 4px 0;
   background-color: var(--vp-code-copy-code-hover-bg);
   background-image: var(--vp-icon-copied);
 }
 
-.vp-doc [class*='language-'] > span.copy.copied::before,
+.vp-doc [class*='language-'] > button.copy.copied::before,
-.vp-doc [class*='language-'] > span.copy:hover.copied::before {
+.vp-doc [class*='language-'] > button.copy:hover.copied::before {
   position: relative;
   left: -65px;
   display: block;
@@ -428,7 +429,8 @@
   transition: color 0.4s, opacity 0.4s;
 }
 
-.vp-doc [class*='language-']:hover > span.lang {
+.vp-doc [class*='language-']:hover > button.copy + span.lang,
+.vp-doc [class*='language-'] > button.copy:focus + span.lang {
   opacity: 0;
 }
 

src/node/markdown/plugins/preWrapper.ts

@@ -15,8 +15,8 @@ export const preWrapperPlugin = (md: MarkdownIt) => {
     const [tokens, idx] = args
     const lang = tokens[idx].info.trim().replace(/-vue$/, '')
     const rawCode = fence(...args)
-    return `<div class="language-${lang}"><span class="lang">${
+    return `<div class="language-${lang}"><button class="copy"></button><span class="lang">${
       lang === 'vue-html' ? 'template' : lang
-    }</span><span class="copy"></span>${rawCode}</div>`
+    }</span>${rawCode}</div>`
   }
 }