Flare 2020: Change 'copy' text to icon in code snippets

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.
Post Reply
chris_154011
Jr. Propeller Head
Posts: 3
Joined: Tue Jul 05, 2016 7:19 am

Flare 2020: Change 'copy' text to icon in code snippets

Post by chris_154011 »

Hi,

Just played with the code snippet feature in Flare 2020. We do lots of translations so wanted to change the text to an icon.

For those that need it, here is the CSS code to use:

Code: Select all

MadCap|codeSnippetCopyButton
{
	background-image: url('../Images/copyicon.svg');
	background-repeat: no-repeat;
	mc-label: ' ';
	height: 24px;
	width: 24px;
}
I'll let you find your own SVG icon to use....and remember, there is a space in mc-label code definition.

You are welcome.
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Flare 2020: Change 'copy' text to icon in code snippets

Post by Nita Beck »

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.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Flare 2020: Change 'copy' text to icon in code snippets

Post by Nita Beck »

chris_154011 wrote:You are welcome.
You inspired me today with your solution. Nice way to spend a Friday afternoon, and now I'll be all set to deploy the solution for several of my clients.

So, yes, THANK YOU!
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
Post Reply