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

Add keyboard support to onboarding links (#17816)

Browse Source
This commit is contained in:
Paul Bottein 2023-09-04 17:20:51 +02:00 committed by GitHub
parent 5d5894cae6
commit 5e1583f925
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/onboarding/onboarding-welcome-link.ts
View File

@ -17,6 +17,8 @@ class OnboardingWelcomeLink extends LitElement {
@property() public iconPath!: string; @property() public iconPath!: string;
@property({ attribute: true, type: Boolean }) public noninteractive?: boolean;
@queryAsync("mwc-ripple") private _ripple!: Promise<Ripple | null>; @queryAsync("mwc-ripple") private _ripple!: Promise<Ripple | null>;
@state() private _shouldRenderRipple = false; @state() private _shouldRenderRipple = false;
@ -24,6 +26,7 @@ class OnboardingWelcomeLink extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<ha-card <ha-card
.tabIndex=${this.noninteractive ? "-1" : "0"}
@focus=${this.handleRippleFocus} @focus=${this.handleRippleFocus}
@blur=${this.handleRippleBlur} @blur=${this.handleRippleBlur}
@mousedown=${this.handleRippleActivate} @mousedown=${this.handleRippleActivate}
@ -33,6 +36,7 @@ class OnboardingWelcomeLink extends LitElement {
@touchstart=${this.handleRippleActivate} @touchstart=${this.handleRippleActivate}
@touchend=${this.handleRippleDeactivate} @touchend=${this.handleRippleDeactivate}
@touchcancel=${this.handleRippleDeactivate} @touchcancel=${this.handleRippleDeactivate}
@keydown=${this._handleKeyDown}
> >
<ha-svg-icon .path=${this.iconPath}></ha-svg-icon> <ha-svg-icon .path=${this.iconPath}></ha-svg-icon>
${this.label} ${this.label}
@ -41,6 +45,12 @@ class OnboardingWelcomeLink extends LitElement {
`; `;
} }
private _handleKeyDown(ev: KeyboardEvent): void {
if (ev.key === "Enter" || ev.key === " ") {
(ev.target as HTMLElement).click();
}
}
private _rippleHandlers: RippleHandlers = new RippleHandlers(() => { private _rippleHandlers: RippleHandlers = new RippleHandlers(() => {
this._shouldRenderRipple = true; this._shouldRenderRipple = true;
return this._ripple; return this._ripple;

1
src/onboarding/onboarding-welcome-links.ts
View File

@ -21,6 +21,7 @@ class OnboardingWelcomeLinks extends LitElement {
href="https://www.home-assistant.io/blog/2016/01/19/perfect-home-automation/" href="https://www.home-assistant.io/blog/2016/01/19/perfect-home-automation/"
> >
<onboarding-welcome-link <onboarding-welcome-link
noninteractive
.iconPath=${mdiFileDocument} .iconPath=${mdiFileDocument}
.label=${this.localize("ui.panel.page-onboarding.welcome.vision")} .label=${this.localize("ui.panel.page-onboarding.welcome.vision")}
> >