Bug/accessibility - Focus related issues (#6859)

* fix for https://github.com/microsoft/azuredatastudio/issues/6798

* fix for https://github.com/microsoft/azuredatastudio/issues/6851
This commit is contained in:
Udeesha Gautam
2019-08-22 10:29:27 -07:00
committed by GitHub
parent 09552c5f15
commit 854508e940
7 changed files with 40 additions and 8 deletions

View File

@@ -130,14 +130,22 @@ export class DialogPane extends Disposable implements IThemable {
});
}
public show(): void {
public show(focus: boolean = false): void {
this._body.classList.remove('dialogModal-hidden');
if (focus) {
this.focus();
}
}
public hide(): void {
this._body.classList.add('dialogModal-hidden');
}
private focus(): void {
let focusedElement = <HTMLElement>this._body.querySelector('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])');
focusedElement ? focusedElement.focus() : this._body.focus();
}
/**
* Called by the theme registry on theme change to style the component
*/

View File

@@ -82,7 +82,7 @@ export class WizardModal extends Modal {
}
this._previousButton = this.addDialogButton(this._wizard.backButton, () => this.showPage(this._wizard.currentPage - 1));
this._nextButton = this.addDialogButton(this._wizard.nextButton, () => this.showPage(this._wizard.currentPage + 1), true, true);
this._nextButton = this.addDialogButton(this._wizard.nextButton, () => this.showPage(this._wizard.currentPage + 1, true, true), true, true);
this._generateScriptButton = this.addDialogButton(this._wizard.generateScriptButton, () => undefined);
this._doneButton = this.addDialogButton(this._wizard.doneButton, () => this.done(), false, true);
this._wizard.doneButton.registerClickEvent(this._onDone.event);
@@ -164,7 +164,7 @@ export class WizardModal extends Modal {
page.onUpdate(() => this.setButtonsForPage(this._wizard.currentPage));
}
private async showPage(index: number, validate: boolean = true): Promise<void> {
private async showPage(index: number, validate: boolean = true, focus: boolean = false): Promise<void> {
let pageToShow = this._wizard.pages[index];
if (!pageToShow) {
this.done(validate);
@@ -175,7 +175,7 @@ export class WizardModal extends Modal {
}
this._dialogPanes.forEach((dialogPane, page) => {
if (page === pageToShow) {
dialogPane.show();
dialogPane.show(focus);
} else {
dialogPane.hide();
}
@@ -227,14 +227,14 @@ export class WizardModal extends Modal {
'wizard-navigation',
{
wizard: this._wizard,
navigationHandler: (index: number) => this.showPage(index, index > this._wizard.currentPage)
navigationHandler: (index: number) => this.showPage(index, index > this._wizard.currentPage, true)
},
undefined,
() => undefined);
}
public open(): void {
this.showPage(0, false);
this.showPage(0, false, true);
this.show();
}
@@ -292,7 +292,7 @@ export class WizardModal extends Modal {
this.done();
} else {
if (this._nextButton.enabled) {
this.showPage(this._wizard.currentPage + 1);
this.showPage(this._wizard.currentPage + 1, true, true);
}
}
}