Some fixes in focus and click handling (#5847)

src/components/entity/state-badge.ts

@@ -1,4 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
+import { styleMap } from "lit-html/directives/style-map";
 import {
   css,
   CSSResult,
@@ -6,7 +7,6 @@ import {
   LitElement,
   property,
   PropertyValues,
-  query,
   TemplateResult,
 } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
@@ -16,7 +16,6 @@ import { stateIcon } from "../../common/entity/state_icon";
 import { iconColorCSS } from "../../common/style/icon_color_css";
 import type { HomeAssistant } from "../../types";
 import "../ha-icon";
-import type { HaIcon } from "../ha-icon";
 
 export class StateBadge extends LitElement {
   public hass?: HomeAssistant;
@@ -29,12 +28,15 @@ export class StateBadge extends LitElement {
 
   @property({ type: Boolean }) public stateColor?: boolean;
 
-  @query("ha-icon") private _icon!: HaIcon;
+  @property({ type: Boolean, reflect: true, attribute: "icon" })
+  private _showIcon = true;
+
+  @property() private _iconStyle: { [name: string]: string } = {};
 
   protected render(): TemplateResult {
     const stateObj = this.stateObj;
 
-    if (!stateObj) {
+    if (!stateObj || !this._showIcon) {
       return html``;
     }
 
@@ -42,7 +44,7 @@ export class StateBadge extends LitElement {
 
     return html`
       <ha-icon
-        id="icon"
+        style=${styleMap(this._iconStyle)}
         data-domain=${ifDefined(
           this.stateColor || (domain === "light" && this.stateColor !== false)
             ? domain
@@ -60,14 +62,13 @@ export class StateBadge extends LitElement {
     }
     const stateObj = this.stateObj;
 
-    const iconStyle: Partial<CSSStyleDeclaration> = {
-      color: "",
-      filter: "",
-      display: "",
-    };
+    const iconStyle: { [name: string]: string } = {};
     const hostStyle: Partial<CSSStyleDeclaration> = {
       backgroundImage: "",
     };
+
+    this._showIcon = true;
+
     if (stateObj) {
       // hide icon if we have entity picture
       if (
@@ -79,7 +80,7 @@ export class StateBadge extends LitElement {
           imageUrl = this.hass.hassUrl(imageUrl);
         }
         hostStyle.backgroundImage = `url(${imageUrl})`;
-        iconStyle.display = "none";
+        this._showIcon = false;
       } else if (stateObj.state === "on") {
         if (stateObj.attributes.hs_color && this.stateColor !== false) {
           const hue = stateObj.attributes.hs_color[0];
@@ -102,7 +103,7 @@ export class StateBadge extends LitElement {
         }
       }
     }
-    Object.assign(this._icon.style, iconStyle);
+    this._iconStyle = iconStyle;
     Object.assign(this.style, hostStyle);
   }
 
@@ -119,8 +120,17 @@ export class StateBadge extends LitElement {
         background-size: cover;
         line-height: 40px;
         vertical-align: middle;
+        box-sizing: border-box;
+      }
+      :host(:focus) {
+        outline: none;
+      }
+      :host(:not([icon]):focus) {
+        border: 2px solid var(--divider-color);
+      }
+      :host([icon]:focus) {
+        background: var(--divider-color);
       }
-
       ha-icon {
         transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
       }