ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-21 09:35:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Bug/accessibility 5 (#7008)

Browse Source 
* fixing 6946 and 6796(second part)

* fix for https://github.com/microsoft/azuredatastudio/issues/6726

* comments cleanup

* taking PR comments

* adding strong border for HC focus

* convert to string template
This commit is contained in:
Udeesha Gautam
2019-09-09 15:37:12 -07:00
committed by GitHub
parent 66cdbbb335
commit 5ae8017233
6 changed files with 53 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/sql/base/browser/ui/table/formatters.ts
View File

@@ -4,6 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { escape } from 'sql/base/common/strings';
import { localize } from 'vs/nls';
export class DBCellValue {
displayValue: string;
@@ -77,6 +78,19 @@ export function slickGridDataItemColumnValueExtractor(value: any, columnDef: any
};
}
/**
* Alternate function to provide slick grid cell with ariaLabel and plain text
* In this case, for no display value ariaLabel will be set to specific string "no data available" for accessibily support for screen readers
* Set 'no data' lable only if cell is present and has no value (so that checkbox and other custom plugins do not get 'no data' label)
*/
export function slickGridDataItemColumnValueWithNoData(value: any, columnDef: any): { text: string; ariaLabel: string; } {
let displayValue = value[columnDef.field];
return {
text: displayValue,
ariaLabel: displayValue ? escape(displayValue) : ((displayValue !== undefined) ? localize("tableCell.NoDataAvailable", "no data available") : displayValue)
};
}
/** The following code is a rewrite over the both formatter function using dom builder
* rather than string manipulation, which is a safer and easier method of achieving the same goal.
* However, when electron is in "Run as node" mode, dom creation acts differently than normal and therefore

25
src/sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin.ts
View File

@@ -99,11 +99,11 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
if (!this._options.title) {
if (selectedRows.length && selectedRows.length === this._grid.getDataLength()) {
this._grid.updateColumnHeader(this._options.columnId!,
strings.format(checkboxTemplate, 'checked', this._options.title),
strings.format(checkboxTemplate, 'checked', this.getAriaLabel(true)),
this._options.toolTip);
} else {
this._grid.updateColumnHeader(this._options.columnId!,
strings.format(checkboxTemplate, '',this._options.title),
strings.format(checkboxTemplate, '', this.getAriaLabel(false)),
this._options.toolTip);
}
}
@@ -210,12 +210,12 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
const rows = range(this._grid.getDataLength());
this._grid.setSelectedRows(rows);
this._grid.updateColumnHeader(this._options.columnId!,
strings.format(checkboxTemplate, 'checked', this._options.title),
strings.format(checkboxTemplate, 'checked', this.getAriaLabel(true)),
this._options.toolTip);
} else {
this._grid.setSelectedRows([]);
this._grid.updateColumnHeader(this._options.columnId!,
strings.format(checkboxTemplate, '', this._options.title), this._options.toolTip);
strings.format(checkboxTemplate, '', this.getAriaLabel(false)), this._options.toolTip);
e.stopPropagation();
e.stopImmediatePropagation();
}
@@ -243,16 +243,16 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
}
return this._selectedRowsLookup[row]
? strings.format(checkboxTemplate, 'checked', this._options.title)
: strings.format(checkboxTemplate, '', this._options.title);
? strings.format(checkboxTemplate, 'checked', this.getAriaLabel(true))
: strings.format(checkboxTemplate, '', this.getAriaLabel(false));
}
checkboxTemplateCustom(row: number): string {
// use state after toggles
if (this._useState) {
return this._selectedCheckBoxLookup[row]
? strings.format(checkboxTemplate, 'checked', this._options.title)
: strings.format(checkboxTemplate, '', this._options.title);
? strings.format(checkboxTemplate, 'checked', this.getAriaLabel(true))
: strings.format(checkboxTemplate, '', this.getAriaLabel(false));
}
// use data for first time rendering
@@ -260,15 +260,20 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
let rowVal = (this._grid) ? this._grid.getDataItem(row) : null;
if (rowVal && this._options.title && rowVal[this._options.title] === true) {
this._selectedCheckBoxLookup[row] = true;
return strings.format(checkboxTemplate, 'checked', this._options.title);
return strings.format(checkboxTemplate, 'checked', this.getAriaLabel(true));
}
else {
delete this._selectedCheckBoxLookup[row];
return strings.format(checkboxTemplate, '', this._options.title);
return strings.format(checkboxTemplate, '', this.getAriaLabel(false));
}
}
private isCustomActionRequested(): boolean {
return (this._options.actionOnCheck === ActionOnCheck.customAction);
}
private getAriaLabel(checked: boolean): string {
return checked ? `"${this._options.title} ${nls.localize("tableCheckboxCell.Checked", "checkbox checked")}"` :
`"${this._options.title} ${nls.localize("tableCheckboxCell.unChecked", "checkbox unchecked")}"`;
}
}

1
src/sql/base/browser/ui/table/table.ts
View File

@@ -322,6 +322,7 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
if (styles.listFocusOutline) {
content.push(`.monaco-table.${this.idPrefix}.focused .slick-row .selected { outline: 1px solid ${styles.listFocusOutline}; outline-offset: -1px; }`);
content.push(`.monaco-table.${this.idPrefix}.focused .slick-row .selected.active { outline: 2px solid ${styles.listFocusOutline}; outline-offset: -1px; }`);
}
if (styles.listInactiveFocusOutline) {