From b17ea09b8b85ca7ee8d1b2538879adc35b1043f2 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 5 Mar 2020 12:59:32 +0100
Subject: [PATCH] Improve chips (#5070)

Follow mdc specs
---
 src/components/ha-chips.ts | 25 +++++++++++++++----------
 src/components/ha-fab.ts   |  2 +-
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/ha-chips.ts b/src/components/ha-chips.ts
index 15a7c7569b..ffa7013d99 100644
--- a/src/components/ha-chips.ts
+++ b/src/components/ha-chips.ts
@@ -8,7 +8,7 @@ import {
   customElement,
   unsafeCSS,
 } from "lit-element";
-
+import { ripple } from "@material/mwc-ripple/ripple-directive";
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
 import { fireEvent } from "../common/dom/fire_event";
@@ -33,22 +33,27 @@ export class HaChips extends LitElement {
         ${this.items.map(
           (item, idx) =>
             html`
-              <button
-                class="mdc-chip"
-                .index=${idx}
-                @click=${this._handleClick}
-              >
-                <span class="mdc-chip__text">${item}</span>
-              </button>
+              <div class="mdc-chip" .index=${idx} @click=${this._handleClick}>
+                <div class="mdc-chip__ripple" .ripple="${ripple()}"></div>
+                <span role="gridcell">
+                  <span
+                    role="button"
+                    tabindex="0"
+                    class="mdc-chip__primary-action"
+                  >
+                    <span class="mdc-chip__text">${item}</span>
+                  </span>
+                </span>
+              </div>
             `
         )}
       </div>
     `;
   }
 
-  private _handleClick(ev) {
+  private _handleClick(ev): void {
     fireEvent(this, "chip-clicked", {
-      index: ev.target.closest("button").index,
+      index: ev.currentTarget.index,
     });
   }
 
diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts
index a2d0103b7f..e4dbebff2c 100644
--- a/src/components/ha-fab.ts
+++ b/src/components/ha-fab.ts
@@ -1,6 +1,6 @@
 import { classMap } from "lit-html/directives/class-map";
 import { html, customElement } from "lit-element";
-import { ripple } from "@material/mwc-ripple/ripple-directive.js";
+import { ripple } from "@material/mwc-ripple/ripple-directive";
 
 import "@material/mwc-fab";
 import { Constructor } from "../types";