The shared Pandoc theme adds a copy button to every code block. Its label is
an emoji set with innerHTML, and its only text alternative is a title
attribute:
copyButton.innerHTML = "📋";
copyButton.setAttribute("title", "Copy to Clipboard");Problems:
title is not a reliable accessible name. Screen reader support for it is
inconsistent, and it is unavailable to keyboard-only and touch users. The
button announces as "clipboard", as the emoji name, or as nothing.- The confirmation state sets
copyButton.textContent = "Copied!" with no live
region, so the change is silent to assistive technology.
- The button is appended to
<pre> with no consideration of focus order.
Lives in pandoc/js/copyToClipboard.js. It reaches any repository that adopts
the shared docs build, so a fix here reaches all of them at once via @v1.
Not scoped yet — the right answer probably involves aria-label, a visible or
visually-hidden text label rather than an emoji, and an aria-live region for
the confirmation, but that needs someone to think it through properly.
The shared Pandoc theme adds a copy button to every code block. Its label is
an emoji set with
innerHTML, and its only text alternative is atitleattribute:
Problems:
titleis not a reliable accessible name. Screen reader support for it isinconsistent, and it is unavailable to keyboard-only and touch users. The
button announces as "clipboard", as the emoji name, or as nothing.
copyButton.textContent = "Copied!"with no liveregion, so the change is silent to assistive technology.
<pre>with no consideration of focus order.Lives in
pandoc/js/copyToClipboard.js. It reaches any repository that adoptsthe shared docs build, so a fix here reaches all of them at once via
@v1.Not scoped yet — the right answer probably involves
aria-label, a visible orvisually-hidden text label rather than an emoji, and an
aria-liveregion forthe confirmation, but that needs someone to think it through properly.