ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Adding aria label to "check all" check box in declarative table. (#13216)

Browse Source 
* added arialable for check all checkboxes and added some missing roles for the table elements

* removed duplicate attribute

* Moved column header aria label logic to a function.

* fixed typos in declarative table

* Changed the aria label text to something that is more intuiive.

* fixed typo in localized string identifier
This commit is contained in:
Aasim Khan
2020-11-06 10:44:33 -08:00
committed by GitHub
parent cd6fa08543
commit 054583e0de
2 changed files with 57 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/sql/workbench/browser/modelComponents/declarativeTable.component.html
View File

@@ -1,45 +1,52 @@
<table role=grid #container *ngIf="columns" class="declarative-table" [style.height]="getHeight()" <table role="grid" #container *ngIf="columns" class="declarative-table" [style.height]="getHeight()"
[style.width]="getWidth()" [attr.aria-label]="ariaLabel"> [style.width]="getWidth()" [attr.aria-label]="ariaLabel">
<thead> <thead role="rowgroup">
<ng-container *ngFor="let column of columns; let c = index;"> <tr role="row">
<th class="declarative-table-header" aria-sort="none" [style.width]="getColumnWidth(column)" <ng-container *ngFor="let column of columns; let c = index;">
[attr.aria-label]="column.ariaLabel" [ngStyle]="column.headerCssStyles" role="columnheader"> <th class="declarative-table-header" aria-sort="none" [style.width]="getColumnWidth(column)"
{{column.displayName}} [ngStyle]="column.headerCssStyles"
<checkbox *ngIf="isCheckBox(c)" [checked]="isHeaderChecked(c)" [attr.aria-label]="getHeaderAriaLabel(c)">
(onChange)="onHeaderCheckBoxChanged($event,c)" label=""></checkbox> {{column.displayName}}
</th> <checkbox *ngIf="isCheckBox(c)" [checked]="isHeaderChecked(c)"
</ng-container> [aria-label]="getCheckAllColumnAriaLabel(c)" (onChange)="onHeaderCheckBoxChanged($event,c)"
label=""></checkbox>
</th>
</ng-container>
</tr>
</thead> </thead>
<ng-container *ngIf="data.length > 0"> <tbody role="rowgroup">
<ng-container *ngFor="let row of data;let r = index;"> <ng-container *ngIf="data.length > 0">
<tr class="declarative-table-row" [class.selected]="isRowSelected(r)"> <ng-container *ngFor="let row of data;let r = index;">
<ng-container *ngFor="let cellData of row;let c = index;trackBy:trackByFnCols"> <tr class="declarative-table-row" [class.selected]="isRowSelected(r)" role="row">
<td class="declarative-table-cell" [style.width]="getColumnWidth(c)" <ng-container *ngFor="let cellData of row;let c = index;trackBy:trackByFnCols">
[attr.aria-label]="getAriaLabel(r, c)" <td class="declarative-table-cell" [style.width]="getColumnWidth(c)"
[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)"> [attr.aria-label]="getAriaLabel(r, c)"
<checkbox *ngIf="isCheckBox(c)" label="" (onChange)="onCheckBoxChanged($event,r,c)" [ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)"
[enabled]="isControlEnabled(c)" [checked]="isChecked(r,c)" role="gridcell">
[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)"> <checkbox *ngIf="isCheckBox(c)" label="" (onChange)="onCheckBoxChanged($event,r,c)"
</checkbox> [enabled]="isControlEnabled(c)" [checked]="isChecked(r,c)"
<select-box *ngIf="isSelectBox(c)" [options]="getOptions(c)" [ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)">
(onDidSelect)="onSelectBoxChanged($event,r,c)" </checkbox>
[selectedOption]="getSelectedOptionDisplayName(r,c)"> <select-box *ngIf="isSelectBox(c)" [options]="getOptions(c)"
</select-box> (onDidSelect)="onSelectBoxChanged($event,r,c)"
<editable-select-box *ngIf="isEditableSelectBox(c)" [options]="getOptions(c)" [selectedOption]="getSelectedOptionDisplayName(r,c)">
(onDidSelect)="onSelectBoxChanged($event,r,c)" </select-box>
[selectedOption]="getSelectedOptionDisplayName(r,c)"> <editable-select-box *ngIf="isEditableSelectBox(c)" [options]="getOptions(c)"
</editable-select-box> (onDidSelect)="onSelectBoxChanged($event,r,c)"
<input-box *ngIf="isInputBox(c)" [value]="cellData.value" [selectedOption]="getSelectedOptionDisplayName(r,c)">
(onDidChange)="onInputBoxChanged($event,r,c)"></input-box> </editable-select-box>
<span *ngIf="isLabel(c)" (click)="onCellClick(r)"> <input-box *ngIf="isInputBox(c)" [value]="cellData.value"
{{cellData.value}} (onDidChange)="onInputBoxChanged($event,r,c)"></input-box>
</span> <span *ngIf="isLabel(c)" (click)="onCellClick(r)">
<model-component-wrapper *ngIf="isComponent(c) && getItemDescriptor(cellData.value)" {{cellData.value}}
[descriptor]="getItemDescriptor(cellData.value)" [modelStore]="modelStore"> </span>
</model-component-wrapper> <model-component-wrapper *ngIf="isComponent(c) && getItemDescriptor(cellData.value)"
</td> [descriptor]="getItemDescriptor(cellData.value)" [modelStore]="modelStore">
</ng-container> </model-component-wrapper>
</tr> </td>
</ng-container>
</tr>
</ng-container>
</ng-container> </ng-container>
</ng-container> </tbody>
</table> </table>

9
src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
View File

@@ -220,6 +220,15 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
return ''; return '';
} }
public getCheckAllColumnAriaLabel(colIdx: number): string {
return localize('checkAllColumnLabel', "check all checkboxes in column: {0}", this.columns[colIdx].displayName);
}
public getHeaderAriaLabel(colIdx: number): string {
const column = this.columns[colIdx];
return (column.ariaLabel) ? column.ariaLabel : column.displayName;
}
public getItemDescriptor(componentId: string): IComponentDescriptor { public getItemDescriptor(componentId: string): IComponentDescriptor {
return this.modelStore.getComponentDescriptor(componentId); return this.modelStore.getComponentDescriptor(componentId);
} }