Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make
:focus-visible
rules work when polyfill not present
When the `focus-visible` polyfill is loaded—which it is in our LMS and client projects—that polyfill will assign a `.focus-visible` class to elements whose heuristics match the intent of `:focus-visible`, whether or not the browser natively supports `:focus-visible` or not. This rule, as previously written, was meant to suppress outlines on elements if they didn't have the `.focus-visible` class: ``` &:focus:not(.focus-visible) { @include outline--hide; } ``` The problem with this selector is that, if the polyfill is not present, it will always match—because the `.focus-visible` class is never present—causing all focus outlines to be suppressed, even when the element is `:focus-visible`. That is, the previous selector was coupled to the presence of the polyfill. When present, the polyfill also applies a `.js-focus-visible` class to a container element. We can make the selector here more specific, and include that classname, such that it will only match when the polyfill is actually present: `.js-focus-visible &:focus:not(.focus-visible)` Focus outlines "worked" before in the `lms` and `client` projects because the polyfill was also present, but did not work in this project, where we don't load the polyfill. Now this should work correctly in both contexts.
- Loading branch information