From 4ae3e9e20b74c69c0284dad0db8e8adac63bbbf5 Mon Sep 17 00:00:00 2001
From: jorenbroekema <joren.broekema@gmail.com>
Date: Thu, 19 Aug 2021 15:34:45 +0200
Subject: [PATCH] feat(switch): make key handlers protected, enable arrow keys

---
 .changeset/perfect-bags-compare.md            |  5 +++++
 packages/switch/src/LionSwitchButton.js       | 22 +++++++++----------
 .../switch/test/lion-switch-button.test.js    | 13 +++++++++++
 3 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/perfect-bags-compare.md

diff --git a/.changeset/perfect-bags-compare.md b/.changeset/perfect-bags-compare.md
new file mode 100644
index 000000000..ba5620629
--- /dev/null
+++ b/.changeset/perfect-bags-compare.md
@@ -0,0 +1,5 @@
+---
+'@lion/switch': minor
+---
+
+Make keyup handlers protected, enables subclassers to switch using alternative keys.
diff --git a/packages/switch/src/LionSwitchButton.js b/packages/switch/src/LionSwitchButton.js
index 93260fb79..4ae1b7341 100644
--- a/packages/switch/src/LionSwitchButton.js
+++ b/packages/switch/src/LionSwitchButton.js
@@ -80,9 +80,9 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
     /** @protected */
     this._toggleChecked = this._toggleChecked.bind(this);
     /** @private */
-    this.__handleKeydown = this.__handleKeydown.bind(this);
+    this.__handleKeydown = this._handleKeydown.bind(this);
     /** @private */
-    this.__handleKeyup = this.__handleKeyup.bind(this);
+    this.__handleKeyup = this._handleKeyup.bind(this);
   }
 
   connectedCallback() {
@@ -121,23 +121,23 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
   }
 
   /**
-   * @param {KeyboardEvent} e
-   * @private
+   * @param {KeyboardEvent} ev
+   * @protected
    */
   // eslint-disable-next-line class-methods-use-this
-  __handleKeydown(e) {
+  _handleKeydown(ev) {
     // prevent "space" scrolling on "macOS"
-    if (e.keyCode === 32) {
-      e.preventDefault();
+    if (ev.key === ' ') {
+      ev.preventDefault();
     }
   }
 
   /**
-   * @param {KeyboardEvent} e
-   * @private
+   * @param {KeyboardEvent} ev
+   * @protected
    */
-  __handleKeyup(e) {
-    if ([32 /* space */, 13 /* enter */].indexOf(e.keyCode) !== -1) {
+  _handleKeyup(ev) {
+    if ([' ', 'Enter'].includes(ev.key)) {
       this._toggleChecked();
     }
   }
diff --git a/packages/switch/test/lion-switch-button.test.js b/packages/switch/test/lion-switch-button.test.js
index dc442794b..33fe08cc5 100644
--- a/packages/switch/test/lion-switch-button.test.js
+++ b/packages/switch/test/lion-switch-button.test.js
@@ -50,6 +50,19 @@ describe('lion-switch-button', () => {
     expect(el.hasAttribute('checked')).to.be.false;
   });
 
+  it('should toggle the value of "checked" on key-up', async () => {
+    expect(el.checked).to.be.false;
+    expect(el.hasAttribute('checked')).to.be.false;
+    el.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+    await el.updateComplete;
+    expect(el.checked).to.be.true;
+    expect(el.hasAttribute('checked')).to.be.true;
+    el.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
+    await el.updateComplete;
+    expect(el.checked).to.be.false;
+    expect(el.hasAttribute('checked')).to.be.false;
+  });
+
   it('can be disabled', async () => {
     el.disabled = true;
     expect(el.checked).to.be.false;