Fix accessibility in add helper dialog (#24627)

This commit is contained in:
karwosts 2025-03-14 03:15:59 -07:00 committed by GitHub
parent 6aa2a576b3
commit 91e9836423
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,3 +1,4 @@
import { mdiAlertOutline } from "@mdi/js";
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
@ -10,6 +11,7 @@ import "../../../components/ha-spinner";
import { createCloseHeading } from "../../../components/ha-dialog"; import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-list-item"; import "../../../components/ha-list-item";
import "../../../components/ha-tooltip"; import "../../../components/ha-tooltip";
import "../../../components/ha-svg-icon";
import { getConfigFlowHandlers } from "../../../data/config_flow"; import { getConfigFlowHandlers } from "../../../data/config_flow";
import { createCounter } from "../../../data/counter"; import { createCounter } from "../../../data/counter";
import { createInputBoolean } from "../../../data/input_boolean"; import { createInputBoolean } from "../../../data/input_boolean";
@ -33,6 +35,7 @@ import { isHelperDomain } from "./const";
import type { ShowDialogHelperDetailParams } from "./show-dialog-helper-detail"; import type { ShowDialogHelperDetailParams } from "./show-dialog-helper-detail";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { stringCompare } from "../../../common/string/compare"; import { stringCompare } from "../../../common/string/compare";
import { stopPropagation } from "../../../common/dom/stop_propagation";
type HelperCreators = Record< type HelperCreators = Record<
HelperDomain, HelperDomain,
@ -208,14 +211,6 @@ export class DialogHelperDetail extends LitElement {
const isLoaded = const isLoaded =
!(domain in HELPERS) || isComponentLoaded(this.hass, domain); !(domain in HELPERS) || isComponentLoaded(this.hass, domain);
return html` return html`
<ha-tooltip
.disabled=${isLoaded}
.content=${this.hass.localize(
"ui.dialogs.helper_settings.platform_not_loaded",
{ platform: domain }
)}
>
<div>
<ha-list-item <ha-list-item
.disabled=${!isLoaded} .disabled=${!isLoaded}
hasmeta hasmeta
@ -237,10 +232,20 @@ export class DialogHelperDetail extends LitElement {
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
/> />
<span class="item-text"> ${label} </span> <span class="item-text"> ${label} </span>
<ha-icon-next slot="meta"></ha-icon-next> ${isLoaded
? html`<ha-icon-next slot="meta"></ha-icon-next>`
: html`<ha-tooltip
hoist
slot="meta"
.content=${this.hass.localize(
"ui.dialogs.helper_settings.platform_not_loaded",
{ platform: domain }
)}
@click=${stopPropagation}
>
<ha-svg-icon path=${mdiAlertOutline}></ha-svg-icon>
</ha-tooltip>`}
</ha-list-item> </ha-list-item>
</div>
</ha-tooltip>
`; `;
})} })}
</mwc-list> </mwc-list>
@ -408,6 +413,9 @@ export class DialogHelperDetail extends LitElement {
ha-icon-next { ha-icon-next {
width: 24px; width: 24px;
} }
ha-tooltip {
pointer-events: auto;
}
.form { .form {
padding: 24px; padding: 24px;
} }