Inform screen-readers of Dacpac Deploy loading and loading complete for summary (#7000)

* Loading components now announce themselves.  Likely need way to disable.

* Adding focus elements to table for screen-reading after component is loaded in

* Adding piping for aria roles on tables

* Alerting on completion of deploy plan summary

* Removing extra ariaLive property
This commit is contained in:
Benjin Dubishar
2019-08-28 14:42:40 -07:00
committed by GitHub
parent 40d5667e63
commit faf6eae535
6 changed files with 38 additions and 2 deletions

View File

@@ -17,7 +17,7 @@ import * as nls from 'vs/nls';
@Component({
selector: 'modelview-loadingComponent',
template: `
<div class="modelview-loadingComponent-container" *ngIf="loading">
<div class="modelview-loadingComponent-container" role="alert" aria-busy="true" *ngIf="loading">
<div class="modelview-loadingComponent-spinner" *ngIf="loading" [title]=_loadingTitle #spinnerElement></div>
</div>
<model-component-wrapper #childElement [descriptor]="_component" [modelStore]="modelStore" *ngIf="_component" [ngClass]="{'modelview-loadingComponent-content-loading': loading}">

View File

@@ -245,6 +245,14 @@ export default class TableComponent extends ComponentBase implements IComponent,
this._table.ariaColumnCount = this.ariaColumnCount;
}
if (this.ariaRole) {
this._table.ariaRole = this.ariaRole;
}
if (this.focused) {
this._table.focus();
}
this.layoutTable();
this.validate();
}
@@ -328,6 +336,10 @@ export default class TableComponent extends ComponentBase implements IComponent,
return this.getPropertyOrDefault<azdata.TableComponentProperties, number>((props) => props.ariaColumnCount, -1);
}
public get ariaRole(): string {
return this.getPropertyOrDefault<azdata.TableComponentProperties, string>((props) => props.ariaRole, undefined);
}
public set moveFocusOutWithTab(newValue: boolean) {
this.setPropertyFromUI<azdata.TableComponentProperties, boolean>((props, value) => props.moveFocusOutWithTab = value, newValue);
}
@@ -335,4 +347,12 @@ export default class TableComponent extends ComponentBase implements IComponent,
public get moveFocusOutWithTab(): boolean {
return this.getPropertyOrDefault<azdata.TableComponentProperties, boolean>((props) => props.moveFocusOutWithTab, false);
}
public get focused(): boolean {
return this.getPropertyOrDefault<azdata.RadioButtonProperties, boolean>((props) => props.focused, false);
}
public set focused(newValue: boolean) {
this.setPropertyFromUI<azdata.RadioButtonProperties, boolean>((properties, value) => { properties.focused = value; }, newValue);
}
}