feat(code_block): allow for a custom copy button aria-label

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.

packages/eui/src/components/code/__snapshots__/code_block.test.tsx.snap

@@ -382,6 +382,59 @@ exports[`EuiCodeBlock line numbers renders line numbers with a start value 1`] =
 </div>
 `;
 
+exports[`EuiCodeBlock props copyAriaLabel is rendered 1`] = `
+<div
+  class="euiCodeBlock emotion-euiCodeBlock-s-hasControls"
+>
+  <pre
+    class="euiCodeBlock__pre emotion-euiCodeBlock__pre-preWrap-padding-controlsOffset"
+    tabindex="-1"
+  >
+    <code
+      class="euiCodeBlock__code emotion-euiCodeBlock__code"
+      data-code-language="text"
+    >
+      <span
+        class="euiCodeBlock__line emotion-euiCodeBlock__line"
+      >
+        var some = 'code';
+
+      </span>
+      <span
+        class="euiCodeBlock__line emotion-euiCodeBlock__line"
+      >
+        console.log(some);
+      </span>
+    </code>
+  </pre>
+  <div
+    class="euiCodeBlock__controls emotion-euiCodeBlock__controls-l"
+  >
+    <div
+      class="euiCodeBlock__copyButton"
+    >
+      <span
+        class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+      >
+        <button
+          aria-label="Copy this code"
+          class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text"
+          data-test-subj="euiCodeBlockCopy"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="copyClipboard"
+          />
+        </button>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiCodeBlock props fontSize l is rendered 1`] = `
 <div
   class="euiCodeBlock emotion-euiCodeBlock-l"

packages/eui/src/components/code/code_block.test.tsx

@@ -46,6 +46,19 @@ describe('EuiCodeBlock', () => {
       });
     });
 
+    describe('copyAriaLabel', () => {
+      it('is rendered', () => {
+        const customLabel = 'Copy this code';
+        const { container } = render(
+          <EuiCodeBlock isCopyable copyAriaLabel={customLabel}>
+            {code}
+          </EuiCodeBlock>
+        );
+
+        expect(container.firstChild).toMatchSnapshot();
+      });
+    });
+
     describe('overflowHeight', () => {
       it('is rendered', () => {
         const { container } = render(

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,

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 };
 };