jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-26 06:17:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add container list and ARIA to create helper listbox (#12885)

Browse Source
This commit is contained in:
Steve Repsher 2022-06-07 13:52:48 -04:00 committed by GitHub
parent dbaf955525
commit 2bd617ce6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/panels/config/helpers/dialog-helper-detail.ts
View File

@ -133,45 +133,54 @@ export class DialogHelperDetail extends LitElement {
items.sort((a, b) => a[1].localeCompare(b[1]));
content = html`
${items.map(([domain, label]) => {
// Only OG helpers need to be loaded prior adding one
const isLoaded =
!(domain in HELPERS) || isComponentLoaded(this.hass, domain);
return html`
<mwc-list-item
.disabled=${!isLoaded}
.domain=${domain}
@click=${this._domainPicked}
@keydown=${this._handleEnter}
dialogInitialFocus
graphic="icon"
>
<img
slot="graphic"
loading="lazy"
src=${brandsUrl({
domain,
type: "icon",
useFallback: true,
darkOptimized: this.hass.themes?.darkMode,
})}
referrerpolicy="no-referrer"
/>
<span class="item-text"> ${label} </span>
</mwc-list-item>
${!isLoaded
? html`
<paper-tooltip animation-delay="0"
>${this.hass.localize(
"ui.dialogs.helper_settings.platform_not_loaded",
"platform",
domain
)}</paper-tooltip
>
`
: ""}
`;
})}
<mwc-list
innerRole="listbox"
itemRoles="option"
innerAriaLabel=${this.hass.localize(
"ui.panel.config.helpers.dialog.create_helper"
)}
rootTabbable
dialogInitialFocus
>
${items.map(([domain, label]) => {
// Only OG helpers need to be loaded prior adding one
const isLoaded =
!(domain in HELPERS) || isComponentLoaded(this.hass, domain);
return html`
<mwc-list-item
.disabled=${!isLoaded}
.domain=${domain}
@request-selected=${this._domainPicked}
graphic="icon"
>
<img
slot="graphic"
loading="lazy"
src=${brandsUrl({
domain,
type: "icon",
useFallback: true,
darkOptimized: this.hass.themes?.darkMode,
})}
aria-hidden="true"
referrerpolicy="no-referrer"
/>
<span class="item-text"> ${label} </span>
</mwc-list-item>
${!isLoaded
? html`
<paper-tooltip animation-delay="0"
>${this.hass.localize(
"ui.dialogs.helper_settings.platform_not_loaded",
"platform",
domain
)}</paper-tooltip
>
`
: ""}
`;
})}
</mwc-list>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass!.localize("ui.common.cancel")}
</mwc-button>
@ -220,15 +229,6 @@ export class DialogHelperDetail extends LitElement {
}
}
private _handleEnter(ev: KeyboardEvent) {
if (ev.keyCode !== 13) {
return;
}
ev.stopPropagation();
ev.preventDefault();
this._domainPicked(ev);
}
private _domainPicked(ev: Event): void {
const domain = (ev.currentTarget! as any).domain;