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