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

Add aria role and selected properties (#8405)

Browse Source 
* Add aria role and selected properties

* Add img role fix

* Add title to text
This commit is contained in:
Charles Gagnon
2019-11-20 13:56:59 -08:00
committed by GitHub
parent 7e553031ce
commit f26c790736
11 changed files with 92 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboard.ts
View File

@@ -121,12 +121,21 @@ export class BdcDashboard extends BdcDashboardPage {
width: navWidth,
height: '100%'
}
).component();
).withProperties({
ariaRole: 'tablist'
}).component();
this.mainAreaContainer.addItem(this.navContainer, { flex: `0 0 ${navWidth}`, CSSStyles: { 'padding': '0 20px 0 20px', 'border-right': 'solid 1px #ccc' } });
// Overview nav item - this will be the initial page
const overviewNavItemDiv = modelView.modelBuilder.divContainer().withLayout({ width: navWidth, height: '30px' }).withProperties({ clickable: true }).component();
const overviewNavItemDiv = modelView.modelBuilder
.divContainer()
.withLayout({ width: navWidth, height: '30px' })
.withProperties<azdata.DivContainerProperties>({
clickable: true,
ariaRole: 'tab',
ariaSelected: true
}).component();
const overviewNavItemText = modelView.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.overviewNavTitle', "Big Data Cluster overview") }).component();
overviewNavItemText.updateCssStyles(selectedTabCss);
overviewNavItemDiv.addItem(overviewNavItemText, { CSSStyles: { 'user-select': 'text' } });
@@ -139,12 +148,14 @@ export class BdcDashboard extends BdcDashboardPage {
overviewNavItemDiv.onDidClick(() => {
if (this.currentTab) {
this.currentTab.text.updateCssStyles(unselectedTabCss);
this.currentTab.div.ariaSelected = false;
}
this.mainAreaContainer.removeItem(this.currentPage);
this.mainAreaContainer.addItem(overviewContainer, { flex: '0 0 100%', CSSStyles: { 'margin': '0 20px 0 20px' } });
this.currentPage = overviewContainer;
this.currentTab = { serviceName: undefined, div: overviewNavItemDiv, dot: undefined, text: overviewNavItemText };
this.currentTab.text.updateCssStyles(selectedTabCss);
this.currentTab.div.ariaSelected = true;
});
this.navContainer.addItem(overviewNavItemDiv, { flex: '0 0 auto' });
@@ -198,12 +209,14 @@ export class BdcDashboard extends BdcDashboardPage {
}
if (this.currentTab) {
this.currentTab.text.updateCssStyles(unselectedTabCss);
this.currentTab.div.ariaSelected = false;
}
this.mainAreaContainer.removeItem(this.currentPage);
this.mainAreaContainer.addItem(tabPageMapping.servicePage, { CSSStyles: { 'margin': '0 20px 0 20px' } });
this.currentPage = tabPageMapping.servicePage;
this.currentTab = tabPageMapping.navTab;
this.currentTab.text.updateCssStyles(selectedTabCss);
this.currentTab.div.ariaSelected = true;
}
/**
@@ -233,7 +246,15 @@ export class BdcDashboard extends BdcDashboardPage {
}
function createServiceNavTab(modelBuilder: azdata.ModelBuilder, serviceStatus: ServiceStatusModel): NavTab {
const div = modelBuilder.divContainer().withLayout({ width: navWidth, height: '30px', }).withProperties({ clickable: true }).component();
const div = modelBuilder.divContainer()
.withLayout({
width: navWidth,
height: '30px',
})
.withProperties<azdata.DivContainerProperties>({
clickable: true,
ariaRole: 'tab'
}).component();
const innerContainer = modelBuilder.flexContainer().withLayout({ width: navWidth, height: '30px', flexFlow: 'row' }).component();
const dot = modelBuilder.text().withProperties({ value: getHealthStatusDot(serviceStatus.healthStatus), CSSStyles: { 'color': 'red', 'font-size': '40px', 'width': '20px', ...cssStyles.nonSelectableText } }).component();
innerContainer.addItem(dot, { flex: '0 0 auto' });

8
extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts
View File

@@ -294,7 +294,13 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
private createServiceStatusRow(container: azdata.FlexContainer, serviceStatus: ServiceStatusModel, isLastRow: boolean): void {
const serviceStatusRow = this.modelBuilder.flexContainer().withLayout({ flexFlow: 'row', alignItems: 'center', height: '30px' }).component();
const statusIconCell = this.modelBuilder.text().withProperties({ value: getHealthStatusIcon(serviceStatus.healthStatus), CSSStyles: { 'user-select': 'none' } }).component();
const statusIconCell = this.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>({
value: getHealthStatusIcon(serviceStatus.healthStatus),
ariaRole: 'img',
title: getHealthStatusDisplayText(serviceStatus.healthStatus),
CSSStyles: { 'user-select': 'none' }
}).component();
serviceStatusRow.addItem(statusIconCell, { CSSStyles: { 'width': `${overviewIconColumnWidthPx}px`, 'min-width': `${overviewIconColumnWidthPx}px` } });
const nameCell = this.modelBuilder.text().withProperties({ value: getServiceNameDisplayText(serviceStatus.serviceName), CSSStyles: { ...cssStyles.text, ...cssStyles.hyperlink } }).component();
nameCell.onDidClick(() => {

2
extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts
View File

@@ -168,6 +168,8 @@ function createInstanceHealthStatusRow(modelBuilder: azdata.ModelBuilder, instan
const statusIconCell = modelBuilder.text()
.withProperties<azdata.TextComponentProperties>({
value: getHealthStatusIcon(instanceStatus.healthStatus),
ariaRole: 'img',
title: getHealthStatusDisplayText(instanceStatus.healthStatus),
CSSStyles: { 'user-select': 'none' }
}).component();
instanceHealthStatusRow.addItem(statusIconCell, { CSSStyles: { 'width': `${healthAndStatusIconColumnWidth}px`, 'min-width': `${healthAndStatusIconColumnWidth}px` } });

18
extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts
View File

@@ -46,7 +46,9 @@ export class BdcServiceStatusPage extends BdcDashboardPage {
width: '100%',
height: '25px'
}
).component();
).withProperties({
ariaRole: 'tablist'
}).component();
this.rootContainer.addItem(this.resourceHeader, { CSSStyles: { 'padding-top': '15px' } });
@@ -96,12 +98,14 @@ export class BdcServiceStatusPage extends BdcDashboardPage {
}
if (this.currentTab) {
this.currentTab.tab.text.updateCssStyles(cssStyles.unselectedResourceHeaderTab);
this.currentTab.tab.div.ariaSelected = false;
this.resourceHeader.removeItem(this.currentTab.tab.div);
this.resourceHeader.insertItem(this.currentTab.tab.div, this.currentTab.index, { flex: '0 0 auto', CSSStyles: cssStyles.unselectedTabDiv });
}
this.changeSelectedTabPage(resourceStatusPage);
this.currentTab = { tab: resourceHeaderTab, index: currentIndex };
this.currentTab.tab.text.updateCssStyles(cssStyles.selectedResourceHeaderTab);
this.currentTab.tab.div.ariaSelected = true;
this.resourceHeader.removeItem(this.currentTab.tab.div);
this.resourceHeader.insertItem(this.currentTab.tab.div, this.currentTab.index, { flex: '0 0 auto', CSSStyles: cssStyles.selectedTabDiv });
});
@@ -110,6 +114,7 @@ export class BdcServiceStatusPage extends BdcDashboardPage {
this.changeSelectedTabPage(resourceStatusPage);
this.currentTab = { tab: resourceHeaderTab, index: currentIndex };
this.currentTab.tab.text.updateCssStyles(cssStyles.selectedResourceHeaderTab);
this.currentTab.tab.div.ariaSelected = true;
this.resourceHeader.addItem(resourceHeaderTab.div, { flex: '0 0 auto', CSSStyles: cssStyles.selectedTabDiv });
}
else {
@@ -127,7 +132,16 @@ export class BdcServiceStatusPage extends BdcDashboardPage {
* @param resourceStatus The status of the resource we're creating
*/
function createResourceHeaderTab(modelBuilder: azdata.ModelBuilder, resourceStatus: ResourceStatusModel): ServiceTab {
const resourceHeaderTab = modelBuilder.divContainer().withLayout({ width: '100px', height: '25px' }).withProperties({ clickable: true }).component();
const resourceHeaderTab = modelBuilder
.divContainer()
.withLayout({
width: '100px',
height: '25px'
})
.withProperties({
clickable: true,
ariaRole: 'tab'
}).component();
const innerContainer = modelBuilder.flexContainer().withLayout({ width: '100px', height: '25px', flexFlow: 'row' }).component();
const statusDot = modelBuilder.text().withProperties({ value: getHealthStatusDot(resourceStatus.healthStatus), CSSStyles: { 'color': 'red', 'font-size': '40px', 'width': '20px', 'text-align': 'right', ...cssStyles.nonSelectableText } }).component();
innerContainer.addItem(statusDot, { flex: '0 0 auto' });