From bfc1ec583a87378c5b2ce7abb3c73ea384a540f5 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Thu, 1 Dec 2022 16:45:54 +0100
Subject: [PATCH] add aria label

---
 .../more-info/more-info-related-info.ts       | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/dialogs/more-info/more-info-related-info.ts b/src/dialogs/more-info/more-info-related-info.ts
index c64ebcef8a..48b5f6362c 100644
--- a/src/dialogs/more-info/more-info-related-info.ts
+++ b/src/dialogs/more-info/more-info-related-info.ts
@@ -52,11 +52,9 @@ class MoreInfoContent extends LitElement {
       return null;
     }
 
-    const deviceEntityEntries = this._deviceEntityEntries(deviceId);
-
-    const deviceEntities = deviceEntityEntries
-      .map((entry) => this.hass!.states[entry.entity_id])
-      .filter(Boolean);
+    const deviceEntities = this._deviceEntityEntries(deviceId).filter(
+      (entry) => this.hass!.states[entry.entity_id]
+    );
 
     const displayedEntities = deviceEntities.filter(
       (entity) => entity.entity_id !== this.stateObj!.entity_id
@@ -69,17 +67,19 @@ class MoreInfoContent extends LitElement {
 
     return html`
       <div class="container">
-        ${displayedEntities.map((entity) => {
-          const icon = entity.attributes.icon;
-          const iconPath = stateIconPath(entity);
+        ${displayedEntities.map((entry) => {
+          const stateObj = this.hass!.states[entry.entity_id];
+
+          const icon = stateObj.attributes.icon;
+          const iconPath = stateIconPath(stateObj);
           const state = computeStateDisplay(
             this.hass!.localize,
-            entity,
+            stateObj,
             this.hass!.locale,
             this.hass!.entities
           );
-          const color = stateColor(entity);
-          const active = stateActive(entity);
+          const color = stateColor(stateObj);
+          const active = stateActive(stateObj);
 
           const iconStyle = styleMap({
             "--icon-color":
@@ -88,13 +88,16 @@ class MoreInfoContent extends LitElement {
                 : undefined,
           });
 
+          const name = stateObj.attributes.friendly_name ?? "";
+
           return html`
             <button
               type="button"
               class="chip"
               @click=${this._handleChipClick}
-              .entityId=${entity.entity_id}
-              .title=${entity.attributes.friendly_name}
+              .entityId=${stateObj.entity_id}
+              aria-label=${name}
+              .title=${name}
               style=${iconStyle}
             >
               ${icon