Refactor copy button to use success icon (#2024)

Author: clicktodev

assets/css/copy-button.css

@@ -24,6 +24,10 @@ pre .copy-button:focus {
   font-size: 14px;
   line-height: 24px;
   color: currentColor;
+
+  & svg[aria-live="polite"] {
+    display: none;
+  }
 }
 
 .copy-button svg {
@@ -43,6 +47,10 @@ pre .copy-button:focus-visible svg {
 .copy-button.clicked {
   opacity: 1;
   color: var(--success);
+
+  & svg[aria-live="polite"] {
+    display: block;
+  }
 }
 
 .copy-button.clicked svg {

assets/js/copy-button.js

@@ -26,7 +26,6 @@ function initialize () {
 
     let timeout
     button.addEventListener('click', () => {
-      const ariaLiveContent = button.querySelector('[aria-live]')
       clearTimeout(timeout)
 
       const text =
@@ -36,10 +35,10 @@ function initialize () {
 
       navigator.clipboard.writeText(text)
       button.classList.add('clicked')
-      ariaLiveContent.innerHTML = 'Copied! ✓'
+      button.disabled = true
       timeout = setTimeout(() => {
         button.classList.remove('clicked')
-        ariaLiveContent.innerHTML = ''
+        button.disabled = false
       }, 3000)
     })
   })

assets/js/handlebars/templates/copy-button.html

@@ -3,5 +3,7 @@
     <path d="M0 0h24v24H0z" fill="none"/>
     <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
   </svg>
-  <span aria-live="polite"></span>
+  <svg aria-live="polite" role="img" aria-label="copied" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
+  </svg>
 </button>