Global "*:focus" styles can't be turned off

[ccondry]

Issue Type

Bug Report

Component or Pattern Affected

All components that can have :focus attribute in the browser

Expected Behavior

I expect to not have every div and tab in my page to have a primary color box shadow when the user clicks on it

Current Behavior

Many elements in my page have a primary color box shadow when clicked, even when they are not really selectable parts of the page.

Possible Solution

Don't use *:focus or any * CSS or SCSS settings without other qualifiers. These even affect items outside of the body element with the md class.

Context

*:focus should not be used, as it cannot be overridden or changed. Once this is imported from the momentum-ui core library into a web project, the *:focus styles from momentum-ui affect all elements that can be focused. Since stylesheets cascade, there is no current way to change this in my site's style except to override specific elements.

Your Environment

• Library: @momentum-ui/core, @momentum-ui/utils
• Version used: 19.7.2
• Browser Name and version: Safari 14.1.1
• Operating System and version: Mac OS 11.4
• Link to your project: it's internal