Skip to content

Fix axe-core button-name violation on code-block copy buttons#233

Merged
cwickham merged 1 commit intomainfrom
fix/copy-button-aria-label
May 8, 2026
Merged

Fix axe-core button-name violation on code-block copy buttons#233
cwickham merged 1 commit intomainfrom
fix/copy-button-aria-label

Conversation

@cwickham
Copy link
Copy Markdown
Collaborator

@cwickham cwickham commented May 7, 2026

Summary

  • Adds aria-label="Copy code" to the copy-to-clipboard button emitted by assets/js/code-copy.js so screen readers announce its purpose.
  • Adds aria-hidden="true" to the <i> wrappers around the copy/check SVG icons in layouts/partials/extended_footer.html so the icon doesn't get announced separately.

Closes #222

Test plan

  • Verified locally with hugo server on a post containing code blocks — JS bundle includes the new attribute and rendered HTML shows aria-hidden on the icon wrappers.
  • Manually re-run axe-core on a blog post with code blocks to confirm the button-name violation is gone.

Fixes axe-core button-name violation: the copy-to-clipboard button
emitted by code-copy.js had no inner text, aria-label, or title.
Add aria-label="Copy code", and aria-hidden="true" on the icon
wrappers so the SVG isn't separately announced.

Closes #222
@netlify
Copy link
Copy Markdown

netlify Bot commented May 7, 2026

Deploy Preview for posit-open-source canceled.

Name Link
🔨 Latest commit 1589253
🔍 Latest deploy log https://app.netlify.com/projects/posit-open-source/deploys/69fd0b82a24d0700074e38d3

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 7, 2026

@cwickham cwickham merged commit 56d8c1b into main May 8, 2026
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Code block copy buttons have no accessible name

1 participant