fixes argyleink#18 (argyleink#21)

* fixes argyleink#18

* fixes argyleink#18

* Change copy button name to text node

Author: extra808

src/color-input.ts

@@ -166,15 +166,18 @@ export class ColorInput extends HTMLElement {
     // Copy to clipboard
     const copyBtn = this.#root.querySelector<HTMLButtonElement>('button.copy-btn')
     const copyMessage = this.#root.querySelector<HTMLElement>('.copy-message')
-    if (copyBtn && copyMessage) {
+    const copyMessageLiveRegion = this.#root.querySelector<HTMLElement>('.copy-message-live-region')
+    if (copyBtn && copyMessage && copyMessageLiveRegion) {
       let copyTimeout: number | null = null
       copyBtn.addEventListener('click', async () => {
         try {
           await navigator.clipboard.writeText(this.#value.value)
           copyMessage.classList.add('show')
+          copyMessageLiveRegion.innerText = copyMessage.innerText
           if (copyTimeout !== null) clearTimeout(copyTimeout)
           copyTimeout = window.setTimeout(() => {
             copyMessage.classList.remove('show')
+            copyMessageLiveRegion.innerText = ""
             copyTimeout = null
           }, 3000)
         } catch {}

src/styles/index.css

@@ -165,6 +165,15 @@ button {
     white-space: nowrap;
   }
   .copy-message.show { opacity: 1; }
+
+  .visually-hidden:not(:focus):not(:active) {
+      clip-path: inset(50%);
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+  }
 }
 
 /* Colorspace select: dropdown for switching color models (rgb, oklch, lab, etc.) */

src/utils/template.ts

@@ -20,10 +20,12 @@ export function createTemplate(): HTMLTemplateElement {
   <div class="panel" popover="auto" part="panel">
     <div class="preview">
       <div class="copy-wrap">
-        <button class="copy-btn" title="Copy color" aria-label="Copy color">
-          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M5 22q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-4q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Z"/></svg>
+        <button class="copy-btn">
+          <span class="visually-hidden">Copy color</span>
+          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><title>Copy color</title><path fill="currentColor" d="M5 22q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-4q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Z"/></svg>
         </button>
-        <span class="copy-message" aria-live="polite" role="status">Copied!</span>
+        <span class="copy-message" aria-hidden="true">Copied!</span>
+        <span class="copy-message-live-region visually-hidden" role="status"></span>
       </div>
       <select class="space" title="Colorspace"></select>
       <output class="info" part="output"></output>

tests/unit/template.test.ts

@@ -67,9 +67,9 @@ describe('template', () => {
     it('should include copy message', () => {
       const template = createTemplate()
       const copyMessage = template.content.querySelector('.copy-message')
+      const copyMessageLiveRegion = template.content.querySelector('.copy-message-live-region')
       expect(copyMessage).not.toBeNull()
-      expect(copyMessage?.getAttribute('aria-live')).toBe('polite')
-      expect(copyMessage?.getAttribute('role')).toBe('status')
+      expect(copyMessageLiveRegion?.getAttribute('role')).toBe('status')
       expect(copyMessage?.textContent).toBe('Copied!')
     })