ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

add aria-label for checkbox selection column cells (#23063)

Browse Source 
* add aria-label for checkbox selection column cell

* revert text change

* revert key change
This commit is contained in:
Alan Ren
2023-05-09 15:56:52 -07:00
committed by GitHub
parent 7b8ba7630e
commit a25674be8e
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@
import { ICheckboxStyles } from 'sql/base/browser/ui/checkbox/checkbox'; import { ICheckboxStyles } from 'sql/base/browser/ui/checkbox/checkbox';
import { mixin } from 'sql/base/common/objects'; import { mixin } from 'sql/base/common/objects';
import { escape } from 'sql/base/common/strings';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { Emitter, Event as vsEvent } from 'vs/base/common/event'; import { Emitter, Event as vsEvent } from 'vs/base/common/event';
import { KeyCode } from 'vs/base/common/keyCodes'; import { KeyCode } from 'vs/base/common/keyCodes';
@@ -92,7 +93,8 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
const state = this.getCheckboxPropertyValue(row); const state = this.getCheckboxPropertyValue(row);
const checked = state.checked ? 'checked' : ''; const checked = state.checked ? 'checked' : '';
const enable = state.enabled ? '' : 'disabled'; const enable = state.enabled ? '' : 'disabled';
return `<input type="checkbox" style="pointer-events: none;" tabIndex="-1" ${checked} ${enable}/>`; const escapedTitle = escape(columnDef.name ?? '');
return `<input type="checkbox" style="pointer-events: none;" aria-label="${escapedTitle}" tabIndex="-1" ${checked} ${enable}/>`;
} }
@@ -101,7 +103,8 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
this._handler this._handler
.subscribe(this._grid.onClick, (e: Event, args: Slick.OnClickEventArgs<T>) => this.handleClick(e, args)) .subscribe(this._grid.onClick, (e: Event, args: Slick.OnClickEventArgs<T>) => this.handleClick(e, args))
.subscribe(this._grid.onKeyDown, (e: DOMEvent, args: Slick.OnKeyDownEventArgs<T>) => this.handleKeyDown(e as KeyboardEvent, args)) .subscribe(this._grid.onKeyDown, (e: DOMEvent, args: Slick.OnKeyDownEventArgs<T>) => this.handleKeyDown(e as KeyboardEvent, args))
.subscribe(this._grid.onHeaderCellRendered, (e: Event, args: Slick.OnHeaderCellRenderedEventArgs<T>) => this.handleHeaderCellRendered(e, args)); .subscribe(this._grid.onHeaderCellRendered, (e: Event, args: Slick.OnHeaderCellRenderedEventArgs<T>) => this.handleHeaderCellRendered(e, args))
.subscribe(grid.onActiveCellChanged, (e: DOMEvent, args: Slick.OnActiveCellChangedEventArgs<T>) => { this.handleActiveCellChanged(args); });
if (this.isCheckAllHeaderCheckboxShown()) { if (this.isCheckAllHeaderCheckboxShown()) {
this._handler.subscribe(this._grid.onHeaderClick, (e: Event, args: Slick.OnHeaderClickEventArgs<T>) => this.handleHeaderClick(e, args)); this._handler.subscribe(this._grid.onHeaderClick, (e: Event, args: Slick.OnHeaderClickEventArgs<T>) => this.handleHeaderClick(e, args));
} }
@@ -130,6 +133,15 @@ export class CheckboxSelectColumn<T extends Slick.SlickData> implements Slick.Pl
} }
} }
private handleActiveCellChanged(args: Slick.OnActiveCellChangedEventArgs<T>): void {
if (args.cell === this.index) {
const checkbox = this._grid.getActiveCellNode() as HTMLInputElement;
if (checkbox) {
checkbox.focus();
}
}
}
private toggleCellCheckbox(row: number): void { private toggleCellCheckbox(row: number): void {
const currentValue = this.getCheckboxPropertyValue(row); const currentValue = this.getCheckboxPropertyValue(row);
if (currentValue.enabled) { if (currentValue.enabled) {