ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-24 09:35:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

add tabindex and handle keyboard selection (#13348)

Browse Source
This commit is contained in:
Alan Ren
2020-11-10 23:00:03 -08:00
committed by GitHub
parent b397150264
commit 3be00b1635
1 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/sql/workbench/services/dialog/browser/wizardNavigation.component.ts
View File

@@ -10,6 +10,8 @@ import { Wizard } from '../common/dialogTypes';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
import { IBootstrapParams } from 'sql/workbench/services/bootstrap/common/bootstrapParams';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
export class WizardNavigationParams implements IBootstrapParams {
wizard!: Wizard;
@@ -24,8 +26,8 @@ export class WizardNavigationParams implements IBootstrapParams {
<ng-container *ngFor="let item of _params.wizard.pages; let i = index">
<div class="wizardNavigation-pageNumber">
<div class="wizardNavigation-connector" [ngClass]="{'invisible': !hasTopConnector(i), 'active': isActive(i)}"></div>
<a [attr.href]="isActive(i) ? '' : null" [title]="item.title">
<span class="wizardNavigation-dot" [ngClass]="{'active': isActive(i), 'currentPage': isCurrentPage(i)}" (click)="navigate(i)">{{i+1}}</span>
<a [tabindex]="isActive(i) ? 0 : -1" [attr.href]="isActive(i) ? '' : null" [title]="item.title" (click)="navigate(i)" (keydown)="onKey($event,i)">
<span class="wizardNavigation-dot" [ngClass]="{'active': isActive(i), 'currentPage': isCurrentPage(i)}">{{i+1}}</span>
</a>
<div class="wizardNavigation-connector" [ngClass]="{'invisible': !hasBottomConnector(i), 'active': isActive(i)}"></div>
</div>
@@ -74,6 +76,15 @@ export class WizardNavigation implements AfterViewInit {
}
}
onKey(e: KeyboardEvent, index: number): void {
const event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.Space) || event.equals(KeyCode.Enter)) {
this.navigate(index);
e.preventDefault();
e.stopPropagation();
}
}
private style(): void {
let theme = this._themeService.getColorTheme();
let navigationBackgroundColor = theme.getColor(SIDE_BAR_BACKGROUND);