jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix keyboard keys for tap action (#14071)

Browse Source
This commit is contained in:
Paul Bottein 2022-10-13 11:17:04 +02:00 committed by GitHub
parent 0b76b60f6e
commit 9ea0e3a75f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/panels/lovelace/cards/hui-button-card.ts
View File

@ -166,7 +166,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
tabindex=${ifDefined( tabindex=${ifDefined(
hasAction(this._config.tap_action) ? "0" : undefined hasAction(this._config.tap_action) ? "0" : undefined
)} )}
@keydown=${this._handleKeyDown}
> >
${this._config.show_icon ${this._config.show_icon
? html` ? html`
@ -234,12 +233,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
return this._ripple; return this._ripple;
}); });
private _handleKeyDown(ev: KeyboardEvent) {
if (ev.key === "Enter" || ev.key === " ") {
handleAction(this, this.hass!, this._config!, "tap");
}
}
@eventOptions({ passive: true }) @eventOptions({ passive: true })
private handleRippleActivate(evt?: Event) { private handleRippleActivate(evt?: Event) {
this._rippleHandlers.startPress(evt); this._rippleHandlers.startPress(evt);

13
src/panels/lovelace/common/directives/action-handler-directive.ts
View File

@ -30,7 +30,7 @@ interface ActionHandlerElement extends HTMLElement {
options: ActionHandlerOptions; options: ActionHandlerOptions;
start?: (ev: Event) => void; start?: (ev: Event) => void;
end?: (ev: Event) => void; end?: (ev: Event) => void;
handleEnter?: (ev: KeyboardEvent) => void; handleKeyDown?: (ev: KeyboardEvent) => void;
}; };
} }
@ -117,7 +117,10 @@ class ActionHandler extends HTMLElement implements ActionHandler {
element.removeEventListener("mousedown", element.actionHandler.start!); element.removeEventListener("mousedown", element.actionHandler.start!);
element.removeEventListener("click", element.actionHandler.end!); element.removeEventListener("click", element.actionHandler.end!);
element.removeEventListener("keyup", element.actionHandler.handleEnter!); element.removeEventListener(
"keydown",
element.actionHandler.handleKeyDown!
);
} else { } else {
element.addEventListener("contextmenu", (ev: Event) => { element.addEventListener("contextmenu", (ev: Event) => {
const e = ev || window.event; const e = ev || window.event;
@ -196,8 +199,8 @@ class ActionHandler extends HTMLElement implements ActionHandler {
} }
}; };
element.actionHandler.handleEnter = (ev: KeyboardEvent) => { element.actionHandler.handleKeyDown = (ev: KeyboardEvent) => {
if (ev.keyCode !== 13) { if (!["Enter", " "].includes(ev.key)) {
return; return;
} }
(ev.currentTarget as ActionHandlerElement).actionHandler!.end!(ev); (ev.currentTarget as ActionHandlerElement).actionHandler!.end!(ev);
@ -214,7 +217,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
}); });
element.addEventListener("click", element.actionHandler.end); element.addEventListener("click", element.actionHandler.end);
element.addEventListener("keyup", element.actionHandler.handleEnter); element.addEventListener("keydown", element.actionHandler.handleKeyDown);
} }
private startAnimation(x: number, y: number) { private startAnimation(x: number, y: number) {