Bug/accessibility - Focus related issues (microsoft#6859)

* fix for microsoft#6798 * fix for microsoft#6851
PejmanNik · Aug 22, 2019 · 854508e · 854508e
1 parent 09552c5
commit 854508e
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 8 deletions.
diff --git a/extensions/schema-compare/src/dialogs/schemaCompareDialog.ts b/extensions/schema-compare/src/dialogs/schemaCompareDialog.ts
@@ -376,9 +376,11 @@ export class SchemaCompareDialog {
 		// if source is currently a db, show it in the server and db dropdowns
 		if (this.schemaCompareResult.sourceEndpointInfo && this.schemaCompareResult.sourceEndpointInfo.endpointType === mssql.SchemaCompareEndpointType.Database) {
 			databaseRadioButton.checked = true;
+			databaseRadioButton.focused = true;
 			this.sourceIsDacpac = false;
 		} else {
 			dacpacRadioButton.checked = true;
+			dacpacRadioButton.focused = true;
 			this.sourceIsDacpac = true;
 		}
 		let flexRadioButtonsModel = view.modelBuilder.flexContainer()

diff --git a/src/sql/azdata.d.ts b/src/sql/azdata.d.ts
@@ -2970,6 +2970,7 @@ declare module 'azdata' {
 		label?: string;
 		value?: string;
 		checked?: boolean;
+		focused?: boolean;
 	}
 
 	export interface TextComponentProperties {

diff --git a/src/sql/base/browser/ui/radioButton/radioButton.ts b/src/sql/base/browser/ui/radioButton/radioButton.ts
@@ -84,4 +84,11 @@ export class RadioButton extends Widget {
 		this.inputElement.setAttribute('aria-label', val);
 	}
 
+	public focus(): void {
+		this.inputElement.focus();
+	}
+
+	public blur(): void {
+		this.inputElement.blur();
+	}
 }
diff --git a/src/sql/platform/dialog/browser/dialogPane.ts b/src/sql/platform/dialog/browser/dialogPane.ts
@@ -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
 	 */

diff --git a/src/sql/platform/dialog/browser/wizardModal.ts b/src/sql/platform/dialog/browser/wizardModal.ts
@@ -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);
 			}
 		}
 	}

diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts
@@ -1066,6 +1066,12 @@ class RadioButtonWrapper extends ComponentWrapper implements azdata.RadioButtonC
 	public set checked(v: boolean) {
 		this.setProperty('checked', v);
 	}
+	public get focused(): boolean {
+		return this.properties['focused'];
+	}
+	public set focused(v: boolean) {
+		this.setProperty('focused', v);
+	}
 
 	public get onDidClick(): vscode.Event<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onDidClick);

diff --git a/src/sql/workbench/browser/modelComponents/radioButton.component.ts b/src/sql/workbench/browser/modelComponents/radioButton.component.ts
@@ -74,8 +74,8 @@ export default class RadioButtonComponent extends ComponentBase implements IComp
 		this._input.value = this.value;
 		this._input.label = this.label;
 		this._input.enabled = this.enabled;
-
 		this._input.checked = this.checked;
+		this.focused ? this._input.focus() : this._input.blur();
 	}
 
 	// CSS-bound properties
@@ -115,4 +115,12 @@ export default class RadioButtonComponent extends ComponentBase implements IComp
 	public set name(newValue: string) {
 		this.setPropertyFromUI<azdata.RadioButtonProperties, string>((properties, label) => { properties.name = label; }, newValue);
 	}
+
+	public get focused(): boolean {
+		return this.getPropertyOrDefault<azdata.RadioButtonProperties, boolean>((props) => props.focused, false);
+	}
+
+	public set focused(newValue: boolean) {
+		this.setPropertyFromUI<azdata.RadioButtonProperties, boolean>((properties, value) => { properties.focused = value; }, newValue);
+	}
 }