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

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/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(

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