A11Y issue with outline: none

[andi1984]

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.

[zorkow]

Thanks for reporting this. I am afraid the sites you cite are password protected and I can therefore not follow up the issue as reported.

However, concerning the problem in general:
It was a design decision of the context menu at the time to eliminate hover outline as this is in line with behaviour of browser context menus in general. Your inspection tool probably does not consider the MJ menu as a context menu but as tabindex-ed components of the page, only.

On the other hand, after discussions with @pkra as well as one of my students with low vision this week, we believe that the contrast change on highlighted elements in its current form is probably not sufficient when not working in dark mode (or, e.g., with high contrast extension in Chrome). I'll push this upstream to context menu.