From 64d432c8e2469b0473949603d7a15f0517e526e9 Mon Sep 17 00:00:00 2001
From: nasc17 <69922333+nasc17@users.noreply.github.com>
Date: Thu, 22 Jul 2021 12:07:35 -0700
Subject: [PATCH] Add aria lables to pod drop down and tables of PG resources
 (#16229)

* Add aria labels to pod drop down on resource health and tables on overview

* Added roles

* Fix strings

* Added role to table headers

* Added heading levels
---
 extensions/arc/src/localizedConstants.ts                  | 3 +++
 .../src/ui/dashboards/postgres/postgresOverviewPage.ts    | 8 ++++++--
 .../ui/dashboards/postgres/postgresResourceHealthPage.ts  | 6 +++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/extensions/arc/src/localizedConstants.ts b/extensions/arc/src/localizedConstants.ts
index 0a8a0e1b7c..453cd7a916 100644
--- a/extensions/arc/src/localizedConstants.ts
+++ b/extensions/arc/src/localizedConstants.ts
@@ -73,6 +73,7 @@ export const grafanaDashboard = localize('arc.grafanaDashboard', "Grafana Dashbo
 export const kibanaDashboardDescription = localize('arc.kibanaDashboardDescription', "Dashboard for viewing logs");
 export const grafanaDashboardDescription = localize('arc.grafanaDashboardDescription', "Dashboard for viewing metrics");
 export const serviceEndpoints = localize('arc.serviceEndpoints', "Service endpoints");
+export const serviceEndpointsTable = localize('arc.serviceEndpointsTable', "Service endpoints table");
 export const databases = localize('arc.databases', "Databases");
 export const endpoint = localize('arc.endpoint', "Endpoint");
 export const description = localize('arc.description', "Description");
@@ -207,6 +208,8 @@ export const noWorkerPods = localize('arc.noWorkerPods', "No worker pods in this
 export const podsReady = localize('arc.podsReady', "pods ready");
 export const podsPresent = localize('arc.podsPresent', "Pods Present");
 export const podsUsedDescription = localize('arc.podsUsedDescription', "Select a pod in the dropdown below for detailed health information.");
+export const podsUsedDescriptionAria = localize('arc.podsUsedDescriptionAria', "Select a pod in the dropdown below for detailed health information");
+export const podConditionsTable = localize('arc.podConditionsTable', "Pod conditions table");
 export const connectToPostgresDescription = localize('arc.connectToPostgresDescription', "A connection to the server is required to show and set database engine settings, which will require the PostgreSQL Extension to be installed.");
 export const postgresExtension = localize('arc.postgresExtension', "microsoft.azuredatastudio-postgresql");
 export const podInitialized = localize('arc.podInitialized', "Pod is initialized.");
diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts
index b5329b6666..f9d64dcae9 100644
--- a/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts
+++ b/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts
@@ -81,7 +81,8 @@ export class PostgresOverviewPage extends DashboardPage {
 		const titleCSS = { ...cssStyles.title, 'margin-block-start': '2em', 'margin-block-end': '0' };
 		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.serviceEndpoints,
-			CSSStyles: titleCSS
+			CSSStyles: titleCSS,
+			headingLevel: 1
 		}).component());
 
 		this.kibanaLink = this.modelView.modelBuilder.hyperlink().component();
@@ -107,6 +108,7 @@ export class PostgresOverviewPage extends DashboardPage {
 
 		const endpointsTable = this.modelView.modelBuilder.declarativeTable().withProps({
 			width: '100%',
+			ariaLabel: loc.serviceEndpoints,
 			columns: [
 				{
 					displayName: loc.name,
@@ -148,13 +150,15 @@ export class PostgresOverviewPage extends DashboardPage {
 		// Server Group Nodes
 		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.serverGroupNodes,
-			CSSStyles: titleCSS
+			CSSStyles: titleCSS,
+			headingLevel: 1
 		}).component());
 
 
 
 		this.podStatusTable = this.modelView.modelBuilder.declarativeTable().withProps({
 			width: '100%',
+			ariaLabel: loc.serverGroupNodes,
 			columns: [
 				{
 					displayName: loc.name,
diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts
index 5413679b7e..bf0a4e2871 100644
--- a/extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts
+++ b/extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts
@@ -90,6 +90,7 @@ export class PostgresResourceHealthPage extends DashboardPage {
 		this.podConditionsContainer = this.modelView.modelBuilder.divContainer().component();
 		this.podConditionsTable = this.modelView.modelBuilder.declarativeTable().withProps({
 			width: '100%',
+			ariaLabel: loc.podConditionsTable,
 			columns: [
 				{
 					displayName: loc.condition,
@@ -122,7 +123,10 @@ export class PostgresResourceHealthPage extends DashboardPage {
 			dataValues: this.createPodConditionsDataValues(this.coordinatorData)
 		}).component();
 
-		this.podDropDown = this.modelView.modelBuilder.dropDown().withProps({ width: '150px' }).component();
+		this.podDropDown = this.modelView.modelBuilder.dropDown().withProps({
+			width: '150px',
+			ariaLabel: loc.podsUsedDescriptionAria
+		}).component();
 		this.disposables.push(
 			this.podDropDown.onValueChanged(() => {
 				this.podConditionsTable.setFilter(this.podConditionsTableIndexes.get(String(this.podDropDown.value)));