add aria-label / name to image only buttons (#16124)

* add aria-label / name to image only buttons

* add correct aria label to image buttons

* add key number to button aria-label, title and action messages to differentient keys
This commit is contained in:
brian-harris
2021-07-15 12:08:59 -07:00
committed by GitHub
parent 0ff8786885
commit b45f3e7218
5 changed files with 59 additions and 30 deletions

View File

@@ -187,9 +187,12 @@ export const SERVICE_STEP3 = localize('sql.migration.ir.setup.step3', "Step 3: C
export const SERVICE_CONNECTION_STATUS = localize('sql.migration.connection.status', "Connection Status"); export const SERVICE_CONNECTION_STATUS = localize('sql.migration.connection.status', "Connection Status");
export const SERVICE_KEY1_LABEL = localize('sql.migration.key1.label', "Key 1"); export const SERVICE_KEY1_LABEL = localize('sql.migration.key1.label', "Key 1");
export const SERVICE_KEY2_LABEL = localize('sql.migration.key2.label', "Key 2"); export const SERVICE_KEY2_LABEL = localize('sql.migration.key2.label', "Key 2");
export const SERVICE_KEY_COPIED_HELP = localize('sql.migration.key.copied', "Key copied"); export const SERVICE_KEY1_COPIED_HELP = localize('sql.migration.key1.copied', "Key 1 copied");
export const REFRESH_KEYS = localize('sql.migration.refresh.keys', "Refresh keys"); export const SERVICE_KEY2_COPIED_HELP = localize('sql.migration.key2.copied', "Key 2 copied");
export const COPY_KEY = localize('sql.migration.copy.key', "Copy key"); export const REFRESH_KEY1 = localize('sql.migration.refresh.key1', "Refresh key 1");
export const REFRESH_KEY2 = localize('sql.migration.refresh.key2', "Refresh key 2");
export const COPY_KEY1 = localize('sql.migration.copy.key1', "Copy key 1");
export const COPY_KEY2 = localize('sql.migration.copy.key2', "Copy key 2");
export const AUTH_KEY_COLUMN_HEADER = localize('sql.migration.authkeys.header', "Authentication key"); export const AUTH_KEY_COLUMN_HEADER = localize('sql.migration.authkeys.header', "Authentication key");
export function AUTH_KEY_REFRESHED(keyName: string): string { export function AUTH_KEY_REFRESHED(keyName: string): string {
return localize('sql.migration.authkeys.refresh.message', "Authentication key '{0}' has been refreshed.", keyName); return localize('sql.migration.authkeys.refresh.message', "Authentication key '{0}' has been refreshed.", keyName);
@@ -225,7 +228,7 @@ export const NAME_OF_NEW_RESOURCE_GROUP = localize('sql.migration.name.of.new.rg
// common strings // common strings
export const LEARN_MORE = localize('sql.migration.learn.more', "Learn more"); export const LEARN_MORE = localize('sql.migration.learn.more', "Learn more");
export const SUBSCRIPTION = localize('sql.migration.subscription', "Subscription"); export const SUBSCRIPTION = localize('sql.migration.subscription', "Subscription");
export const STORAGE_ACCOUNT = localize('sql.migration.storage.account', "Storage Account"); export const STORAGE_ACCOUNT = localize('sql.migration.storage.account', "Storage account");
export const RESOURCE_GROUP = localize('sql.migration.resourceGroups', "Resource group"); export const RESOURCE_GROUP = localize('sql.migration.resourceGroups', "Resource group");
export const REGION = localize('sql.migration.region', "Region"); export const REGION = localize('sql.migration.region', "Region");
export const NAME = localize('sql.migration.name', "Name"); export const NAME = localize('sql.migration.name', "Name");

View File

@@ -543,33 +543,41 @@ export class CreateSqlMigrationServiceDialog {
const location = this._model._targetServerInstance.location; const location = this._model._targetServerInstance.location;
const keys = await getSqlMigrationServiceAuthKeys(this._model._azureAccount, subscription, resourceGroup, location, this._createdMigrationService!.name); const keys = await getSqlMigrationServiceAuthKeys(this._model._azureAccount, subscription, resourceGroup, location, this._createdMigrationService!.name);
this._copyKey1Button = this._view.modelBuilder.button().withProps({ this._copyKey1Button = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
iconPath: IconPathHelper.copy title: constants.COPY_KEY1,
iconPath: IconPathHelper.copy,
ariaLabel: constants.COPY_KEY1,
}).component(); }).component();
this._copyKey1Button.onDidClick((e) => { this._copyKey1Button.onDidClick((e) => {
vscode.env.clipboard.writeText(<string>this.migrationServiceAuthKeyTable.dataValues![0][1].value); vscode.env.clipboard.writeText(<string>this.migrationServiceAuthKeyTable.dataValues![0][1].value);
vscode.window.showInformationMessage(constants.SERVICE_KEY_COPIED_HELP); vscode.window.showInformationMessage(constants.SERVICE_KEY1_COPIED_HELP);
}); });
this._copyKey2Button = this._view.modelBuilder.button().withProps({ this._copyKey2Button = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
iconPath: IconPathHelper.copy title: constants.COPY_KEY2,
iconPath: IconPathHelper.copy,
ariaLabel: constants.COPY_KEY2,
}).component(); }).component();
this._copyKey2Button.onDidClick((e) => { this._copyKey2Button.onDidClick((e) => {
vscode.env.clipboard.writeText(<string>this.migrationServiceAuthKeyTable.dataValues![1][1].value); vscode.env.clipboard.writeText(<string>this.migrationServiceAuthKeyTable.dataValues![1][1].value);
vscode.window.showInformationMessage(constants.SERVICE_KEY_COPIED_HELP); vscode.window.showInformationMessage(constants.SERVICE_KEY2_COPIED_HELP);
}); });
this._refreshKey1Button = this._view.modelBuilder.button().withProps({ this._refreshKey1Button = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
iconPath: IconPathHelper.refresh title: constants.REFRESH_KEY1,
iconPath: IconPathHelper.refresh,
ariaLabel: constants.REFRESH_KEY1,
}).component(); }).component();
this._refreshKey1Button.onDidClick((e) => {//TODO: add refresh logic this._refreshKey1Button.onDidClick((e) => {//TODO: add refresh logic
}); });
this._refreshKey2Button = this._view.modelBuilder.button().withProps({ this._refreshKey2Button = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
iconPath: IconPathHelper.refresh title: constants.REFRESH_KEY2,
iconPath: IconPathHelper.refresh,
ariaLabel: constants.REFRESH_KEY2,
}).component(); }).component();
this._refreshKey2Button.onDidClick((e) => { //TODO: add refresh logic this._refreshKey2Button.onDidClick((e) => { //TODO: add refresh logic

View File

@@ -229,38 +229,44 @@ export class SqlMigrationServiceDetailsDialog {
const copyKey1Button = view.modelBuilder const copyKey1Button = view.modelBuilder
.button() .button()
.withProps({ .withProperties<azdata.ComponentWithIconProperties>({
title: constants.COPY_KEY1,
iconPath: IconPathHelper.copy, iconPath: IconPathHelper.copy,
height: IMAGE_SIZE, height: IMAGE_SIZE,
width: IMAGE_SIZE, width: IMAGE_SIZE,
ariaLabel: constants.COPY_KEY1,
}) })
.component(); .component();
copyKey1Button.onDidClick((e) => { copyKey1Button.onDidClick((e) => {
vscode.env.clipboard.writeText(keys.authKey1); vscode.env.clipboard.writeText(keys.authKey1);
vscode.window.showInformationMessage(constants.SERVICE_KEY_COPIED_HELP); vscode.window.showInformationMessage(constants.SERVICE_KEY1_COPIED_HELP);
}); });
const copyKey2Button = view.modelBuilder const copyKey2Button = view.modelBuilder
.button() .button()
.withProps({ .withProperties<azdata.ComponentWithIconProperties>({
title: constants.COPY_KEY2,
iconPath: IconPathHelper.copy, iconPath: IconPathHelper.copy,
height: IMAGE_SIZE, height: IMAGE_SIZE,
width: IMAGE_SIZE, width: IMAGE_SIZE,
ariaLabel: constants.COPY_KEY2,
}) })
.component(); .component();
copyKey2Button.onDidClick((e) => { copyKey2Button.onDidClick((e) => {
vscode.env.clipboard.writeText(keys.authKey2); vscode.env.clipboard.writeText(keys.authKey2);
vscode.window.showInformationMessage(constants.SERVICE_KEY_COPIED_HELP); vscode.window.showInformationMessage(constants.SERVICE_KEY2_COPIED_HELP);
}); });
const refreshKey1Button = view.modelBuilder const refreshKey1Button = view.modelBuilder
.button() .button()
.withProps({ .withProperties<azdata.ComponentWithIconProperties>({
title: constants.REFRESH_KEY1,
iconPath: IconPathHelper.refresh, iconPath: IconPathHelper.refresh,
height: IMAGE_SIZE, height: IMAGE_SIZE,
width: IMAGE_SIZE, width: IMAGE_SIZE,
ariaLabel: constants.REFRESH_KEY1,
}) })
.component(); .component();
refreshKey1Button.onDidClick( refreshKey1Button.onDidClick(
@@ -268,10 +274,12 @@ export class SqlMigrationServiceDetailsDialog {
const refreshKey2Button = view.modelBuilder const refreshKey2Button = view.modelBuilder
.button() .button()
.withProps({ .withProperties<azdata.ComponentWithIconProperties>({
title: constants.REFRESH_KEY2,
iconPath: IconPathHelper.refresh, iconPath: IconPathHelper.refresh,
height: IMAGE_SIZE, height: IMAGE_SIZE,
width: IMAGE_SIZE, width: IMAGE_SIZE,
ariaLabel: constants.REFRESH_KEY2,
}) })
.component(); .component();
refreshKey2Button.onDidClick( refreshKey2Button.onDidClick(

View File

@@ -596,7 +596,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
iconPath: IconPathHelper.refresh, iconPath: IconPathHelper.refresh,
iconHeight: 18, iconHeight: 18,
iconWidth: 18, iconWidth: 18,
height: 25 height: 25,
ariaLabel: constants.REFRESH,
}).component(); }).component();
this._networkShareContainerStorageAccountRefreshButton.onDidClick(async (value) => { this._networkShareContainerStorageAccountRefreshButton.onDidClick(async (value) => {

View File

@@ -263,7 +263,8 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
iconHeight: '18px', iconHeight: '18px',
iconPath: IconPathHelper.refresh, iconPath: IconPathHelper.refresh,
height: '18px', height: '18px',
width: '18px' width: '18px',
ariaLabel: constants.REFRESH,
}).component(); }).component();
this._refreshButton.onDidClick(async (e) => { this._refreshButton.onDidClick(async (e) => {
@@ -311,30 +312,38 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
} }
}).component(); }).component();
this._copy1 = this._view.modelBuilder.button().withProps({ this._copy1 = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
title: constants.COPY_KEY1,
iconPath: IconPathHelper.copy, iconPath: IconPathHelper.copy,
ariaLabel: constants.COPY_KEY1,
}).component(); }).component();
this._copy1.onDidClick(async (e) => { this._copy1.onDidClick(async (e) => {
await vscode.env.clipboard.writeText(<string>this._authKeyTable.dataValues![0][1].value); await vscode.env.clipboard.writeText(<string>this._authKeyTable.dataValues![0][1].value);
vscode.window.showInformationMessage(constants.SERVICE_KEY_COPIED_HELP); vscode.window.showInformationMessage(constants.SERVICE_KEY1_COPIED_HELP);
}); });
this._copy2 = this._view.modelBuilder.button().withProps({ this._copy2 = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
iconPath: IconPathHelper.copy title: constants.COPY_KEY2,
iconPath: IconPathHelper.copy,
ariaLabel: constants.COPY_KEY2,
}).component(); }).component();
this._copy2.onDidClick(async (e) => { this._copy2.onDidClick(async (e) => {
await vscode.env.clipboard.writeText(<string>this._authKeyTable.dataValues![1][1].value); await vscode.env.clipboard.writeText(<string>this._authKeyTable.dataValues![1][1].value);
vscode.window.showInformationMessage(constants.SERVICE_KEY_COPIED_HELP); vscode.window.showInformationMessage(constants.SERVICE_KEY2_COPIED_HELP);
}); });
this._refresh1 = this._view.modelBuilder.button().withProps({ this._refresh1 = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
iconPath: IconPathHelper.refresh title: constants.REFRESH_KEY1,
iconPath: IconPathHelper.refresh,
ariaLabel: constants.REFRESH_KEY1,
}).component(); }).component();
this._refresh2 = this._view.modelBuilder.button().withProps({ this._refresh2 = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
title: constants.REFRESH_KEY2,
iconPath: IconPathHelper.refresh, iconPath: IconPathHelper.refresh,
ariaLabel: constants.REFRESH_KEY2,
}).component(); }).component();
this._authKeyTable = this._view.modelBuilder.declarativeTable().withProps({ this._authKeyTable = this._view.modelBuilder.declarativeTable().withProps({
columns: [ columns: [