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 lables to pod drop down and tables of PG resources (#16229)

Browse Source 
* 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
This commit is contained in:
nasc17
2021-07-22 12:07:35 -07:00
committed by GitHub
parent 380457122c
commit 64d432c8e2
3 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts
View File

@@ -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,

6
extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts
View File

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