From 90f7d5c80d02b0e2adbe348758628c8fa69f0e03 Mon Sep 17 00:00:00 2001
From: Weronika Olejniczak
 <32842468+weronikaolejniczak@users.noreply.github.com>
Date: Mon, 25 Nov 2024 20:21:46 +0100
Subject: [PATCH] feat(code_block): allow for a custom copy button aria-label
 (#8176)

---
 packages/eui/changelogs/upcoming/8176.md           |  3 +++
 .../eui/src/components/code/code_block.test.tsx    | 14 ++++++++++++++
 packages/eui/src/components/code/code_block.tsx    |  9 +++++++++
 .../eui/src/components/code/code_block_copy.tsx    |  8 +++++---
 4 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 packages/eui/changelogs/upcoming/8176.md

diff --git a/packages/eui/changelogs/upcoming/8176.md b/packages/eui/changelogs/upcoming/8176.md
new file mode 100644
index 00000000000..65b0619dcf8
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8176.md
@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Updated `EuiCodeBlock` with a new `copyAriaLabel` prop, which allows setting a custom screen reader label on the copy button.
diff --git a/packages/eui/src/components/code/code_block.test.tsx b/packages/eui/src/components/code/code_block.test.tsx
index 237caf6ca7e..64b0e37b8f8 100644
--- a/packages/eui/src/components/code/code_block.test.tsx
+++ b/packages/eui/src/components/code/code_block.test.tsx
@@ -46,6 +46,20 @@ describe('EuiCodeBlock', () => {
       });
     });
 
+    it('renders `copyAriaLabel` on the copy button', () => {
+      const customLabel = 'Copy this code';
+      const { getByTestSubject } = render(
+        <EuiCodeBlock isCopyable copyAriaLabel={customLabel}>
+          {code}
+        </EuiCodeBlock>
+      );
+
+      expect(getByTestSubject('euiCodeBlockCopy')).toHaveAttribute(
+        'aria-label',
+        customLabel
+      );
+    });
+
     describe('overflowHeight', () => {
       it('is rendered', () => {
         const { container } = render(
diff --git a/packages/eui/src/components/code/code_block.tsx b/packages/eui/src/components/code/code_block.tsx
index 145a3031a4b..2a272a3583e 100644
--- a/packages/eui/src/components/code/code_block.tsx
+++ b/packages/eui/src/components/code/code_block.tsx
@@ -87,6 +87,13 @@ export type EuiCodeBlockProps = EuiCodeSharedProps & {
    */
   isCopyable?: boolean;
 
+  /**
+   * Customizes the aria-label for the copy button.
+   *
+   * @default 'Copy'
+   */
+  copyAriaLabel?: string;
+
   /**
    * Displays line numbers.
    * Optionally accepts a configuration object for setting the starting number,
@@ -118,6 +125,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   paddingSize = 'l',
   fontSize = 's',
   isCopyable = false,
+  copyAriaLabel,
   whiteSpace = 'pre-wrap',
   children,
   className,
@@ -159,6 +167,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   );
 
   const { innerTextRef, copyButton } = useCopy({
+    copyAriaLabel,
     isCopyable,
     isVirtualized,
     children,
diff --git a/packages/eui/src/components/code/code_block_copy.tsx b/packages/eui/src/components/code/code_block_copy.tsx
index 6e87d11bd0c..bd8cac1f0fa 100644
--- a/packages/eui/src/components/code/code_block_copy.tsx
+++ b/packages/eui/src/components/code/code_block_copy.tsx
@@ -17,10 +17,12 @@ import { NEW_LINE_REGEX_GLOBAL } from './utils';
  * Hook that returns copy-related state/logic/utils
  */
 export const useCopy = ({
+  copyAriaLabel,
   isCopyable,
   isVirtualized,
   children,
 }: {
+  copyAriaLabel?: string;
   isCopyable: boolean;
   isVirtualized: boolean;
   children: ReactNode;
@@ -41,7 +43,7 @@ export const useCopy = ({
 
   const showCopyButton = isCopyable && textToCopy;
 
-  const copyAriaLabel = useEuiI18n('euiCodeBlockCopy.copy', 'Copy');
+  const copyDefaultAriaLabel = useEuiI18n('euiCodeBlockCopy.copy', 'Copy');
 
   const copyButton = useMemo(() => {
     return showCopyButton ? (
@@ -52,14 +54,14 @@ export const useCopy = ({
               onClick={copy}
               iconType="copyClipboard"
               color="text"
-              aria-label={copyAriaLabel}
+              aria-label={copyAriaLabel || copyDefaultAriaLabel}
               data-test-subj="euiCodeBlockCopy"
             />
           )}
         </EuiCopy>
       </div>
     ) : null;
-  }, [showCopyButton, textToCopy, copyAriaLabel]);
+  }, [copyAriaLabel, copyDefaultAriaLabel, showCopyButton, textToCopy]);
 
   return { innerTextRef, copyButton };
 };