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

closes #8004

packages/eui/changelogs/upcoming/8176.md

@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Allowed to pass a custom `aria-label` for the Copy button in the EuiCodeBlock component.

packages/eui/src-docs/src/views/code/code_block_custom_copy_aria_label.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { EuiCodeBlock } from '../../../../src/components';
+
+const htmlCode = `<!-- I'm an example of HTML -->
+<h1>Hello world!</h1>
+<p>Lorem ipsum dolor sit amet.</p>`;
+
+export default () => (
+  <EuiCodeBlock language="html" isCopyable customCopyAriaLabel="Copy this code">
+    {htmlCode}
+  </EuiCodeBlock>
+);

packages/eui/src-docs/src/views/code/code_example.js

@@ -32,6 +32,12 @@ const codeBlockCopySnippet = `<EuiCodeBlock language="html" isCopyable>
 </EuiCodeBlock>
 `;
 
+import CodeBlockCustomCopyAriaLabel from './code_block_custom_copy_aria_label';
+const codeBlockCustomCopyAriaLabelSnippet = `<EuiCodeBlock language="html" isCopyable customCopyAriaLabel="Copy this code">
+{...}
+</EuiCodeBlock>
+`;
+
 import CodeBlockOverflow from './code_block_overflow';
 const codeBlockOverflowSource = require('!!raw-loader!./code_block_overflow');
 const codeBlockOverflowSnippet = `<EuiCodeBlock language="html" overflowHeight={300}>
@@ -177,6 +183,19 @@ export const CodeExample = {
       props: { EuiCodeBlock },
       demo: <CodeBlockCopy />,
     },
+    {
+      text: (
+        <p>
+          You can specify a custom aria label for the Copy button using the
+          <EuiCode>customCopyAriaLabel</EuiCode> prop. It works in conjunction
+          with the
+          <EuiCode>isCopyable</EuiCode> prop.
+        </p>
+      ),
+      snippet: codeBlockCustomCopyAriaLabelSnippet,
+      props: { EuiCodeBlock },
+      demo: <CodeBlockCustomCopyAriaLabel />,
+    },
     {
       text: (
         <p>

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 customCopyAriaLabel 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('customCopyAriaLabel', () => {
+      it('is rendered', () => {
+        const customLabel = 'Copy this code';
+        const { container } = render(
+          <EuiCodeBlock isCopyable customCopyAriaLabel={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,11 @@ export type EuiCodeBlockProps = EuiCodeSharedProps & {
    */
   isCopyable?: boolean;
 
+  /**
+   * Customizes the aria-label for the copy button.
+   */
+  customCopyAriaLabel?: string;
+
   /**
    * Displays line numbers.
    * Optionally accepts a configuration object for setting the starting number,
@@ -118,6 +123,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   paddingSize = 'l',
   fontSize = 's',
   isCopyable = false,
+  customCopyAriaLabel,
   whiteSpace = 'pre-wrap',
   children,
   className,
@@ -159,6 +165,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   );
 
   const { innerTextRef, copyButton } = useCopy({
+    customCopyAriaLabel,
     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 = ({
+  customCopyAriaLabel,
   isCopyable,
   isVirtualized,
   children,
 }: {
+  customCopyAriaLabel?: string;
   isCopyable: boolean;
   isVirtualized: boolean;
   children: ReactNode;
@@ -52,14 +54,14 @@ export const useCopy = ({
               onClick={copy}
               iconType="copyClipboard"
               color="text"
-              aria-label={copyAriaLabel}
+              aria-label={customCopyAriaLabel || copyAriaLabel}
               data-test-subj="euiCodeBlockCopy"
             />
           )}
         </EuiCopy>
       </div>
     ) : null;
-  }, [showCopyButton, textToCopy, copyAriaLabel]);
+  }, [copyAriaLabel, customCopyAriaLabel, showCopyButton, textToCopy]);
 
   return { innerTextRef, copyButton };
 };

packages/website/docs/components/editors_and_syntax/code.mdx

@@ -93,6 +93,20 @@ export default () => (
 
 ```
 
+You can specify a custom aria label for the Copy button using the `customCopyAriaLabel` prop. It works in conjunction with the `isCopyable` prop.
+
+```tsx
+import React from 'react';
+import { EuiCodeBlock } from '@elastic/eui';
+
+export default () => (
+  <EuiCodeBlock language="html" isCopyable customCopyAriaLabel="Copy the code">
+    {...}
+  </EuiCodeBlock>
+);
+
+```
+
 For long content, you can set an `overflowHeight` which will scroll if the text exceeds that height, and allows users to view the code in fullscreen mode.
 
 ```tsx interactive