ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-14 12:08:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Benjind/schema compare add aria label (#6767)

Browse Source 
* Adds button extension for explicitly setting aria-label, in case the label is not screen-reader friendly

* Explicitly set aria-label for ellipsis buttons in SchemaCompare

* Changing localize call to double-quotes

* Removes unused getter for ariaLabel
This commit is contained in:
Benjin Dubishar
2019-08-15 15:14:37 -07:00
committed by GitHub
parent 314bd0e212
commit b05e35bdd7
4 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
extensions/schema-compare/src/schemaCompareMainWindow.ts
View File

@@ -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(() => {

1
src/sql/azdata.d.ts vendored
View File

@@ -3356,6 +3356,7 @@ declare module 'azdata' {
isFile?: boolean;
fileContent?: string;
title?: string;
ariaLabel?: string;
}
export interface LoadingComponentProperties {

4
src/sql/base/browser/ui/button/button.ts
View File

@@ -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;
}

14
src/sql/workbench/browser/modelComponents/button.component.ts
View File

@@ -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<azdata.ButtonProperties, string>((properties, title) => { properties.title = title; }, newValue);
}
private get ariaLabel(): string {
return this.getPropertyOrDefault<azdata.ButtonProperties, string>((properties) => properties.ariaLabel, '');
}
private set ariaLabel(newValue: string) {
this.setPropertyFromUI<azdata.ButtonProperties, string>((properties, ariaLabel) => { properties.ariaLabel = ariaLabel; }, newValue);
}
}