fix(switch): cross-browser fixes

Author: CubLion

packages/switch/src/LionButtonSwitch.js

@@ -1,9 +1,12 @@
-import { LionButton } from '@lion/button';
-import { html, css } from '@lion/core';
+import { html, css, LitElement, DisabledWithTabIndexMixin } from '@lion/core';
 
-export class LionButtonSwitch extends LionButton {
+export class LionButtonSwitch extends DisabledWithTabIndexMixin(LitElement) {
   static get properties() {
     return {
+      role: {
+        type: String,
+        reflect: true,
+      },
       checked: {
         type: Boolean,
         reflect: true,
@@ -13,23 +16,24 @@ export class LionButtonSwitch extends LionButton {
 
   static get styles() {
     return [
-      ...super.styles,
       css`
         :host {
           display: inline-block;
           position: relative;
           width: 36px;
           height: 16px;
-          /* Override "button" styles */
-          min-height: auto;
-          padding: 0;
+          outline: 0;
         }
 
         .btn {
+          position: relative;
           height: 100%;
-          /* Override "button" styles */
-          min-height: auto;
-          padding: 0;
+          outline: 0;
+        }
+
+        :host(:focus) .btn {
+          /* if you extend, please overwrite */
+          outline: 2px solid #bde4ff;
         }
 
         .button-switch__track {
@@ -53,11 +57,12 @@ export class LionButtonSwitch extends LionButton {
     ];
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  _renderBefore() {
+  render() {
     return html`
-      <div class="button-switch__track"></div>
-      <div class="button-switch__thumb"></div>
+      <div class="btn">
+        <div class="button-switch__track"></div>
+        <div class="button-switch__thumb"></div>
+      </div>
     `;
   }
 
@@ -66,22 +71,21 @@ export class LionButtonSwitch extends LionButton {
     this.role = 'switch';
     this.checked = false;
     this.addEventListener('click', this.__handleToggleStateChange);
+    this.addEventListener('keydown', this.__handleKeydown);
+    this.addEventListener('keyup', this.__handleKeyup);
   }
 
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('aria-checked', `${this.checked}`);
   }
 
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-    this.removeAttribute('type');
-  }
-
   __handleToggleStateChange() {
     if (this.disabled) {
       return;
     }
+    // Force IE11 to focus the component.
+    this.focus();
     this.checked = !this.checked;
     this.dispatchEvent(
       new Event('checked-changed', {
@@ -91,6 +95,20 @@ export class LionButtonSwitch extends LionButton {
     );
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  __handleKeydown(e) {
+    // prevent "space" scrolling on "macOS"
+    if (e.keyCode === 32) {
+      e.preventDefault();
+    }
+  }
+
+  __handleKeyup(e) {
+    if ([32 /* space */, 13 /* enter */].indexOf(e.keyCode) !== -1) {
+      this.__handleToggleStateChange();
+    }
+  }
+
   /**
    * We synchronously update aria-checked to support voice over on safari.
    *

packages/switch/stories/index.stories.js

@@ -4,6 +4,7 @@ import { LitElement } from '@lion/core';
 import { LocalizeMixin } from '@lion/localize';
 
 import '../lion-input-switch.js';
+import '../lion-button-switch.js';
 import '@lion/form/lion-form.js';
 
 storiesOf('Forms|Switch', module)
@@ -83,4 +84,10 @@ storiesOf('Forms|Switch', module)
     return html`
       <lion-switch-validation-demo></lion-switch-validation-demo>
     `;
-  });
+  })
+  .add(
+    'Button',
+    () => html`
+      <lion-button-switch></lion-button-switch>
+    `,
+  );

packages/switch/test/lion-button-switch.test.js

@@ -1,8 +1,6 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
 
-import { LionButton } from '@lion/button';
-
 import '../lion-button-switch.js';
 
 describe('lion-button-switch', () => {
@@ -13,10 +11,6 @@ describe('lion-button-switch', () => {
     `);
   });
 
-  it('should behave like a button', () => {
-    expect(el instanceof LionButton).to.be.true;
-  });
-
   it('should be focusable', () => {
     expect(el.tabIndex).to.equal(0);
     expect(el.getAttribute('tabindex')).to.equal('0');