Fix loading and clickable div screen reader issues (#9088)

* Fix loading and clickable div screen reader issues

* Change back to default clickable to false
This commit is contained in:
Charles Gagnon
2020-02-07 13:27:29 -08:00
committed by GitHub
parent 39ac8498dc
commit fe9ffddd3b
5 changed files with 42 additions and 21 deletions

View File

@@ -68,7 +68,7 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
this.propertiesErrorMessage = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ display: 'none', CSSStyles: { ...cssStyles.errorText } }).component();
rootContainer.addItem(this.propertiesErrorMessage, { flex: '0 0 auto' });
this.propertiesContainer = view.modelBuilder.divContainer().component();
this.propertiesContainer = view.modelBuilder.divContainer().withProperties<azdata.DivContainerProperties>({ clickable: false }).component();
// Row 1
const row1 = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row', height: '30px', alignItems: 'center' }).component();
@@ -76,14 +76,20 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
// Cluster State
const clusterStateLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: loc.clusterState }).component();
const clusterStateValue = view.modelBuilder.text().component();
this.clusterStateLoadingComponent = view.modelBuilder.loadingComponent().withItem(clusterStateValue).component();
this.clusterStateLoadingComponent = view.modelBuilder.loadingComponent()
.withItem(clusterStateValue)
.withProperties<azdata.LoadingComponentProperties>({ loadingCompletedText: loc.loadingClusterStateCompleted })
.component();
row1.addItem(clusterStateLabel, { CSSStyles: { 'width': `${clusterStateLabelColumnWidth}px`, 'min-width': `${clusterStateLabelColumnWidth}px`, 'user-select': 'none', 'font-weight': 'bold' } });
row1.addItem(this.clusterStateLoadingComponent, { CSSStyles: { 'width': `${clusterStateValueColumnWidth}px`, 'min-width': `${clusterStateValueColumnWidth}px` } });
// Health Status
const healthStatusLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: loc.healthStatusWithColon }).component();
const healthStatusValue = view.modelBuilder.text().component();
this.clusterHealthStatusLoadingComponent = view.modelBuilder.loadingComponent().withItem(healthStatusValue).component();
this.clusterHealthStatusLoadingComponent = view.modelBuilder.loadingComponent()
.withItem(healthStatusValue)
.withProperties<azdata.LoadingComponentProperties>({ loadingCompletedText: loc.loadingHealthStatusCompleted })
.component();
row1.addItem(healthStatusLabel, { CSSStyles: { 'width': `${healthStatusColumnWidth}px`, 'min-width': `${healthStatusColumnWidth}px`, 'user-select': 'none', 'font-weight': 'bold' } });
row1.addItem(this.clusterHealthStatusLoadingComponent, { CSSStyles: { 'width': `${healthStatusColumnWidth}px`, 'min-width': `${healthStatusColumnWidth}px` } });

View File

@@ -76,6 +76,8 @@ export const credentials = localize('mount.credentials.title', "Credentials");
export const credentialsInfo = localize('mount.credentials.info', "Mount credentials for authentication to remote data source for reads");
export const refreshMount = localize('refreshmount.dialog.title', "Refresh Mount");
export const deleteMount = localize('deleteMount.dialog.title', "Delete Mount");
export const loadingClusterStateCompleted = localize('bdc.dashboard.loadingClusterStateCompleted', "Loading cluster state completed");
export const loadingHealthStatusCompleted = localize('bdc.dashboard.loadingHealthStatusCompleted', "Loading health status completed");
// Errors
export const usernameRequired = localize('err.controller.username.required', "Username is required");