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

fix accessibility issue caused by not using table (#9645)

Browse Source 
* fix accessibility issue caused by not using table

* remove fixed background color
This commit is contained in:
Alan Ren
2020-03-17 12:01:55 -07:00
committed by GitHub
parent 6c8a7dc97f
commit 19dec78349
6 changed files with 116 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,14 +31,14 @@ export enum DeclarativeDataType {
<table role=grid #container *ngIf="columns" class="declarative-table" [style.height]="getHeight()" [attr.aria-label]="ariaLabel">
<thead>
<ng-container *ngFor="let column of columns;">
<th class="declarative-table-header" tabindex="-1" aria-sort="none" [style.width]="getColumnWidth(column)" [attr.aria-label]="column.ariaLabel" [ngStyle]="column.headerCssStyles">{{column.displayName}}</th>
<th class="declarative-table-header" aria-sort="none" [style.width]="getColumnWidth(column)" [attr.aria-label]="column.ariaLabel" [ngStyle]="column.headerCssStyles">{{column.displayName}}</th>
</ng-container>
</thead>
<ng-container *ngIf="data">
<ng-container *ngFor="let row of data;let r = index">
<tr class="declarative-table-row">
<ng-container *ngFor="let cellData of row;let c = index">
<td class="declarative-table-cell" tabindex="-1" [style.width]="getColumnWidth(c)" [attr.aria-label]="getAriaLabel(r, c)" [ngStyle]="columns[c].rowCssStyles">
<td class="declarative-table-cell" [style.width]="getColumnWidth(c)" [attr.aria-label]="getAriaLabel(r, c)" [ngStyle]="columns[c].rowCssStyles">
<checkbox *ngIf="isCheckBox(c)" label="" (onChange)="onCheckBoxChanged($event,r,c)" [enabled]="isControlEnabled(c)" [checked]="isChecked(r,c)"></checkbox>
<select-box *ngIf="isSelectBox(c)" [options]="getOptions(c)" (onDidSelect)="onSelectBoxChanged($event,r,c)" [selectedOption]="getSelectedOptionDisplayName(r,c)"></select-box>
<editable-select-box *ngIf="isEditableSelectBox(c)" [options]="getOptions(c)" (onDidSelect)="onSelectBoxChanged($event,r,c)" [selectedOption]="getSelectedOptionDisplayName(r,c)"></editable-select-box>

29
src/sql/workbench/browser/modelComponents/media/declarativeTable.css
View File

@@ -11,36 +11,11 @@
.declarative-table-header {
padding: 5px;
border-left: 1px solid gray;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
background-color: #F5F5F5;
border: 1px solid;
vertical-align: top;
}
.vs-dark .declarative-table-header
.hc-black .declarative-table-header {
padding: 5px;
border-left: 1px solid gray;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
background-color: #333334;
}
.declarative-table-cell {
padding: 5px;
border-left: 1px solid gray;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
.declarative-table [role="gridcell"]:focus,
.declarative-table [role="gridcell"] *:focus,
.declarative-table [role="grid"] [tabindex="0"]:focus {
outline: #005a9c;
outline-style: dotted;
outline-width: 3px;
border-left: 1px solid;
}