From 82923e2bdc38e4f04d54a786ade283f4effe20c1 Mon Sep 17 00:00:00 2001
From: Hector Alfaro <hectorsector@github.com>
Date: Thu, 5 Sep 2024 16:21:34 -0400
Subject: [PATCH] a11y: Standardize copy button announcement (#52229)

---
 package-lock.json                                  |  1 +
 package.json                                       |  1 +
 src/content-render/stylesheets/annotate.scss       |  4 ++++
 .../tests/__snapshots__/annotate.js.snap           |  2 +-
 src/content-render/unified/code-header.js          |  2 --
 src/frame/components/lib/copy-code.ts              |  9 ++++++---
 src/rest/components/RestCodeSamples.tsx            | 14 ++++++--------
 7 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 46d5c5941d67..8724adbea412 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@octokit/request-error": "6.1.1",
         "@primer/behaviors": "^1.7.0",
         "@primer/css": "^21.3.1",
+        "@primer/live-region-element": "^0.7.0",
         "@primer/octicons": "^19.11.0",
         "@primer/octicons-react": "^19.11.0",
         "@primer/react": "36.27.0",
diff --git a/package.json b/package.json
index aa2742be7faf..5841f26e0356 100644
--- a/package.json
+++ b/package.json
@@ -232,6 +232,7 @@
     "@octokit/request-error": "6.1.1",
     "@primer/behaviors": "^1.7.0",
     "@primer/css": "^21.3.1",
+    "@primer/live-region-element": "^0.7.0",
     "@primer/octicons": "^19.11.0",
     "@primer/octicons-react": "^19.11.0",
     "@primer/react": "36.27.0",
diff --git a/src/content-render/stylesheets/annotate.scss b/src/content-render/stylesheets/annotate.scss
index 624cd84ef4f6..b4199e62f09f 100644
--- a/src/content-render/stylesheets/annotate.scss
+++ b/src/content-render/stylesheets/annotate.scss
@@ -137,3 +137,7 @@
 .subnav-item[aria-current]:not([aria-current="false"]) {
   z-index: 0;
 }
+
+button.js-btn-copy.copied::after {
+  content: "Copied!";
+}
diff --git a/src/content-render/tests/__snapshots__/annotate.js.snap b/src/content-render/tests/__snapshots__/annotate.js.snap
index d70eab5517f0..4b4594e468ce 100644
--- a/src/content-render/tests/__snapshots__/annotate.js.snap
+++ b/src/content-render/tests/__snapshots__/annotate.js.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`annotate > renders annotations 1`] = `
-"<div class="annotate beside"><div class="annotate-header"><header class="d-flex flex-items-center flex-justify-between p-2 text-small rounded-top-1 border-top border-left border-right"><span class="flex-1">YAML</span><div class="annotate-toggle"><button name="annotate-display" value="beside" type="button" class="annotate-option">Beside</button><button name="annotate-display" value="inline" type="button" class="annotate-option">Inline</button></div><button class="js-btn-copy btn btn-sm tooltipped tooltipped-nw" aria-label="Copy YAML code to clipboard" data-clipboard="1746955726" aria-live="polite" aria-atomic="true"><svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-copy" aria-hidden="true"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button><pre hidden data-clipboard="1746955726"># The name of the workflow as it will appear in the "Actions" tab of the GitHub repository.
+"<div class="annotate beside"><div class="annotate-header"><header class="d-flex flex-items-center flex-justify-between p-2 text-small rounded-top-1 border-top border-left border-right"><span class="flex-1">YAML</span><div class="annotate-toggle"><button name="annotate-display" value="beside" type="button" class="annotate-option">Beside</button><button name="annotate-display" value="inline" type="button" class="annotate-option">Inline</button></div><button class="js-btn-copy btn btn-sm tooltipped tooltipped-nw" aria-label="Copy YAML code to clipboard" data-clipboard="1746955726"><svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-copy" aria-hidden="true"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button><pre hidden data-clipboard="1746955726"># The name of the workflow as it will appear in the "Actions" tab of the GitHub repository.
 name: Post welcome comment
 
 # Add the \`pull_request\` event, so that the workflow runs automatically
diff --git a/src/content-render/unified/code-header.js b/src/content-render/unified/code-header.js
index 38fe1afe2a9f..f4b5b4ecb637 100644
--- a/src/content-render/unified/code-header.js
+++ b/src/content-render/unified/code-header.js
@@ -62,8 +62,6 @@ export function header(lang, code, subnav) {
           class: ['js-btn-copy', 'btn', 'btn-sm', 'tooltipped', 'tooltipped-nw'],
           'aria-label': `Copy ${languages[lang]?.name} code to clipboard`,
           'data-clipboard': codeId,
-          'aria-live': 'polite',
-          'aria-atomic': 'true',
         },
         btnIcon(),
       ),
diff --git a/src/frame/components/lib/copy-code.ts b/src/frame/components/lib/copy-code.ts
index 592904cca8e9..a642547a402f 100644
--- a/src/frame/components/lib/copy-code.ts
+++ b/src/frame/components/lib/copy-code.ts
@@ -1,3 +1,5 @@
+import { announce } from '@primer/live-region-element'
+
 export default function copyCode() {
   const buttons = Array.from(document.querySelectorAll('button.js-btn-copy'))
 
@@ -13,11 +15,12 @@ export default function copyCode() {
       if (!text) return
       await navigator.clipboard.writeText(text)
 
-      const beforeTooltip = button.getAttribute('aria-label') || ''
-      button.setAttribute('aria-label', 'Copied!')
+      button.classList.add('copied')
+
+      announce('Copied!')
 
       setTimeout(() => {
-        button.setAttribute('aria-label', beforeTooltip)
+        button.classList.remove('copied')
       }, 2000)
     }),
   )
diff --git a/src/rest/components/RestCodeSamples.tsx b/src/rest/components/RestCodeSamples.tsx
index 16b5a60fc29f..2de68a75c963 100644
--- a/src/rest/components/RestCodeSamples.tsx
+++ b/src/rest/components/RestCodeSamples.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, FormEvent } from 'react'
 import { FormControl, Select, TabNav } from '@primer/react'
 import { Tooltip } from '@primer/react/next'
 import { CheckIcon, CopyIcon } from '@primer/octicons-react'
+import { announce } from '@primer/live-region-element'
 import Cookies from 'src/frame/components/lib/cookies'
 import cx from 'classnames'
 
@@ -288,14 +289,11 @@ export function RestCodeSamples({ operation, slug, heading }: Props) {
             >
               <button
                 className="js-btn-copy btn-octicon"
-                aria-label={
-                  isCopied
-                    ? t('button_text.copied')
-                    : `${t('button_text.copy_to_clipboard')} ${selectedLanguage} request example`
-                }
-                aria-live="polite"
-                aria-atomic="true"
-                onClick={() => setCopied()}
+                aria-label={`${t('button_text.copy_to_clipboard')} ${selectedLanguage} request example`}
+                onClick={() => {
+                  setCopied()
+                  announce('Copied!')
+                }}
               >
                 {isCopied ? <CheckIcon /> : <CopyIcon />}
               </button>