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` + 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..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 @@ -13,8 +13,27 @@ 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" > + +
+ aria-label, + text code block: +
+ + aria-label, text code block: = ({ overflowHeight, isVirtualized: _isVirtualized, lineNumbers = false, + 'aria-label': ariaLabel, ...rest }) => { const euiTheme = useEuiTheme(); @@ -278,7 +279,10 @@ export const EuiCodeBlock: FunctionComponent = ({ <> {tabularCopyMarkers.hiddenNoCopyBoundary} -
{codeBlockLabel}
+
+ {ariaLabel ? `${ariaLabel}, ` : undefined} + {codeBlockLabel} +
{tabularCopyMarkers.hiddenNoCopyBoundary} @@ -293,6 +297,7 @@ export const EuiCodeBlock: FunctionComponent = ({ {isVirtualized ? ( = ({ {isVirtualized ? ( ; @@ -32,10 +34,13 @@ export const EuiCodeBlockVirtualized = ({ }) => { const VirtualizedOuterElement = useMemo( () => - forwardRef(({ style, ...props }, ref) => ( -
+      forwardRef(({ style, children, ...props }, ref) => (
+        
+          {label}
+          {children}
+        
)), - [preProps] + [preProps, label] ); const VirtualizedInnerElement = useMemo(