[website] Code snippet copy button fails WCAG 2.2 criteria with NVDA and keyboard navigation

[Suchitau25]

Steps to reproduce

Steps:

1. Open this link to live example: https://mui.com/material-ui/
2. Enable the NVDA screen reader.
3. Use the Tab key on the keyboard to focus the installation command block ($ npm install @mui/material @emotion/react @emotion/styled).
4. Press Enter or Space to activate the button.
5. Observe that NVDA provides no audio feedback confirming the text was copied, and visual status updates do not trigger properly via keyboard execution compared to a mouse click.

Current behavior

Activating the installation command code block copies the command to the clipboard, but NVDA provides zero auditory feedback confirming the action was completed.

Additionally, the command snippet is rendered directly inside a <button> tag instead of semantic <code>/<pre> element blocks, and visual status updates (checkmark icon) rely purely on visual changes on mouse click. Voice control software also fails to target action commands like "Click Copy" because the programmatic label is set to the raw command string ($ npm install...) rather than an actionable copy label.

Expected behavior

Code command text should be rendered inside proper semantic code elements (<pre> / <code>), accompanied by an explicit action button labeled "Copy installation command".

Upon copying (via mouse or keyboard Enter/Space), an aria-live="polite" region should announce "Copied command to clipboard" to NVDA and screen reader users, while updating visual and programmatic status indicators consistently across keyboard and mouse interactions.

Context

WCAG Success Criteria Violated:

4.1.3 Status Messages (Level AA): Completion of copy action is not announced via live region.
2.5.3 Label in Name (Level A): Functional action is "Copy", but accessible name is the code command string.
1.3.1 Info and Relationships (Level A): Code sample block is wrapped in an interactive button instead of semantic code elements.
1.4.1 Use of Color (Level A): Success state relies purely on visual checkmark changes without accessible text updates.
2.1.1 Keyboard (Level A): Keyboard activation does not trigger equivalent visual state changes as mouse clicks.

Impact: Screen reader users (NVDA) and keyboard-only users cannot reliably confirm whether the installation command has been copied to their clipboard or interact with the code snippet properly.

Testing Methodology: Manual Keyboard Audit / NVDA Screen Reader Testing.

Your environment

npx @mui/envinfo

N/A - Auditing live documentation site ([https://mui.com/](https://mui.com/))

Browser: Chrome Version 151.0.7922.109 (Official Build) (64-bit)  
OS: Windows 11  
Input / Tools: Keyboard-only navigation, NVDA 2023.3 Screen Reader


**Search keywords**: copy button, code snippet, accessibility, a11y, NVDA, screen reader, WCAG, aria-live, 4.1.3, 2.5.3

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

---

@Suchitau25 Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.