fix(button): indicate visually the active state on enter/space

Author: Mikhail Bashkirov

packages/button/src/LionButton.js

@@ -87,6 +87,11 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
           fill: whitesmoke;
         }
 
+        :host(:active) .btn,
+        .btn[active] {
+          background: grey;
+        }
+
         :host([disabled]) {
           pointer-events: none;
         }
@@ -140,32 +145,42 @@ export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
 
   connectedCallback() {
     super.connectedCallback();
-    this.__setupKeydownDelegation();
+    this.__setupDelegation();
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.__teardownKeydownDelegation();
+    this.__teardownDelegation();
   }
 
   __clickDelegationHandler(e) {
     e.stopPropagation(); // prevent click on the fake element and cause click on the native button
     this.$$slot('_button').click();
   }
 
-  __setupKeydownDelegation() {
+  __setupDelegation() {
     this.addEventListener('keydown', this.__keydownDelegationHandler);
+    this.addEventListener('keyup', this.__keyupDelegationHandler);
   }
 
-  __teardownKeydownDelegation() {
+  __teardownDelegation() {
     this.removeEventListener('keydown', this.__keydownDelegationHandler);
+    this.removeEventListener('keyup', this.__keyupDelegationHandler);
   }
 
   __keydownDelegationHandler(e) {
+    if (e.keyCode === 32 /* space */ || e.keyCode === 13 /* enter */) {
+      e.preventDefault();
+      this.shadowRoot.querySelector('.btn').setAttribute('active', '');
+    }
+  }
+
+  __keyupDelegationHandler(e) {
     // Makes the real button the trigger in forms (will submit form, as opposed to paper-button)
     // and make click handlers on button work on space and enter
     if (e.keyCode === 32 /* space */ || e.keyCode === 13 /* enter */) {
       e.preventDefault();
+      this.shadowRoot.querySelector('.btn').removeAttribute('active');
       this.$$slot('_button').click();
     }
   }

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

@@ -1,4 +1,4 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 import { pressEnter, pressSpace } from '@polymer/iron-test-helpers/mock-interactions.js';
 
@@ -117,6 +117,8 @@ describe('lion-button', () => {
       `);
 
       pressSpace(form.querySelector('lion-button'));
+      await aTimeout();
+      await aTimeout();
 
       expect(formSubmitSpy.called).to.be.true;
     });
@@ -130,6 +132,8 @@ describe('lion-button', () => {
       `);
 
       pressEnter(form.querySelector('lion-button'));
+      await aTimeout();
+      await aTimeout();
 
       expect(formSubmitSpy.called).to.be.true;
     });