From 5f0f8d1f339168011166f4fa1eceb0fcc56d7ca2 Mon Sep 17 00:00:00 2001
From: Dale Sande <dale.sande@gmail.com>
Date: Mon, 24 Apr 2023 18:02:37 -0700
Subject: [PATCH] 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        |  7 +++----
 package.json       |  7 +------
 src/auro-button.js |  9 ---------
 src/style.scss     |  4 ----
 src/util.js        | 13 -------------
 5 files changed, 4 insertions(+), 36 deletions(-)
 delete mode 100644 src/util.js

diff --git a/docs/api.md b/docs/api.md
index c79af2c..8cee5e9 100644
--- a/docs/api.md
+++ b/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. |
diff --git a/package.json b/package.json
index 41807f6..59a6dfe 100644
--- a/package.json
+++ b/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",
diff --git a/src/auro-button.js b/src/auro-button.js
index 2853d5b..c4e5c1a 100644
--- a/src/auro-button.js
+++ b/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];
   }
diff --git a/src/style.scss b/src/style.scss
index a308c65..d374398 100644
--- a/src/style.scss
+++ b/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 {
diff --git a/src/util.js b/src/util.js
deleted file mode 100644
index d3c15e2..0000000
--- a/src/util.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export function isFocusVisibleSupported() {
-  try {
-    document.querySelector(':focus-visible');
-  } catch {
-    return false;
-  }
-  return true;
-}
-
-// https://github.com/WICG/focus-visible#shadow-dom
-export function isFocusVisiblePolyfillAvailable() {
-  return window.applyFocusVisiblePolyfill != null;
-}