Thanks for this solution. I tried a variation of it and it worked well. I added a MadCap|codeSnippetCopyButton:hover selector to swap in a different colored icon when the icon is hovered over.
I'm still learning about accessibility, and I find myself wondering how a screen reader would interpret the icon. I have confirmed that the icon is accessible via keyboard tabbing, but will a screen reader "read" the icon as "copy", I wonder?
EDIT: I think the answer is no. I think it's important that we have "Copy" for the mc-label attribute so that a screen reader has something to read. (For those who are more knowledgeable than I about accessibility, I couldn't figure out how to add an aria-label.) I set the font size to 0 to effectively hide the text from view, but it's still there for a screen reader to detect. BTW, one will still see "Copy" in the XML Editor, overlapping the icon, but it won't be seen in output.
Code: Select all
mc-label: 'copy'; /* Shows while editing, but not in output; DO TRANSLATE */
font-size: 0px; /* Effectively hides the label in output, but a screen reader can still detect it in order to read it */
EDIT 2: I think actually we can even eliminate including the mc-label attribute altogether. MadCap already has this in the base CSS that undergirds the Flare application. I'm testing now to confirm... Yes, given my trick to "hide" the link, I don't even need the mc-label attribute in my CSS.
EDIT 3: Finally, to optimize accessibility, I went looking for a way to add a true aria-label for the icon, as well as a tooltip (which is achieved with a title attribute). The only hack I could figure out was to manually edit the code of the code snippet. I'd have to add this hack each time I insert a new code snippet.
Code: Select all
<MadCap:codeSnippetCopyButton aria-label="Copy" title="Copy to clipboard" />
Lastly, I realize that your objective in using an icon is to cut down on translation efforts, and I just added things that would need to be translated. But I think we need to balance translation costs against accessibility for our users.