Make add integration dialog keyboard accessible (#23829)

Make add integration keyboard accessible
This commit is contained in:
Jan-Philipp Benecke 2025-01-22 09:06:05 +01:00 committed by GitHub
parent 898fd51c7d
commit 7aa2abc9c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -319,7 +319,6 @@ class AddIntegrationDialog extends LitElement {
open open
@closed=${this.closeDialog} @closed=${this.closeDialog}
scrimClickAction scrimClickAction
escapeKeyAction
hideActions hideActions
.heading=${createCloseHeading( .heading=${createCloseHeading(
this.hass, this.hass,
@ -449,12 +448,14 @@ class AddIntegrationDialog extends LitElement {
> >
<lit-virtualizer <lit-virtualizer
scroller scroller
tabindex="-1"
class="ha-scrollbar" class="ha-scrollbar"
style=${styleMap({ style=${styleMap({
width: `${this._width}px`, width: `${this._width}px`,
height: this._narrow ? "calc(100vh - 184px)" : "500px", height: this._narrow ? "calc(100vh - 184px)" : "500px",
})} })}
@click=${this._integrationPicked} @click=${this._integrationPicked}
@keypress=${this._handleKeyPress}
.items=${integrations} .items=${integrations}
.keyFunction=${this._keyFunction} .keyFunction=${this._keyFunction}
.renderItem=${this._renderRow} .renderItem=${this._renderRow}
@ -478,6 +479,7 @@ class AddIntegrationDialog extends LitElement {
brand brand
.hass=${this.hass} .hass=${this.hass}
.integration=${integration} .integration=${integration}
tabindex="0"
> >
</ha-integration-list-item> </ha-integration-list-item>
`; `;
@ -534,6 +536,12 @@ class AddIntegrationDialog extends LitElement {
this._handleIntegrationPicked(listItem.integration); this._handleIntegrationPicked(listItem.integration);
} }
private _handleKeyPress(ev) {
if (ev.key === "Enter") {
this._integrationPicked(ev);
}
}
private async _handleIntegrationPicked(integration: IntegrationListItem) { private async _handleIntegrationPicked(integration: IntegrationListItem) {
if (integration.supported_by) { if (integration.supported_by) {
this._supportedBy(integration); this._supportedBy(integration);