I’m not sure what you tried to achieve with the above CSS but if you need to remove the 1px dotted line on focused elements, you should place this code in CSS in Lectora (use Ext HTML set to Meta tags):
Alternatively, you might want to explain to your client that keyboard users heavily depend on that outline to be visible. Without it, they simply cannot navigate the course. Maybe the client will want to re-think their approach to accessibility. More arguments, if need be: Stop Messing with the Focus Outline.
I’ve attached an example, see if it does what you want.
I think I was unclear in my post. I don’t want to remove the 1px dotted box. I just want to either make it something like 4px, a bit larger than the icons it highlights, pretty much anything to make it more obvious. Our 508 reviewers don’t think the standard box is enough.
I am currently working with a similar issue. When the user opens the table of content (TOC) icon to access the TOC elements, I need the focus to move from the icon to the elements. The result: the keyboard user should be to 1- tab to TOC, opening TOC, access TOC elements.