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:
= ({
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(