jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-28 07:17:21 +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])); items.sort((a, b) => a[1].localeCompare(b[1]));
content = html` content = html`
${items.map(([domain, label]) => { <mwc-list
// Only OG helpers need to be loaded prior adding one innerRole="listbox"
const isLoaded = itemRoles="option"
!(domain in HELPERS) || isComponentLoaded(this.hass, domain); innerAriaLabel=${this.hass.localize(
return html` "ui.panel.config.helpers.dialog.create_helper"
<mwc-list-item )}
.disabled=${!isLoaded} rootTabbable
.domain=${domain} dialogInitialFocus
@click=${this._domainPicked} >
@keydown=${this._handleEnter} ${items.map(([domain, label]) => {
dialogInitialFocus // Only OG helpers need to be loaded prior adding one
graphic="icon" const isLoaded =
> !(domain in HELPERS) || isComponentLoaded(this.hass, domain);
<img return html`
slot="graphic" <mwc-list-item
loading="lazy" .disabled=${!isLoaded}
src=${brandsUrl({ .domain=${domain}
domain, @request-selected=${this._domainPicked}
type: "icon", graphic="icon"
useFallback: true, >
darkOptimized: this.hass.themes?.darkMode, <img
})} slot="graphic"
referrerpolicy="no-referrer" loading="lazy"
/> src=${brandsUrl({
<span class="item-text"> ${label} </span> domain,
</mwc-list-item> type: "icon",
${!isLoaded useFallback: true,
? html` darkOptimized: this.hass.themes?.darkMode,
<paper-tooltip animation-delay="0" })}
>${this.hass.localize( aria-hidden="true"
"ui.dialogs.helper_settings.platform_not_loaded", referrerpolicy="no-referrer"
"platform", />
domain <span class="item-text"> ${label} </span>
)}</paper-tooltip </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}> <mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass!.localize("ui.common.cancel")} ${this.hass!.localize("ui.common.cancel")}
</mwc-button> </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 { private _domainPicked(ev: Event): void {
const domain = (ev.currentTarget! as any).domain; const domain = (ev.currentTarget! as any).domain;