Bug/Accessibility fix for 6796 (partial), 6800 and 6745 (#6882)

* fix for https://github.com/microsoft/azuredatastudio/issues/6796 (partial) and https://github.com/microsoft/azuredatastudio/issues/6800 and checkbox regression

* fix for https://github.com/microsoft/azuredatastudio/issues/6745
This commit is contained in:
Udeesha Gautam
2019-08-22 17:31:06 -07:00
committed by GitHub
parent faabcb43f9
commit 1372cbaee1
3 changed files with 17 additions and 15 deletions

View File

@@ -53,6 +53,7 @@ export class SelectOperationPage extends BasePage {
// default have the first radio button checked // default have the first radio button checked
this.deployRadioButton.checked = true; this.deployRadioButton.checked = true;
this.deployRadioButton.focused = true;
this.instance.setDoneButton(Operation.deploy); this.instance.setDoneButton(Operation.deploy);
return true; return true;
} }

View File

@@ -42,7 +42,7 @@ const defaultOptions: ICheckboxSelectColumnOptions = {
}; };
const checkboxTemplate = `<div style="display: flex; align-items: center; flex-direction: column"> const checkboxTemplate = `<div style="display: flex; align-items: center; flex-direction: column">
<input type="checkbox" {0}> <input type="checkbox" {0} aria-label={1}>
</div>`; </div>`;
export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Plugin<T> { export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Plugin<T> {
@@ -99,11 +99,11 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
if (!this._options.title) { if (!this._options.title) {
if (selectedRows.length && selectedRows.length === this._grid.getDataLength()) { if (selectedRows.length && selectedRows.length === this._grid.getDataLength()) {
this._grid.updateColumnHeader(this._options.columnId!, this._grid.updateColumnHeader(this._options.columnId!,
strings.format(checkboxTemplate, 'checked'), strings.format(checkboxTemplate, 'checked', this._options.title),
this._options.toolTip); this._options.toolTip);
} else { } else {
this._grid.updateColumnHeader(this._options.columnId!, this._grid.updateColumnHeader(this._options.columnId!,
strings.format(checkboxTemplate, ''), strings.format(checkboxTemplate, '',this._options.title),
this._options.toolTip); this._options.toolTip);
} }
} }
@@ -187,6 +187,9 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
this._grid.invalidateRow(row); this._grid.invalidateRow(row);
this._grid.render(); this._grid.render();
} }
//Ensure that the focus stays correct
this._grid.getActiveCellNode().focus();
} }
private handleHeaderClick(e: Event, args: Slick.OnHeaderClickEventArgs<T>): void { private handleHeaderClick(e: Event, args: Slick.OnHeaderClickEventArgs<T>): void {
@@ -207,12 +210,12 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
const rows = range(this._grid.getDataLength()); const rows = range(this._grid.getDataLength());
this._grid.setSelectedRows(rows); this._grid.setSelectedRows(rows);
this._grid.updateColumnHeader(this._options.columnId!, this._grid.updateColumnHeader(this._options.columnId!,
strings.format(checkboxTemplate, 'checked'), strings.format(checkboxTemplate, 'checked', this._options.title),
this._options.toolTip); this._options.toolTip);
} else { } else {
this._grid.setSelectedRows([]); this._grid.setSelectedRows([]);
this._grid.updateColumnHeader(this._options.columnId!, this._grid.updateColumnHeader(this._options.columnId!,
strings.format(checkboxTemplate, ''), this._options.toolTip); strings.format(checkboxTemplate, '', this._options.title), this._options.toolTip);
e.stopPropagation(); e.stopPropagation();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
} }
@@ -222,7 +225,7 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
public getColumnDefinition(): Slick.Column<T> { public getColumnDefinition(): Slick.Column<T> {
return { return {
id: this._options.columnId, id: this._options.columnId,
name: this._options.title || strings.format(checkboxTemplate, ''), name: this._options.title || strings.format(checkboxTemplate, '', ''),
toolTip: this._options.toolTip, toolTip: this._options.toolTip,
field: 'sel', field: 'sel',
width: this._options.width, width: this._options.width,
@@ -240,16 +243,16 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
} }
return this._selectedRowsLookup[row] return this._selectedRowsLookup[row]
? strings.format(checkboxTemplate, 'checked') ? strings.format(checkboxTemplate, 'checked', this._options.title)
: strings.format(checkboxTemplate, ''); : strings.format(checkboxTemplate, '', this._options.title);
} }
checkboxTemplateCustom(row: number): string { checkboxTemplateCustom(row: number): string {
// use state after toggles // use state after toggles
if (this._useState) { if (this._useState) {
return this._selectedCheckBoxLookup[row] return this._selectedCheckBoxLookup[row]
? strings.format(checkboxTemplate, 'checked') ? strings.format(checkboxTemplate, 'checked', this._options.title)
: strings.format(checkboxTemplate, ''); : strings.format(checkboxTemplate, '', this._options.title);
} }
// use data for first time rendering // use data for first time rendering
@@ -257,11 +260,11 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
let rowVal = (this._grid) ? this._grid.getDataItem(row) : null; let rowVal = (this._grid) ? this._grid.getDataItem(row) : null;
if (rowVal && this._options.title && rowVal[this._options.title] === true) { if (rowVal && this._options.title && rowVal[this._options.title] === true) {
this._selectedCheckBoxLookup[row] = true; this._selectedCheckBoxLookup[row] = true;
return strings.format(checkboxTemplate, 'checked'); return strings.format(checkboxTemplate, 'checked', this._options.title);
} }
else { else {
delete this._selectedCheckBoxLookup[row]; delete this._selectedCheckBoxLookup[row];
return strings.format(checkboxTemplate, ''); return strings.format(checkboxTemplate, '', this._options.title);
} }
} }

View File

@@ -229,9 +229,7 @@ export default class TableComponent extends ComponentBase implements IComponent,
this._table.setSelectedRows(this.selectedRows); this._table.setSelectedRows(this.selectedRows);
} }
for (const col of this._checkboxColumns) { Object.keys(this._checkboxColumns).forEach(col => this.registerCheckboxPlugin(this._checkboxColumns[col]));
this.registerCheckboxPlugin(col);
}
if (this.ariaRowCount === -1) { if (this.ariaRowCount === -1) {
this._table.removeAriaRowCount(); this._table.removeAriaRowCount();