ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add aria labels to buttons and spin inputs on Arc dashboards (#15798)

Browse Source
This commit is contained in:
Charles Gagnon
2021-06-17 19:38:27 -07:00
committed by GitHub
parent df296939a8
commit efd752aafe
4 changed files with 45 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
extensions/arc/src/localizedConstants.ts
View File

@@ -164,13 +164,21 @@ export const nodes = localize('arc.nodes', "nodes");
export const workerNodes = localize('arc.workerNodes', "Worker Nodes"); export const workerNodes = localize('arc.workerNodes', "Worker Nodes");
export const coordinatorNode = localize('arc.coordinatorNode', "Coordinator Node"); export const coordinatorNode = localize('arc.coordinatorNode', "Coordinator Node");
export const storagePerNode = localize('arc.storagePerNode', "storage per node"); export const storagePerNode = localize('arc.storagePerNode', "storage per node");
export const workerNodeCount = localize('arc.workerNodeCount', "Worker node count:"); export const workerNodeCount = localize('arc.workerNodeCount', "Worker node count");
export const configurationPerNode = localize('arc.configurationPerNode', "Configuration (per node)"); export const configurationPerNode = localize('arc.configurationPerNode', "Configuration (per node)");
export const configuration = localize('arc.configurationCoordinatorNode', "Configuration"); export const configuration = localize('arc.configurationCoordinatorNode', "Configuration");
export const coresLimit = localize('arc.coresLimit', "CPU limit:"); export const coresLimit = localize('arc.coresLimit', "CPU limit");
export const coresRequest = localize('arc.coresRequest', "CPU request:"); export const workerCoresLimit = localize('arc.workerCoresLimit', "Worker Nodes CPU limit");
export const memoryLimit = localize('arc.memoryLimit', "Memory limit (in GB):"); export const coordinatorCoresLimit = localize('arc.coordinatorCoresLimit', "Coordinator Node CPU limit");
export const memoryRequest = localize('arc.memoryRequest', "Memory request (in GB):"); export const coresRequest = localize('arc.coresRequest', "CPU request");
export const workerCoresRequest = localize('arc.workerCoresRequest', "Worker Nodes CPU request");
export const coordinatorCoresRequest = localize('arc.coordinatorCoresRequest', "Coordinator Node CPU request");
export const memoryLimit = localize('arc.memoryLimit', "Memory limit (in GB)");
export const workerMemoryLimit = localize('arc.workerMemoryLimit', "Worker Nodes Memory limit (in GB)");
export const coordinatorMemoryLimit = localize('arc.coordinatorMemoryLimit', "Coordinator Node Memory limit (in GB)");
export const memoryRequest = localize('arc.memoryRequest', "Memory request (in GB)");
export const workerMemoryRequest = localize('arc.workerMemoryRequest', "Worker Nodes Memory request (in GB)");
export const coordinatorMemoryRequest = localize('arc.coordinatorMemoryRequest', "Coordinator Node Memory request (in GB)");
export const arcResources = localize('arc.arcResources', "Azure Arc Resources"); export const arcResources = localize('arc.arcResources', "Azure Arc Resources");
export const enterANonEmptyPassword = localize('arc.enterANonEmptyPassword', "Enter a non empty password or press escape to exit."); export const enterANonEmptyPassword = localize('arc.enterANonEmptyPassword', "Enter a non empty password or press escape to exit.");
export const thePasswordsDoNotMatch = localize('arc.thePasswordsDoNotMatch', "The passwords do not match. Confirm the password or press escape to exit."); export const thePasswordsDoNotMatch = localize('arc.thePasswordsDoNotMatch', "The passwords do not match. Confirm the password or press escape to exit.");
@@ -217,6 +225,8 @@ export function numVCores(vCores: string | undefined): string {
} }
} }
export function updated(when: string): string { return localize('arc.updated', "Updated {0}", when); } export function updated(when: string): string { return localize('arc.updated', "Updated {0}", when); }
export function copyConnectionStringToClipboard(type: string): string { return localize({ key: 'arc.copyConnectionStringToClipboard', comment: ['{0} is the name of the type of connection string (e.g. Java)'] }, "Copy {0} Connection String to clipboard", type); }
export function copyValueToClipboard(valueName: string): string { return localize({ key: 'arc.copyValueToClipboard', comment: ['{0} is the name of the type of value being copied (e.g. Coordinator endpoint)'] }, "Copy {0} to clipboard", valueName); }
// Errors // Errors
export const pgConnectionRequired = localize('arc.pgConnectionRequired', "A connection is required to show and set database engine settings."); export const pgConnectionRequired = localize('arc.pgConnectionRequired', "A connection is required to show and set database engine settings.");

3
extensions/arc/src/ui/components/keyValueContainer.ts
View File

@@ -113,7 +113,8 @@ export abstract class BaseInputKeyValue extends KeyValue {
const copy = modelBuilder.button().withProperties<azdata.ButtonProperties>({ const copy = modelBuilder.button().withProperties<azdata.ButtonProperties>({
iconPath: IconPathHelper.copy, iconPath: IconPathHelper.copy,
width: '17px', width: '17px',
height: '17px' height: '17px',
ariaLabel: loc.copyConnectionStringToClipboard(key)
}).component(); }).component();
this.disposables.push(copy.onDidClick(async () => { this.disposables.push(copy.onDidClick(async () => {

14
extensions/arc/src/ui/dashboards/miaa/miaaComputeAndStoragePage.ts
View File

@@ -183,7 +183,8 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
readOnly: false, readOnly: false,
min: 1, min: 1,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading placeHolder: loc.loading,
ariaLabel: loc.coresLimit
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -200,7 +201,8 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
readOnly: false, readOnly: false,
min: 1, min: 1,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading placeHolder: loc.loading,
ariaLabel: loc.coresRequest
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -217,7 +219,8 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
readOnly: false, readOnly: false,
min: 2, min: 2,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading placeHolder: loc.loading,
ariaLabel: loc.memoryLimit
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -234,7 +237,8 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
readOnly: false, readOnly: false,
min: 2, min: 2,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading placeHolder: loc.loading,
ariaLabel: loc.memoryRequest
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -274,7 +278,7 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
}).component(); }).component();
const keyComponent = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ const keyComponent = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
value: key, value: `${key} :`,
CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' } CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
}).component(); }).component();

29
extensions/arc/src/ui/dashboards/postgres/postgresComputeAndStoragePage.ts
View File

@@ -247,7 +247,8 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
min: 0, min: 0,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading, placeHolder: loc.loading,
required: true required: true,
ariaLabel: loc.workerNodeCount
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -265,7 +266,8 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
readOnly: false, readOnly: false,
min: 1, min: 1,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading placeHolder: loc.loading,
ariaLabel: loc.workerCoresRequest
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -285,7 +287,8 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
readOnly: false, readOnly: false,
min: 1, min: 1,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading placeHolder: loc.loading,
ariaLabel: loc.workerCoresLimit
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -305,7 +308,8 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
readOnly: false, readOnly: false,
min: 0.25, min: 0.25,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading placeHolder: loc.loading,
ariaLabel: loc.workerMemoryRequest
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -325,7 +329,8 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
readOnly: false, readOnly: false,
min: 0.25, min: 0.25,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading placeHolder: loc.loading,
ariaLabel: loc.workerMemoryLimit
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -345,7 +350,8 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
readOnly: false, readOnly: false,
min: 1, min: 1,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading placeHolder: loc.loading,
ariaLabel: loc.coordinatorCoresRequest
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -365,7 +371,8 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
readOnly: false, readOnly: false,
min: 1, min: 1,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading placeHolder: loc.loading,
ariaLabel: loc.coordinatorCoresLimit
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -385,7 +392,8 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
readOnly: false, readOnly: false,
min: 0.25, min: 0.25,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading placeHolder: loc.loading,
ariaLabel: loc.coordinatorMemoryRequest
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -405,7 +413,8 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
readOnly: false, readOnly: false,
min: 0.25, min: 0.25,
inputType: 'number', inputType: 'number',
placeHolder: loc.loading placeHolder: loc.loading,
ariaLabel: loc.coordinatorMemoryLimit
}).component(); }).component();
this.disposables.push( this.disposables.push(
@@ -499,7 +508,7 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
}).component(); }).component();
const keyComponent = this.modelView.modelBuilder.text().withProps({ const keyComponent = this.modelView.modelBuilder.text().withProps({
value: key, value: `${key} :`,
CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' } CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
}).component(); }).component();