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

closes #8004
elastic · Nov 22, 2024 · ac882e1 · ac882e1
1 parent b937ece
commit ac882e1
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 2 deletions.
diff --git a/packages/eui/src/components/code/__snapshots__/code_block.test.tsx.snap b/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"

diff --git a/packages/eui/src/components/code/code_block.test.tsx b/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(

diff --git a/packages/eui/src/components/code/code_block.tsx b/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,

diff --git 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 = ({
+  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 };
 };