jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-29 12:16:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix accessibility in add helper dialog (#24627)

Browse Source
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
1 changed files with 40 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/panels/config/helpers/dialog-helper-detail.ts
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,39 +211,41 @@ 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 <ha-list-item
.disabled=${isLoaded} .disabled=${!isLoaded}
.content=${this.hass.localize( hasmeta
"ui.dialogs.helper_settings.platform_not_loaded", .domain=${domain}
{ platform: domain } @request-selected=${this._domainPicked}
)} graphic="icon"
> >
<div> <img
<ha-list-item slot="graphic"
.disabled=${!isLoaded} loading="lazy"
hasmeta alt=""
.domain=${domain} src=${brandsUrl({
@request-selected=${this._domainPicked} domain,
graphic="icon" type: "icon",
> useFallback: true,
<img darkOptimized: this.hass.themes?.darkMode,
slot="graphic" })}
loading="lazy" crossorigin="anonymous"
alt="" referrerpolicy="no-referrer"
src=${brandsUrl({ />
domain, <span class="item-text"> ${label} </span>
type: "icon", ${isLoaded
useFallback: true, ? html`<ha-icon-next slot="meta"></ha-icon-next>`
darkOptimized: this.hass.themes?.darkMode, : html`<ha-tooltip
})} hoist
crossorigin="anonymous" slot="meta"
referrerpolicy="no-referrer" .content=${this.hass.localize(
/> "ui.dialogs.helper_settings.platform_not_loaded",
<span class="item-text"> ${label} </span> { platform: domain }
<ha-icon-next slot="meta"></ha-icon-next> )}
</ha-list-item> @click=${stopPropagation}
</div> >
</ha-tooltip> <ha-svg-icon path=${mdiAlertOutline}></ha-svg-icon>
</ha-tooltip>`}
</ha-list-item>
`; `;
})} })}
</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;
} }