A11Y issue with outline: none
Created by: 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:
- Go to a publication with some LaTeX expression inside their abstract (e.g. https://integration.dimensions.ai/details/publication/pub.1130476331)
- 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.