[EuiCodeBlock] Add accessible labels for virtualized code blocks

[mgadewoll]

Summary

relates to elastic/kibana#205331 (comment)

This PR adds missing accessible labels for EuiCodeBlock when isVirtualized. We previously added accessible labels in #8195 but they were not applied to the virtualized output.

Why are we making this change?

Fixing an Accessibility issue for missing role and name information on EuiCodeBlock.

🔗 WCAG 4.1.2: Name, Role, Value (Level A)

Screenshots

before	after
Screen.Recording.2025-07-21.at.18.02.28.mov	Screen.Recording.2025-07-21.at.18.03.34.mov

Impact to users

🟢 There are no updates required on consumer side.

QA

• open Storybook and set isVirtualized and overflowHeight: {number} (e.g. 100)
  • verify that the code block label is read when navigating onto EuiCodeBlock in a screen reader (e.g. "text code block")
  • verify that the code block label is read when opening the fullscreen mode and navigating onto EuiCodeBlock in a screen reader (e.g. "text code block")

Example output: text code block: <p> <!-- Hello world --> </p> group

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[weronikaolejniczak]

Code changes look alright 👍🏻

Testing notes

{
  "aria-label": "Some label",
  "isVirtualized": true,
  "overflowHeight": 100,
  "whiteSpace": "pre"
}

❓ Notice how aria-label is not read. Shouldn't we concatenate aria-label and '{language} code block:'?

🔊 VO + Safari (MacOS)

Screen.Recording.2025-07-23.at.17.08.55.mov

✅ "text code block" is read

🔊 NVDA + Firefox (Windows)

Screen.Recording.2025-07-23.at.16.29.40.mov

✅ "text code block" is read

🔊 JAWS + Chrome (Windows)

Screen.Recording.2025-07-23.at.17.24.57.mov

✅ "text code block" is read

[mgadewoll]

Notice how aria-label is not read. Shouldn't we concatenate aria-label and '{language} code block:'?

@weronikaolejniczak Yeah, that's because aria-label is applied to the <code> element via ...rest and the support seems patchy (VO reads it, NVDA doesn't). 🤔 Considering we should ensure unique naming for multiple elements, it would be good to make the aria-label more useful, yes. Great suggestion 👍

Updated in 974b992

with aria-label	without aria-label

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 974b992
• Documentation website
• Storybook

History

• 💚 Build #830 succeeded aa5c7fb

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 974b992

History

• 💚 Build #4418 succeeded aa5c7fb

cc @mgadewoll

[weronikaolejniczak]

Looks great! 🟢 Thanks for following through on this issue, Lene 💪🏻