From 20fa806014ba48e765bbbcd2e3699d7f37cbb552 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Mon, 21 Jul 2025 17:46:07 +0200
Subject: [PATCH 1/4] fix(codeBlock): add missing accessible labels for
 virtualized code blocks

---
 packages/eui/src/components/code/code_block.tsx     |  2 ++
 .../src/components/code/code_block_virtualized.tsx  | 13 +++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/eui/src/components/code/code_block.tsx b/packages/eui/src/components/code/code_block.tsx
index b9fcb4b3f78..fd08434eae8 100644
--- a/packages/eui/src/components/code/code_block.tsx
+++ b/packages/eui/src/components/code/code_block.tsx
@@ -293,6 +293,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
       {isVirtualized ? (
         <EuiCodeBlockVirtualized
           data={data}
+          label={codeBlockLabelElement}
           rowHeight={fontSizeToRowHeightMap[fontSize]}
           overflowHeight={overflowHeight}
           preProps={preProps}
@@ -314,6 +315,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
           {isVirtualized ? (
             <EuiCodeBlockVirtualized
               data={data}
+              label={codeBlockLabelElement}
               rowHeight={fontSizeToRowHeightMap.l}
               preProps={preFullscreenProps}
               codeProps={codeProps}
diff --git a/packages/eui/src/components/code/code_block_virtualized.tsx b/packages/eui/src/components/code/code_block_virtualized.tsx
index 22fd05b3aa8..bf81f69fe7d 100644
--- a/packages/eui/src/components/code/code_block_virtualized.tsx
+++ b/packages/eui/src/components/code/code_block_virtualized.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { HTMLAttributes, forwardRef, useMemo } from 'react';
+import React, { HTMLAttributes, ReactNode, forwardRef, useMemo } from 'react';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
 import { RefractorNode } from 'refractor';
 import { logicalStyles } from '../../global_styling';
@@ -19,12 +19,14 @@ import { nodeToHtml } from './utils';
 
 export const EuiCodeBlockVirtualized = ({
   data,
+  label,
   rowHeight,
   overflowHeight,
   preProps,
   codeProps,
 }: {
   data: RefractorNode[];
+  label: ReactNode;
   rowHeight: number;
   overflowHeight?: number | string;
   preProps: HTMLAttributes<HTMLPreElement>;
@@ -32,10 +34,13 @@ export const EuiCodeBlockVirtualized = ({
 }) => {
   const VirtualizedOuterElement = useMemo(
     () =>
-      forwardRef<any, any>(({ style, ...props }, ref) => (
-        <pre style={logicalStyles(style)} {...props} ref={ref} {...preProps} />
+      forwardRef<any, any>(({ style, children, ...props }, ref) => (
+        <pre style={logicalStyles(style)} {...props} ref={ref} {...preProps}>
+          {label}
+          {children}
+        </pre>
       )),
-    [preProps]
+    [preProps, label]
   );
 
   const VirtualizedInnerElement = useMemo(

From 60168583da0be37931395c65bd3e5dd30e61937b Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Mon, 21 Jul 2025 17:57:06 +0200
Subject: [PATCH 2/4] test: update snapshots

---
 .../__snapshots__/code_block.test.tsx.snap    | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

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 2a1ce94508a..45f8615870a 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
@@ -13,6 +13,25 @@ exports[`EuiCodeBlock Virtualization renders a virtualized code block 1`] = `
       style="position: relative; block-size: 600px; inline-size: 600px; overflow: auto; will-change: transform; direction: ltr;"
       tabindex="0"
     >
+      <span
+        aria-hidden="true"
+        class="euiScreenReaderOnly"
+        data-tabular-copy-marker="no-copy"
+      >
+        ✄𐘗
+      </span>
+      <div
+        class="emotion-euiScreenReaderOnly"
+      >
+        text code block:
+      </div>
+      <span
+        aria-hidden="true"
+        class="euiScreenReaderOnly"
+        data-tabular-copy-marker="no-copy"
+      >
+        ✄𐘗
+      </span>
       <code
         aria-label="aria-label"
         class="euiCodeBlock__code emotion-euiCodeBlock__code-isVirtualized"

From aa5c7fb07b9ca66f8eb51b77a03f13620b701779 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Mon, 21 Jul 2025 18:16:02 +0200
Subject: [PATCH 3/4] chore: add changelog

---
 packages/eui/changelogs/upcoming/8887.md | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 packages/eui/changelogs/upcoming/8887.md

diff --git a/packages/eui/changelogs/upcoming/8887.md b/packages/eui/changelogs/upcoming/8887.md
new file mode 100644
index 00000000000..e12235566c0
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8887.md
@@ -0,0 +1,4 @@
+**Accessibility**
+
+- Added accessible labels to virtualized `EuiCodeBlock`
+

From 974b99294db3ce291c1aba8798aaa5f239ccfd9c Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Thu, 24 Jul 2025 09:35:53 +0200
Subject: [PATCH 4/4] refactor: include aria-label in codeBlockLabel

---
 .../components/code/__snapshots__/code_block.test.tsx.snap  | 4 ++--
 packages/eui/src/components/code/code_block.tsx             | 6 +++++-
 2 files changed, 7 insertions(+), 3 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
index 45f8615870a..91cd6b2a9d8 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
@@ -23,6 +23,7 @@ exports[`EuiCodeBlock Virtualization renders a virtualized code block 1`] = `
       <div
         class="emotion-euiScreenReaderOnly"
       >
+        aria-label, 
         text code block:
       </div>
       <span
@@ -33,7 +34,6 @@ exports[`EuiCodeBlock Virtualization renders a virtualized code block 1`] = `
         ✄𐘗
       </span>
       <code
-        aria-label="aria-label"
         class="euiCodeBlock__code emotion-euiCodeBlock__code-isVirtualized"
         data-code-language="text"
         data-test-subj="test subject string"
@@ -92,6 +92,7 @@ exports[`EuiCodeBlock renders a code block 1`] = `
     <div
       class="emotion-euiScreenReaderOnly"
     >
+      aria-label, 
       text code block:
     </div>
     <span
@@ -102,7 +103,6 @@ exports[`EuiCodeBlock renders a code block 1`] = `
       ✄𐘗
     </span>
     <code
-      aria-label="aria-label"
       class="euiCodeBlock__code emotion-euiCodeBlock__code"
       data-code-language="text"
       data-test-subj="test subject string"
diff --git a/packages/eui/src/components/code/code_block.tsx b/packages/eui/src/components/code/code_block.tsx
index fd08434eae8..c8876b56c8e 100644
--- a/packages/eui/src/components/code/code_block.tsx
+++ b/packages/eui/src/components/code/code_block.tsx
@@ -135,6 +135,7 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
   overflowHeight,
   isVirtualized: _isVirtualized,
   lineNumbers = false,
+  'aria-label': ariaLabel,
   ...rest
 }) => {
   const euiTheme = useEuiTheme();
@@ -278,7 +279,10 @@ export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
     <>
       {tabularCopyMarkers.hiddenNoCopyBoundary}
       <EuiScreenReaderOnly>
-        <div>{codeBlockLabel}</div>
+        <div>
+          {ariaLabel ? `${ariaLabel}, ` : undefined}
+          {codeBlockLabel}
+        </div>
       </EuiScreenReaderOnly>
       {tabularCopyMarkers.hiddenNoCopyBoundary}
     </>