Improve chips (#5070)

Follow mdc specs

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,
     });
   }
 

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";