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 index b7f00f4ae15..42496fb60b0 100644 --- 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`] = `; +exports[`EuiCodeBlock props customCopyAriaLabel is rendered 1`] = ` +
+
+    
+      
+        var some = 'code';
+
+      
+      
+        console.log(some);
+      
+    
+  
+
+
+ + + +
+
+
+`; + exports[`EuiCodeBlock props fontSize l is rendered 1`] = `
{ }); }); + describe('customCopyAriaLabel', () => { + it('is rendered', () => { + const customLabel = 'Copy this code'; + const { container } = render( + + {code} + + ); + + 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 index 145a3031a4b..aeb49a177b7 100644 --- 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 = ({ paddingSize = 'l', fontSize = 's', isCopyable = false, + customCopyAriaLabel, whiteSpace = 'pre-wrap', children, className, @@ -159,6 +165,7 @@ export const EuiCodeBlock: FunctionComponent = ({ ); 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 index 6e87d11bd0c..af9641f0d0d 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 = ({ + 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" /> )}
) : null; - }, [showCopyButton, textToCopy, copyAriaLabel]); + }, [copyAriaLabel, customCopyAriaLabel, showCopyButton, textToCopy]); return { innerTextRef, copyButton }; };