Terence EdenWhich of these #Unicode symbols do you think *best* represents the concept of "copy"?
That is, if you click it, something will be copied to your clipboard.
(Other suggestions welcome if they are in Unicode.)
| ⮺ | |
| ⎘ | |
| ⎙ | |
| ⧉ |
Poll ends at .
I've added a "copy" button to all my code samples.
The JS is surprisingly lightweight.
<button class=copy onclick="navigator.clipboard.writeText( this.parentNode.lastChild.textContent );" title="Copy code">⧉</button>
Wonder if there's any other semantics / accessibility stuff I need to consider?
James 🌈💜Well the unicode you chose is spoken as "Two joined squares", so you probably want an aria-label to tell me what that actually means.
Christopher M0YNG@shaknais @Edent this. I'd suggest something informative of the action, e.g. "copy code block to clipboard"
You probablly also want a tooltip ("title" is probablly fine) that says the same thing for sighted people who don't guess the symbol.
Edit, also ideally you'd confirm it happened.
E.g. change to "code copied"
Check how I do it on https://mypronouns.fyi/they/.../themselves
If you want "inspiration" (I'm not saying mine is perfect)
Timo TijhofConsider no icon. That might double reach among sighted users, and removes the need for the a11y workarounds. From:
<button onclick=".." title="Copy code" aria-label="Click to copy code">emoji</button>
To:
<button onclick='..">Copy</button>
And then perhaps:
<button onclick="..; this.textContent='Copied!'"> Copy</button>
Python and several others do this. I implemented it in MediaWiki as well. E.g.:
* https://docs.python.org/3/library/string.html#format-string-syntax
* https://www.mediawiki.org/wiki/Quickstart?safemode=on
