Toggle on enter or space key

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-checkbox",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "",
   "main": "tp-checkbox.js",
   "scripts": {

tp-checkbox.js

@@ -87,6 +87,11 @@ class TpCheckbox extends Inert(ControlState(FormElement(LitElement))) {
     this._value = '';
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('keydown', this._keyToggle);
+  }
+
   firstUpdated() {
     super.firstUpdated();
     this.setAttribute('tabindex', '0');
@@ -101,6 +106,14 @@ class TpCheckbox extends Inert(ControlState(FormElement(LitElement))) {
     if (changes.has('checked')) {
       this.dispatchEvent(new CustomEvent('checked-changed', { detail: this.checked, bubbles: true, composed: true }));
     }
+
+    if (changes.has('focused')) {
+      if (this.focused) {
+        this.addEventListener('keydown', this._keyToggle);
+      } else {
+        this.removeEventListener('keydown', this._keyToggle);
+      }
+    }
   }
 
   validate() {
@@ -123,6 +136,12 @@ class TpCheckbox extends Inert(ControlState(FormElement(LitElement))) {
   set value(val) {
     this._value = val || '';
   }
+
+  _keyToggle(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      this.toggle();
+    }
+  }
 }
 
 window.customElements.define('tp-checkbox', TpCheckbox);