From b45f3e7218670e03b7fd31e3aad3b5b8bc781f9d Mon Sep 17 00:00:00 2001 From: brian-harris <61598682+brian-harris@users.noreply.github.com> Date: Thu, 15 Jul 2021 12:08:59 -0700 Subject: [PATCH] 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 --- .../sql-migration/src/constants/strings.ts | 11 +++++--- .../createSqlMigrationServiceDialog.ts | 28 ++++++++++++------- .../sqlMigrationServiceDetailsDialog.ts | 20 +++++++++---- .../src/wizard/databaseBackupPage.ts | 3 +- .../src/wizard/integrationRuntimePage.ts | 27 ++++++++++++------ 5 files changed, 59 insertions(+), 30 deletions(-) diff --git a/extensions/sql-migration/src/constants/strings.ts b/extensions/sql-migration/src/constants/strings.ts index 2d3de782d4..69f6d9846e 100644 --- a/extensions/sql-migration/src/constants/strings.ts +++ b/extensions/sql-migration/src/constants/strings.ts @@ -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_KEY1_LABEL = localize('sql.migration.key1.label', "Key 1"); 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 REFRESH_KEYS = localize('sql.migration.refresh.keys', "Refresh keys"); -export const COPY_KEY = localize('sql.migration.copy.key', "Copy key"); +export const SERVICE_KEY1_COPIED_HELP = localize('sql.migration.key1.copied', "Key 1 copied"); +export const SERVICE_KEY2_COPIED_HELP = localize('sql.migration.key2.copied', "Key 2 copied"); +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 function AUTH_KEY_REFRESHED(keyName: string): string { 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 export const LEARN_MORE = localize('sql.migration.learn.more', "Learn more"); 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 REGION = localize('sql.migration.region', "Region"); export const NAME = localize('sql.migration.name', "Name"); diff --git a/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts b/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts index e9d81f0616..e6418c4974 100644 --- a/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts +++ b/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts @@ -543,33 +543,41 @@ export class CreateSqlMigrationServiceDialog { const location = this._model._targetServerInstance.location; const keys = await getSqlMigrationServiceAuthKeys(this._model._azureAccount, subscription, resourceGroup, location, this._createdMigrationService!.name); - this._copyKey1Button = this._view.modelBuilder.button().withProps({ - iconPath: IconPathHelper.copy + this._copyKey1Button = this._view.modelBuilder.button().withProperties({ + title: constants.COPY_KEY1, + iconPath: IconPathHelper.copy, + ariaLabel: constants.COPY_KEY1, }).component(); this._copyKey1Button.onDidClick((e) => { vscode.env.clipboard.writeText(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({ - iconPath: IconPathHelper.copy + this._copyKey2Button = this._view.modelBuilder.button().withProperties({ + title: constants.COPY_KEY2, + iconPath: IconPathHelper.copy, + ariaLabel: constants.COPY_KEY2, }).component(); this._copyKey2Button.onDidClick((e) => { vscode.env.clipboard.writeText(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({ - iconPath: IconPathHelper.refresh + this._refreshKey1Button = this._view.modelBuilder.button().withProperties({ + title: constants.REFRESH_KEY1, + iconPath: IconPathHelper.refresh, + ariaLabel: constants.REFRESH_KEY1, }).component(); this._refreshKey1Button.onDidClick((e) => {//TODO: add refresh logic }); - this._refreshKey2Button = this._view.modelBuilder.button().withProps({ - iconPath: IconPathHelper.refresh + this._refreshKey2Button = this._view.modelBuilder.button().withProperties({ + title: constants.REFRESH_KEY2, + iconPath: IconPathHelper.refresh, + ariaLabel: constants.REFRESH_KEY2, }).component(); this._refreshKey2Button.onDidClick((e) => { //TODO: add refresh logic diff --git a/extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts b/extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts index 255b01bcaa..96d7d66e52 100644 --- a/extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts +++ b/extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts @@ -229,38 +229,44 @@ export class SqlMigrationServiceDetailsDialog { const copyKey1Button = view.modelBuilder .button() - .withProps({ + .withProperties({ + title: constants.COPY_KEY1, iconPath: IconPathHelper.copy, height: IMAGE_SIZE, width: IMAGE_SIZE, + ariaLabel: constants.COPY_KEY1, }) .component(); copyKey1Button.onDidClick((e) => { 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 .button() - .withProps({ + .withProperties({ + title: constants.COPY_KEY2, iconPath: IconPathHelper.copy, height: IMAGE_SIZE, width: IMAGE_SIZE, + ariaLabel: constants.COPY_KEY2, }) .component(); copyKey2Button.onDidClick((e) => { 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 .button() - .withProps({ + .withProperties({ + title: constants.REFRESH_KEY1, iconPath: IconPathHelper.refresh, height: IMAGE_SIZE, width: IMAGE_SIZE, + ariaLabel: constants.REFRESH_KEY1, }) .component(); refreshKey1Button.onDidClick( @@ -268,10 +274,12 @@ export class SqlMigrationServiceDetailsDialog { const refreshKey2Button = view.modelBuilder .button() - .withProps({ + .withProperties({ + title: constants.REFRESH_KEY2, iconPath: IconPathHelper.refresh, height: IMAGE_SIZE, width: IMAGE_SIZE, + ariaLabel: constants.REFRESH_KEY2, }) .component(); refreshKey2Button.onDidClick( diff --git a/extensions/sql-migration/src/wizard/databaseBackupPage.ts b/extensions/sql-migration/src/wizard/databaseBackupPage.ts index 0b85786bea..423c9c57b1 100644 --- a/extensions/sql-migration/src/wizard/databaseBackupPage.ts +++ b/extensions/sql-migration/src/wizard/databaseBackupPage.ts @@ -596,7 +596,8 @@ export class DatabaseBackupPage extends MigrationWizardPage { iconPath: IconPathHelper.refresh, iconHeight: 18, iconWidth: 18, - height: 25 + height: 25, + ariaLabel: constants.REFRESH, }).component(); this._networkShareContainerStorageAccountRefreshButton.onDidClick(async (value) => { diff --git a/extensions/sql-migration/src/wizard/integrationRuntimePage.ts b/extensions/sql-migration/src/wizard/integrationRuntimePage.ts index 58351803b9..0ba9cbde6e 100644 --- a/extensions/sql-migration/src/wizard/integrationRuntimePage.ts +++ b/extensions/sql-migration/src/wizard/integrationRuntimePage.ts @@ -263,7 +263,8 @@ export class IntergrationRuntimePage extends MigrationWizardPage { iconHeight: '18px', iconPath: IconPathHelper.refresh, height: '18px', - width: '18px' + width: '18px', + ariaLabel: constants.REFRESH, }).component(); this._refreshButton.onDidClick(async (e) => { @@ -311,30 +312,38 @@ export class IntergrationRuntimePage extends MigrationWizardPage { } }).component(); - this._copy1 = this._view.modelBuilder.button().withProps({ + this._copy1 = this._view.modelBuilder.button().withProperties({ + title: constants.COPY_KEY1, iconPath: IconPathHelper.copy, + ariaLabel: constants.COPY_KEY1, }).component(); this._copy1.onDidClick(async (e) => { await vscode.env.clipboard.writeText(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({ - iconPath: IconPathHelper.copy + this._copy2 = this._view.modelBuilder.button().withProperties({ + title: constants.COPY_KEY2, + iconPath: IconPathHelper.copy, + ariaLabel: constants.COPY_KEY2, }).component(); this._copy2.onDidClick(async (e) => { await vscode.env.clipboard.writeText(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({ - iconPath: IconPathHelper.refresh + this._refresh1 = this._view.modelBuilder.button().withProperties({ + title: constants.REFRESH_KEY1, + iconPath: IconPathHelper.refresh, + ariaLabel: constants.REFRESH_KEY1, }).component(); - this._refresh2 = this._view.modelBuilder.button().withProps({ + this._refresh2 = this._view.modelBuilder.button().withProperties({ + title: constants.REFRESH_KEY2, iconPath: IconPathHelper.refresh, + ariaLabel: constants.REFRESH_KEY2, }).component(); this._authKeyTable = this._view.modelBuilder.declarativeTable().withProps({ columns: [