Mathjax: Remove the outline when clicking on math formulas

[photino]

I have updated my project to MathJax 2.6. But when I click on math formulas, there are solid outlines around them (see the snapshot on Chrome):

On Firefox, the outlines are dotted lines. I would like to know how to remove these unnecessary styles. Thanks!

[dpvc]

The styles are necessary. Version 2.6 added support for users using assistive technology, and that included making the MathJax menu accessible to keyboard users and those with screen readers. In order for that to work, the math expressions need to be able to accept the browser focus (so that keystrokes will be targeted to them, so the menu can be opened). The outlines you are seeing are the focus highlighting that is the default styling for focused items in the browser (that differs between browsers). Without that, keyboard users will not be able to know when and which math expressions are selected for keyboard focus. Removing that would make it harder (or impossible) for those users to properly interact with MathJax and its menus. While you certainly could add CSS to your page to remove the outlines, it would be a mistake to do so, unless you have no concern for those users who require assistive technology to support their reading of your pages. You should note that all focusable elements will get these outlines (buttons, menus, input areas, etc.) when you click on them. It is part of the standard interface for focusable items.

[photino]

@dpvc Thanks for your explanation. It seems that this is a new feature of version 2.6. I remember there are no outlines in version 2.5.

[dpvc]

Yes, as I mentioned above, this was added in 2.6.

[mumulinw]

You can add the following style to Remove the outline when clicking on math formulas
.mjx-chtml[tabindex]:focus, body :focus .mjx-chtml[tabindex] {
display: inline-table;
outline: none!important;
}

[pkra]

No. Removing the outline from a focusable element is bad practice; in particular, it fails WCAG requirements.