feat: apply focus-visible polyfill to shadow root #55

demo/sass/style.scss

@@ -4,8 +4,8 @@
 @import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/SassCustomProperties";
 
 // Import deprecated  Design Token variables
-@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/tokenVariables";
-@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/tokenProperties";
+@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/TokenVariables";
+@import "./node_modules/@alaskaairux/orion-design-tokens/dist/tokens/TokenProperties";
 
 // Import baseline library dependencies
 // Mixins

src/component-base.js

@@ -5,6 +5,7 @@
 
 import { LitElement, html } from "lit-element";
 import 'focus-visible/dist/focus-visible.min.js';
+import { isFocusVisibleSupported, isFocusVisiblePolyfillAvailable } from './util';
 
 // build the component class
 export default class ComponentBase extends LitElement {
@@ -26,6 +27,13 @@ export default class ComponentBase extends LitElement {
     });
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    if (!isFocusVisibleSupported() && isFocusVisiblePolyfillAvailable()) {
+      window.applyFocusVisiblePolyfill(this.shadowRoot);
+    }
+  }
+
   // function to define props used within the scope of thie component
   static get properties() {
     return {

src/style.scss

@@ -21,13 +21,6 @@
 // Import tokens selectors
 @import "./node_modules/@alaskaairux/orion-icons/dist/icons";
 
-
-:host(.focus-visible) {
-  .hyperlink {
-    @include auro_focus-hyperlink(css);
-  }
-}
-
 // layout styles - define any layout specifications for UI that is contained WITHIN the component
 // never define layout that would cause effect on element ouside the scope of this component
 
@@ -43,6 +36,14 @@
     color: var(--auro-color-ui-default-on-light);
   }
 
+  &.focus-visible {
+    @include auro_focus-hyperlink(css);
+  }
+
+  &:focus-visible {
+    @include auro_focus-hyperlink(css);
+  }
+
   @media (hover: hover) {
     &:hover {
       color: var(--auro-color-ui-hover-on-light);

src/util.js

@@ -0,0 +1,24 @@
+/**
+ * https://github.com/WICG/focus-visible#shadow-dom
+ * @returns {Boolean} whether the focus-visible polyfill is available
+ */
+const isFocusVisiblePolyfillAvailable = function() {
+  // eslint-disable-next-line
+  return window.applyFocusVisiblePolyfill != null;
+},
+
+
+/**
+ * @returns {Boolean} whether :focus-visible is supported
+ */
+isFocusVisibleSupported = function() {
+  try {
+    document.querySelector(':focus-visible');
+  } catch (error) {
+    return false;
+  }
+
+  return true;
+};
+
+export { isFocusVisiblePolyfillAvailable, isFocusVisibleSupported };