Merge pull request #28 from RalucaNicola/master

Add button accessibility

Author: pshihn

packages/wired-button/wired-button.js

@@ -13,11 +13,10 @@ export class WiredButton extends LitElement {
     super();
     this.elevation = 1;
     this.disabled = false;
-
   }
 
   _createRoot() {
-    const root = this.attachShadow({ mode: 'open', delegatesFocus: true });
+    const root = this.attachShadow({ mode: 'open' });
     this.classList.add('pending');
     return root;
   }
@@ -41,24 +40,23 @@ export class WiredButton extends LitElement {
         flex-direction: column;
         text-align: center;
         display: inline-flex;
-        outline: none;
       }
-    
+
       :host(.pending) {
         opacity: 0;
       }
-    
+
       :host(:active) path {
         transform: scale(0.97) translate(1.5%, 1.5%);
       }
-    
+
       :host(.disabled) {
         opacity: 0.6 !important;
         background: rgba(0, 0, 0, 0.07);
         cursor: default;
         pointer-events: none;
       }
-    
+
       .overlay {
         position: absolute;
         top: 0;
@@ -67,11 +65,11 @@ export class WiredButton extends LitElement {
         bottom: 0;
         pointer-events: none;
       }
-    
+
       svg {
         display: block;
       }
-    
+
       path {
         stroke: currentColor;
         stroke-width: 0.7;
@@ -103,6 +101,14 @@ export class WiredButton extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     setTimeout(() => this._didRender());
+    this.addEventListener('keydown', (event) => {
+      if ((event.keyCode === 13) || (event.keyCode === 32)) {
+        event.preventDefault();
+        this.click();
+      }
+    });
+    this.setAttribute('role', 'button');
+    this.setAttribute('aria-label', this.innerHTML);
   }
 
   _didRender() {
@@ -122,6 +128,8 @@ export class WiredButton extends LitElement {
       (wired.line(svg, s.width + (i * 2), s.height + (i * 2), s.width + (i * 2), i * 2)).style.opacity = (75 - (i * 10)) / 100;
     }
     this.classList.remove('pending');
+
+    this.tabIndex = this.disabled ? -1 : (this.getAttribute('tabindex') || 0);
   }
 }