diff --git a/extensions/schema-compare/src/schemaCompareMainWindow.ts b/extensions/schema-compare/src/schemaCompareMainWindow.ts index 48246ea68f..e9f9f93d70 100644 --- a/extensions/schema-compare/src/schemaCompareMainWindow.ts +++ b/extensions/schema-compare/src/schemaCompareMainWindow.ts @@ -814,7 +814,8 @@ export class SchemaCompareMainWindow { private createSourceAndTargetButtons(view: azdata.ModelView): void { this.selectSourceButton = view.modelBuilder.button().withProperties({ label: '•••', - title: localize('schemaCompare.sourceButtonTitle', 'Select Source') + title: localize('schemaCompare.sourceButtonTitle', "Select Source"), + ariaLabel: localize('schemaCompare.sourceButtonTitle', "Select Source") }).component(); this.selectSourceButton.onDidClick(() => { @@ -825,7 +826,8 @@ export class SchemaCompareMainWindow { this.selectTargetButton = view.modelBuilder.button().withProperties({ label: '•••', - title: localize('schemaCompare.targetButtonTitle', 'Select Target') + title: localize('schemaCompare.targetButtonTitle', "Select Target"), + ariaLabel: localize('schemaCompare.targetButtonTitle', "Select Target") }).component(); this.selectTargetButton.onDidClick(() => { diff --git a/src/sql/azdata.d.ts b/src/sql/azdata.d.ts index e2c556f6c0..58cc8216d7 100644 --- a/src/sql/azdata.d.ts +++ b/src/sql/azdata.d.ts @@ -3356,6 +3356,7 @@ declare module 'azdata' { isFile?: boolean; fileContent?: string; title?: string; + ariaLabel?: string; } export interface LoadingComponentProperties { diff --git a/src/sql/base/browser/ui/button/button.ts b/src/sql/base/browser/ui/button/button.ts index a2e32c0bfa..b5a6735c86 100644 --- a/src/sql/base/browser/ui/button/button.ts +++ b/src/sql/base/browser/ui/button/button.ts @@ -43,6 +43,10 @@ export class Button extends vsButton { this.element.title = value; } + public set ariaLabel(value: string) { + this.element.setAttribute('aria-label', value); + } + public setHeight(value: string) { this.element.style.height = value; } diff --git a/src/sql/workbench/browser/modelComponents/button.component.ts b/src/sql/workbench/browser/modelComponents/button.component.ts index 5eca249463..1bf48e2755 100644 --- a/src/sql/workbench/browser/modelComponents/button.component.ts +++ b/src/sql/workbench/browser/modelComponents/button.component.ts @@ -102,6 +102,13 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC this._button.enabled = this.enabled; this._button.label = this.label; this._button.title = this.title; + + // Button's ariaLabel gets set to the label by default. + // We only want to override that if buttonComponent's ariaLabel is set explicitly. + if (this.ariaLabel) { + this._button.ariaLabel = this.ariaLabel; + } + if (this.width) { this._button.setWidth(this.convertSize(this.width.toString())); } @@ -175,4 +182,11 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC this.setPropertyFromUI((properties, title) => { properties.title = title; }, newValue); } + private get ariaLabel(): string { + return this.getPropertyOrDefault((properties) => properties.ariaLabel, ''); + } + + private set ariaLabel(newValue: string) { + this.setPropertyFromUI((properties, ariaLabel) => { properties.ariaLabel = ariaLabel; }, newValue); + } }