jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-16 05:46:35 +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

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

@ -133,6 +133,15 @@ 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`
<mwc-list
innerRole="listbox"
itemRoles="option"
innerAriaLabel=${this.hass.localize(
"ui.panel.config.helpers.dialog.create_helper"
)}
rootTabbable
dialogInitialFocus
>
${items.map(([domain, label]) => { ${items.map(([domain, label]) => {
// Only OG helpers need to be loaded prior adding one // Only OG helpers need to be loaded prior adding one
const isLoaded = const isLoaded =
@ -141,9 +150,7 @@ export class DialogHelperDetail extends LitElement {
<mwc-list-item <mwc-list-item
.disabled=${!isLoaded} .disabled=${!isLoaded}
.domain=${domain} .domain=${domain}
@click=${this._domainPicked} @request-selected=${this._domainPicked}
@keydown=${this._handleEnter}
dialogInitialFocus
graphic="icon" graphic="icon"
> >
<img <img
@ -155,6 +162,7 @@ export class DialogHelperDetail extends LitElement {
useFallback: true, useFallback: true,
darkOptimized: this.hass.themes?.darkMode, darkOptimized: this.hass.themes?.darkMode,
})} })}
aria-hidden="true"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
/> />
<span class="item-text"> ${label} </span> <span class="item-text"> ${label} </span>
@ -172,6 +180,7 @@ export class DialogHelperDetail extends LitElement {
: ""} : ""}
`; `;
})} })}
</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;