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.

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

Postby chris_154011 on Fri May 15, 2020 1:17 am

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.
chris_154011
Jr. Propeller Head
 
Posts: 3
Joined: Tue Jul 05, 2016 7:19 am

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

Postby Nita Beck on Fri May 15, 2020 10:55 am

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
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3331
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

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

Postby Nita Beck on Fri May 15, 2020 1:17 pm

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
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3331
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY


Return to Tips and Tricks

Who is online

Users browsing this forum: No registered users and 4 guests

cron