remove :focus-visible shim

docs/resources/changelog.md

@@ -15,6 +15,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added the `--track-active-offset` CSS custom property to `<sl-range>` [#806](https://github.com/shoelace-style/shoelace/issues/806)
 - Fixed a bug that caused `<sl-select>` to sometimes have two vertical scrollbars [#814](https://github.com/shoelace-style/shoelace/issues/814)
 - Fixed a bug that caused a gray line to appear between radio buttons [#821](https://github.com/shoelace-style/shoelace/discussions/821)
+- Removed `:focus-visible` shim now that the last two major versions of Safari support it
 
 ## 2.0.0-beta.77
 

src/components/breadcrumb-item/breadcrumb-item.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -53,7 +52,7 @@ export default css`
     outline: none;
   }
 
-  .breadcrumb-item__label${focusVisibleSelector} {
+  .breadcrumb-item__label:focus-visible {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }

src/components/button/button.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -39,7 +38,7 @@ export default css`
     outline: none;
   }
 
-  .button${focusVisibleSelector} {
+  .button:focus-visible {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }
@@ -317,7 +316,7 @@ export default css`
     color: var(--sl-color-primary-500);
   }
 
-  .button--text${focusVisibleSelector}:not(.button--disabled) {
+  .button--text:focus-visible:not(.button--disabled) {
     background-color: transparent;
     border-color: transparent;
     color: var(--sl-color-primary-500);

src/components/checkbox/checkbox.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -62,9 +61,7 @@ export default css`
   }
 
   /* Focus */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
-    .checkbox__input${focusVisibleSelector}
-    ~ .checkbox__control {
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }
@@ -84,10 +81,8 @@ export default css`
   }
 
   /* Checked/indeterminate + focus */
-  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input${focusVisibleSelector} ~ .checkbox__control,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
-    .checkbox__input${focusVisibleSelector}
-    ~ .checkbox__control {
+  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }

src/components/color-picker/color-picker.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -31,7 +30,7 @@ export default css`
     border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
   }
 
-  .color-picker--inline${focusVisibleSelector} {
+  .color-picker--inline:focus-visible {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }
@@ -63,7 +62,7 @@ export default css`
     transform: scale(1.5);
   }
 
-  .color-picker__grid-handle${focusVisibleSelector} {
+  .color-picker__grid-handle:focus-visible {
     outline: var(--sl-focus-ring);
   }
 
@@ -99,7 +98,7 @@ export default css`
     margin-left: calc(var(--slider-handle-size) / -2);
   }
 
-  .color-picker__slider-handle${focusVisibleSelector} {
+  .color-picker__slider-handle:focus-visible {
     outline: var(--sl-focus-ring);
   }
 
@@ -154,7 +153,7 @@ export default css`
     background-color: var(--preview-color);
   }
 
-  .color-picker__preview${focusVisibleSelector} {
+  .color-picker__preview:focus-visible {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }
@@ -231,7 +230,7 @@ export default css`
     cursor: pointer;
   }
 
-  .color-picker__swatch${focusVisibleSelector} {
+  .color-picker__swatch:focus-visible {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }
@@ -314,11 +313,11 @@ export default css`
     background-color: transparent;
   }
 
-  .color-dropdown__trigger${focusVisibleSelector} {
+  .color-dropdown__trigger:focus-visible {
     outline: none;
   }
 
-  .color-dropdown__trigger${focusVisibleSelector}:not(.color-dropdown__trigger--disabled) {
+  .color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }

src/components/details/details.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -33,7 +32,7 @@ export default css`
     outline: none;
   }
 
-  .details__header${focusVisibleSelector} {
+  .details__header:focus-visible {
     outline: var(--sl-focus-ring);
     outline-offset: calc(1px + var(--sl-focus-ring-offset));
   }
@@ -42,7 +41,7 @@ export default css`
     cursor: not-allowed;
   }
 
-  .details--disabled .details__header${focusVisibleSelector} {
+  .details--disabled .details__header:focus-visible {
     outline: none;
     box-shadow: none;
   }

src/components/icon-button/icon-button.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -42,7 +41,7 @@ export default css`
     cursor: not-allowed;
   }
 
-  .icon-button${focusVisibleSelector} {
+  .icon-button:focus-visible {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }

src/components/image-comparer/image-comparer.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -70,7 +69,7 @@ export default css`
     z-index: 10;
   }
 
-  .image-comparer__handle${focusVisibleSelector} {
+  .image-comparer__handle:focus-visible {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }

src/components/menu-item/menu-item.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -61,7 +60,7 @@ export default css`
   }
 
   :host(:hover:not([aria-disabled='true'])) .menu-item,
-  :host(${focusVisibleSelector}:not(.sl-focus-invisible):not([aria-disabled='true'])) .menu-item {
+  :host(:focus-visible:not(.sl-focus-invisible):not([aria-disabled='true'])) .menu-item {
     outline: none;
     background-color: var(--sl-color-primary-600);
     color: var(--sl-color-neutral-0);

src/components/menu/menu.ts

@@ -1,7 +1,6 @@
 import { html, LitElement } from 'lit';
 import { customElement, query } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
-import { hasFocusVisible } from '../../internal/focus-visible';
 import { getTextContent } from '../../internal/slot';
 import styles from './menu.styles';
 import type SlMenuItem from '../../components/menu-item/menu-item';
@@ -90,11 +89,6 @@ export default class SlMenu extends LitElement {
       this.typeToSelectString += event.key.toLowerCase();
     }
 
-    // Restore focus in browsers that don't support :focus-visible when using the keyboard
-    if (!hasFocusVisible) {
-      items.forEach(item => item.classList.remove('sl-focus-invisible'));
-    }
-
     for (const item of items) {
       const slot = item.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');
       const label = getTextContent(slot).toLowerCase().trim();
@@ -117,16 +111,6 @@ export default class SlMenu extends LitElement {
     }
   }
 
-  handleKeyUp() {
-    // Restore focus in browsers that don't support :focus-visible when using the keyboard
-    if (!hasFocusVisible) {
-      const items = this.getAllItems();
-      items.forEach(item => {
-        item.classList.remove('sl-focus-invisible');
-      });
-    }
-  }
-
   handleKeyDown(event: KeyboardEvent) {
     // Make a selection when pressing enter
     if (event.key === 'Enter') {
@@ -183,11 +167,6 @@ export default class SlMenu extends LitElement {
 
     if (target.getAttribute('role') === 'menuitem') {
       this.setCurrentItem(target as SlMenuItem);
-
-      // Hide focus in browsers that don't support :focus-visible when using the mouse
-      if (!hasFocusVisible) {
-        target.classList.add('sl-focus-invisible');
-      }
     }
   }
 
@@ -207,7 +186,6 @@ export default class SlMenu extends LitElement {
         class="menu"
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
-        @keyup=${this.handleKeyUp}
         @mousedown=${this.handleMouseDown}
       >
         <slot @slotchange=${this.handleSlotChange}></slot>

src/components/radio/radio.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -62,7 +61,7 @@ export default css`
   }
 
   /* Focus */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
+  .radio:not(.radio--checked):not(.radio--disabled) .radio__input:focus-visible ~ .radio__control {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }
@@ -81,7 +80,7 @@ export default css`
   }
 
   /* Checked + focus */
-  .radio.radio--checked:not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
+  .radio.radio--checked:not(.radio--disabled) .radio__input:focus-visible ~ .radio__control {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }

src/components/range/range.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 import formControlStyles from '../../styles/form-control.styles';
 
@@ -70,7 +69,7 @@ export default css`
     border-color: var(--sl-color-primary-500);
   }
 
-  .range__control:enabled${focusVisibleSelector}::-webkit-slider-thumb {
+  .range__control:enabled:focus-visible::-webkit-slider-thumb {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }
@@ -117,7 +116,7 @@ export default css`
     border-color: var(--sl-color-primary-500);
   }
 
-  .range__control:enabled${focusVisibleSelector}::-moz-range-thumb {
+  .range__control:enabled:focus-visible::-moz-range-thumb {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }
@@ -129,7 +128,7 @@ export default css`
   }
 
   /* States */
-  .range__control${focusVisibleSelector} {
+  .range__control:focus-visible {
     outline: none;
   }
 

src/components/rating/rating.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -25,7 +24,7 @@ export default css`
     outline: none;
   }
 
-  .rating${focusVisibleSelector} {
+  .rating:focus-visible {
     outline: var(--sl-focus-ring);
     outline-offset: var(--sl-focus-ring-offset);
   }

src/components/split-panel/split-panel.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -34,7 +33,7 @@ export default css`
     outline: none;
   }
 
-  :host(:not([disabled])) .divider${focusVisibleSelector} {
+  :host(:not([disabled])) .divider:focus-visible {
     background-color: var(--sl-color-primary-600);
     color: var(--sl-color-neutral-0);
   }

src/components/switch/switch.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -69,15 +68,12 @@ export default css`
   }
 
   /* Focus */
-  .switch:not(.switch--checked):not(.switch--disabled) .switch__input${focusVisibleSelector} ~ .switch__control {
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
     background-color: var(--sl-color-neutral-400);
     border-color: var(--sl-color-neutral-400);
   }
 
-  .switch:not(.switch--checked):not(.switch--disabled)
-    .switch__input${focusVisibleSelector}
-    ~ .switch__control
-    .switch__thumb {
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
     background-color: var(--sl-color-neutral-0);
     border-color: var(--sl-color-primary-600);
     outline: var(--sl-focus-ring);
@@ -108,15 +104,12 @@ export default css`
   }
 
   /* Checked + focus */
-  .switch.switch--checked:not(.switch--disabled) .switch__input${focusVisibleSelector} ~ .switch__control {
+  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
     background-color: var(--sl-color-primary-600);
     border-color: var(--sl-color-primary-600);
   }
 
-  .switch.switch--checked:not(.switch--disabled)
-    .switch__input${focusVisibleSelector}
-    ~ .switch__control
-    .switch__thumb {
+  .switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
     background-color: var(--sl-color-neutral-0);
     border-color: var(--sl-color-primary-600);
     outline: var(--sl-focus-ring);

src/components/tab/tab.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { focusVisibleSelector } from '../../internal/focus-visible';
 import componentStyles from '../../styles/component.styles';
 
 export default css`
@@ -32,7 +31,7 @@ export default css`
     outline: none;
   }
 
-  .tab${focusVisibleSelector}:not(.tab--disabled) {
+  .tab:focus-visible:not(.tab--disabled) {
     color: var(--sl-color-primary-600);
     outline: var(--sl-focus-ring);
     outline-offset: calc(-1 * var(--sl-focus-ring-width) - var(--sl-focus-ring-offset));

src/internal/focus-visible.ts

@@ -1,26 +0,0 @@
-import { unsafeCSS } from 'lit';
-
-//
-// Determines if the current browser supports :focus-visible
-//
-export const hasFocusVisible = (() => {
-  const style = document.createElement('style');
-  let isSupported;
-
-  try {
-    document.head.appendChild(style);
-    style.sheet!.insertRule(':focus-visible { color: inherit }');
-    isSupported = true;
-  } catch {
-    isSupported = false;
-  } finally {
-    style.remove();
-  }
-
-  return isSupported;
-})();
-
-//
-// A selector for Lit stylesheets that outputs `:focus-visible` if the browser supports it and `:focus` otherwise
-//
-export const focusVisibleSelector = unsafeCSS(hasFocusVisible ? ':focus-visible' : ':focus');