A11Y issue with outline: none

Issue Summary

We do regular a11y checks on our website (https://integration.dimensions.ai/details/publication/pub.1130476331) and found an a11y issue related to some MathJax related CSS

Steps to Reproduce:

1. Go to a publication with some LaTeX expression inside their abstract (e.g. https://integration.dimensions.ai/details/publication/pub.1130476331)
2. Run https://www.powermapper.com/products/sortsite/ on the page

Technical details:

• MathJax Version: npm/mathjax@3
• Client OS: Mac OS X 10.15.7
• Browser: Chrome 86

Supporting information:

The information from the a11y tool is attached below:

The CSS outline or border style on this element makes it difficult or impossible to see the dotted link focus outline

Change the style to avoid obscuring the focus outline around focusable elements. 
Using a border or outline style that obscures the focus ring causes problems for keyboard-only users in:
•Chrome (obscures the focus indicator on links, buttons, dropdowns and range controls)
•Firefox (obscures the focus indicator on links)
•Internet Explorer (obscures the focus indicator on links, buttons and range controls)
Internet Explorer and Edge do not support the outline-offset: property, so using this does not reliably avoid focus outline overlap.

And it is related to this CSS rule:

.CtxtMenu_MenuClose:hover:focus { outline:none}

Maybe you can do an internal a11y check as well to validate this issue on your side.

Start by opening the linked publication with a LaTeX expression and running the cited SortSite accessibility check. Inspect the MathJax CSS rule .CtxtMenu_MenuClose:hover:focus { outline:none} and verify that the completed change preserves a visible keyboard focus indicator without obscuring it.