fix checkbox/switch focus visible

shoelace-style · Aug 27, 2021 · dfb9127 · dfb9127
1 parent 5933e94
commit dfb9127
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 33 deletions.
diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
@@ -1,5 +1,6 @@
 import { css } from 'lit';
 import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
 
 export default css`
   ${componentStyles}
@@ -35,7 +36,7 @@ export default css`
       var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
   }
 
-  input[type='checkbox'] {
+  .checkbox__input {
     position: absolute;
     opacity: 0;
     padding: 0;
@@ -61,7 +62,9 @@ export default css`
   }
 
   /* Focus */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) input[type='checkbox']:focus-visible ~ .checkbox__control {
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
+    .checkbox__input${focusVisibleSelector}
+    ~ .checkbox__control {
     border-color: rgb(var(--sl-input-border-color-focus));
     background-color: rgb(var(--sl-input-background-color-focus));
     box-shadow: var(--sl-focus-ring);
@@ -82,8 +85,10 @@ export default css`
   }
 
   /* Checked/indeterminate + focus */
-  .checkbox.checkbox--checked:not(.checkbox--disabled) input[type='checkbox']:focus-visible ~ .checkbox__control,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) input[type='checkbox']:focus-visible ~ .checkbox__control {
+  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input${focusVisibleSelector} ~ .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
+    .checkbox__input${focusVisibleSelector}
+    ~ .checkbox__control {
     border-color: rgb(var(--sl-color-primary-500));
     background-color: rgb(var(--sl-color-primary-500));
     box-shadow: var(--sl-focus-ring);

diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
@@ -133,6 +133,7 @@ export default class SlCheckbox extends LitElement {
       >
         <input
           id=${this.inputId}
+          class="checkbox__input"
           type="checkbox"
           name=${ifDefined(this.name)}
           value=${ifDefined(this.value)}

diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
@@ -1,5 +1,6 @@
 import { css } from 'lit';
 import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
 
 export default css`
   ${componentStyles}
@@ -48,7 +49,7 @@ export default css`
       var(--sl-transition-fast) border-color, var(--sl-transition-fast) box-shadow;
   }
 
-  .switch__control input[type='checkbox'] {
+  .switch__input {
     position: absolute;
     opacity: 0;
     padding: 0;
@@ -68,12 +69,15 @@ export default css`
   }
 
   /* Focus */
-  .switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control {
+  .switch:not(.switch--checked):not(.switch--disabled) .switch__input${focusVisibleSelector} ~ .switch__control {
     background-color: rgb(var(--sl-color-neutral-400));
     border-color: rgb(var(--sl-color-neutral-400));
   }
 
-  .switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control .switch__thumb {
+  .switch:not(.switch--checked):not(.switch--disabled)
+    .switch__input${focusVisibleSelector}
+    ~ .switch__control
+    .switch__thumb {
     background-color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-color-primary-600));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
@@ -103,12 +107,15 @@ export default css`
   }
 
   /* Checked + focus */
-  .switch.switch--checked:not(.switch--disabled).switch--focused .switch__control {
+  .switch.switch--checked:not(.switch--disabled) .switch__input${focusVisibleSelector} ~ .switch__control {
     background-color: rgb(var(--sl-color-primary-600));
     border-color: rgb(var(--sl-color-primary-600));
   }
 
-  .switch.switch--checked:not(.switch--disabled).switch--focused .switch__control .switch__thumb {
+  .switch.switch--checked:not(.switch--disabled)
+    .switch__input${focusVisibleSelector}
+    ~ .switch__control
+    .switch__thumb {
     background-color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-color-primary-600));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));

diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
@@ -133,12 +133,6 @@ export default class SlSwitch extends LitElement {
     }
   }
 
-  handleMouseDown(event: MouseEvent) {
-    // Prevent clicks on the label from briefly blurring the input
-    event.preventDefault();
-    this.input.focus();
-  }
-
   render() {
     return html`
       <label
@@ -150,27 +144,27 @@ export default class SlSwitch extends LitElement {
           'switch--disabled': this.disabled,
           'switch--focused': this.hasFocus
         })}
-        @mousedown=${this.handleMouseDown}
       >
+        <input
+          id=${this.switchId}
+          class="switch__input"
+          type="checkbox"
+          name=${ifDefined(this.name)}
+          value=${ifDefined(this.value)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          role="switch"
+          aria-checked=${this.checked ? 'true' : 'false'}
+          aria-labelledby=${this.labelId}
+          @click=${this.handleClick}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @keydown=${this.handleKeyDown}
+        />
+
         <span part="control" class="switch__control">
           <span part="thumb" class="switch__thumb"></span>
-
-          <input
-            id=${this.switchId}
-            type="checkbox"
-            name=${ifDefined(this.name)}
-            value=${ifDefined(this.value)}
-            .checked=${live(this.checked)}
-            .disabled=${this.disabled}
-            .required=${this.required}
-            role="switch"
-            aria-checked=${this.checked ? 'true' : 'false'}
-            aria-labelledby=${this.labelId}
-            @click=${this.handleClick}
-            @blur=${this.handleBlur}
-            @focus=${this.handleFocus}
-            @keydown=${this.handleKeyDown}
-          />
         </span>
 
         <span part="label" id=${this.labelId} class="switch__label">