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.

styles/mixins/_focus.scss

@@ -39,9 +39,10 @@ $-color-focus-outline: var.$color-focus-outline;
  */
 @mixin outline-on-keyboard-focus($inset: false) {
   @include outline($inset);
+
   // Selector for browsers using JS polyfill, which adds the "focus-visible"
   // class to a keyboard-focused element.
-  &:focus:not(.focus-visible) {
+  .js-focus-visible &:focus:not(.focus-visible) {
     @include outline--hide;
   }