add aria label

This commit is contained in:
Paul Bottein 2022-12-01 16:45:54 +01:00
parent 9ccba6c9cd
commit bfc1ec583a
No known key found for this signature in database

View File

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