@primer/view-components 0.24.2-rc.d5d453ee → 0.25.0-rc.0f6b8d26

package/app/components/primer/beta/clipboard_copy.js

@@ -29,12 +29,27 @@ document.addEventListener('clipboard-copy', ({ target }) => {
     if (!target.hasAttribute('data-view-component'))
         return;
     const currentTimeout = clipboardCopyElementTimers.get(target);
+    const clipboardCopyLiveRegion = target.parentNode?.querySelector('[data-clipboard-copy-feedback]');
+    const copiedAnnouncement = 'Copied!';
     if (currentTimeout) {
         clearTimeout(currentTimeout);
         clipboardCopyElementTimers.delete(target);
     }
     else {
         showCheck(target);
+        if (clipboardCopyLiveRegion) {
+            if (clipboardCopyLiveRegion.textContent === copiedAnnouncement) {
+                /* This is a hack due to the way the aria live API works.
+                A screen reader will not read a live region again
+                if the text is the same. Adding a space character tells
+                the browser that the live region has updated,
+                which will cause it to read again, but with no audible difference. */
+                clipboardCopyLiveRegion.textContent = `${copiedAnnouncement}\u00A0`;
+            }
+            else {
+                clipboardCopyLiveRegion.textContent = copiedAnnouncement;
+            }
+        }
     }
     clipboardCopyElementTimers.set(target, setTimeout(() => {
         showCopy(target);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.24.2-rc.d5d453ee",
+  "version": "0.25.0-rc.0f6b8d26",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/info_arch.json

@@ -11630,7 +11630,7 @@
   {
     "fully_qualified_name": "Primer::Beta::ClipboardCopy",
     "description": "Use `ClipboardCopy` to copy element text content or input values to the clipboard.\n\nThis component by itself is not styled as a button, and can therefore only be used in limited circumstances.\nIf you're looking for a button, consider using {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}\ninstead.",
-    "accessibility_docs": "Always set an accessible label to help the user interact with the component.",
+    "accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\nThis component has a built-in `aria-live` region that announces \"Copied!\" when the copy element is pressed.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": true,
@@ -11797,7 +11797,7 @@
   {
     "fully_qualified_name": "Primer::Beta::ClipboardCopyButton",
     "description": "`ClipboardCopyButton` uses the `ClipboardCopy` component to copy text to the clipboard,\nstyled as a Primer button. It can be used wherever a button is desired, and works well\nwith components like `ButtonGroup`.",
-    "accessibility_docs": null,
+    "accessibility_docs": "This component has a built-in `aria-live` region that announces \"Copied!\" when the copy button is pressed.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,