perf(focus-visible): remove support for polyfill #208

Changes to be committed:
modified:   docs/api.md
modified:   package.json
modified:   src/auro-button.js
modified:   src/style.scss
deleted:    src/util.js

docs/api.md

@@ -2,9 +2,9 @@
 
 ## Attributes
 
-| Attribute | Type      | Description                   |
-|-----------|-----------|-------------------------------|
-| `fixed`   | `Boolean` | uses px values instead of rem |
+| Attribute | Type     | Description                      |
+|-----------|----------|----------------------------------|
+| `id`      | `String` | Set the unique ID of an element. |
 
 ## Properties
 
@@ -15,7 +15,6 @@
 | `autofocus`      | `autofocus`      | `Boolean` | false   | This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user |
 | `disabled`       | `disabled`       | `Boolean` | false   | If set to true button will become disabled and not allow for interactions |
 | `iconOnly`       | `iconOnly`       | `Boolean` | false   | If set to true, the button will contain an icon with no additional content |
-| `id`             | `id`             | `String`  |         | Set the unique ID of an element.                 |
 | `loading`        | `loading`        | `Boolean` | false   | If set to true button text will be replaced with `auro-loader` and become disabled |
 | `ondark`         | `ondark`         | `Boolean` | false   | Set value for on-dark version of auro-button     |
 | `ready`          | `ready`          | `Boolean` | false   | When false the component API should not be called. |

package.json

@@ -29,10 +29,7 @@
   "peerDependencies": {
     "@alaskaairux/auro-button": "^6.0.0",
     "@alaskaairux/design-tokens": "^3.9.1",
-    "@alaskaairux/icons": "^4.15.0",
-    "@alaskaairux/webcorestylesheets": "^3.7.3",
-    "@webcomponents/webcomponentsjs": "^2.6.0",
-    "focus-visible": "^5.2.0"
+    "@alaskaairux/icons": "^4.15.0"
   },
   "devDependencies": {
     "@alaskaairux/design-tokens": "^3.9.1",
@@ -46,7 +43,6 @@
     "@semantic-release/git": "^9.0.0",
     "@semantic-release/npm": "^7.1.3",
     "@web/dev-server": "^0.1.21",
-    "@webcomponents/webcomponentsjs": "^2.6.0",
     "autoprefixer": "^10.3.1",
     "babel-loader": "^8.2.2",
     "compression": "^1.7.4",
@@ -55,7 +51,6 @@
     "core-js": "^3.16.1",
     "eslint": "^7.32.0",
     "eslint-plugin-lit": "^1.5.1",
-    "focus-visible": "^5.2.0",
     "husky": "^4.3.8",
     "lodash": "^4.17.21",
     "marked": "^4.0.10",

src/auro-button.js

@@ -6,10 +6,8 @@
 import { LitElement, html } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { classMap } from 'lit-html/directives/class-map';
-import 'focus-visible/dist/focus-visible.min.js';
 import styleCss from "./style-css.js";
 import '@alaskaairux/auro-loader';
-import { isFocusVisibleSupported, isFocusVisiblePolyfillAvailable } from './util';
 
 /**
  * @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user
@@ -47,13 +45,6 @@ class AuroButton extends LitElement {
     this.slim = false;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    if (!isFocusVisibleSupported() && isFocusVisiblePolyfillAvailable()) {
-      window.applyFocusVisiblePolyfill(this.shadowRoot);
-    }
-  }
-
   static get styles() {
     return [styleCss];
   }

src/style.scss

@@ -70,10 +70,6 @@ $auro-rgb-color-base-white-03: rgba(255, 255, 255, .03);
   @include focus-visible;
 }
 
-.focus-visible.auro-button {
-  @include focus-visible;
-}
-
 :host([fluid]),
 :host([fluid=true]) {
   .auro-button {