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

Fix a couple a11y issues with manage access (#8386)

Browse Source 
* Fix a couple a11y issues with manage access

* Fix strict null check

* Fix another strict null check
This commit is contained in:
Charles Gagnon
2019-11-19 13:42:53 -08:00
committed by GitHub
parent 8ca0082ec4
commit 55059907a3
3 changed files with 37 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts
View File

@@ -213,6 +213,7 @@ export class ManageAccessDialog {
this.viewInitialized = true; this.viewInitialized = true;
this.handlePermissionStatusUpdated(this.hdfsModel.permissionStatus); this.handlePermissionStatusUpdated(this.hdfsModel.permissionStatus);
await modelView.initializeModel(this.rootLoadingComponent); await modelView.initializeModel(this.rootLoadingComponent);
this.addUserOrGroupInput.focus();
}); });
this.dialog.content = [tab]; this.dialog.content = [tab];
} }
@@ -280,21 +281,21 @@ export class ManageAccessDialog {
rowContainer.addItem(nameCell); rowContainer.addItem(nameCell);
// Access - Read // Access - Read
const accessReadComponents = createCheckbox(builder, entry.getPermission(AclEntryScope.access).read, true, permissionsReadColumnWidth, permissionsRowHeight); const accessReadComponents = createCheckbox(builder, entry.getPermission(AclEntryScope.access).read, true, permissionsReadColumnWidth, permissionsRowHeight, `${loc.accessHeader} ${loc.readHeader}`);
rowContainer.addItem(accessReadComponents.container, { flex: '0 0 auto' }); rowContainer.addItem(accessReadComponents.container, { flex: '0 0 auto' });
accessReadComponents.checkbox.onChanged(() => { accessReadComponents.checkbox.onChanged(() => {
entry.getPermission(AclEntryScope.access).read = accessReadComponents.checkbox.checked; entry.getPermission(AclEntryScope.access).read = accessReadComponents.checkbox.checked;
}); });
// Access - Write // Access - Write
const accessWriteComponents = createCheckbox(builder, entry.getPermission(AclEntryScope.access).write, true, permissionsWriteColumnWidth, permissionsRowHeight); const accessWriteComponents = createCheckbox(builder, entry.getPermission(AclEntryScope.access).write, true, permissionsWriteColumnWidth, permissionsRowHeight, `${loc.accessHeader} ${loc.writeHeader}`);
rowContainer.addItem(accessWriteComponents.container, { flex: '0 0 auto' }); rowContainer.addItem(accessWriteComponents.container, { flex: '0 0 auto' });
accessWriteComponents.checkbox.onChanged(() => { accessWriteComponents.checkbox.onChanged(() => {
entry.getPermission(AclEntryScope.access).write = accessWriteComponents.checkbox.checked; entry.getPermission(AclEntryScope.access).write = accessWriteComponents.checkbox.checked;
}); });
// Access - Execute // Access - Execute
const accessExecuteComponents = createCheckbox(builder, entry.getPermission(AclEntryScope.access).execute, true, permissionsExecuteColumnWidth, permissionsRowHeight); const accessExecuteComponents = createCheckbox(builder, entry.getPermission(AclEntryScope.access).execute, true, permissionsExecuteColumnWidth, permissionsRowHeight, `${loc.accessHeader} ${loc.executeHeader}`);
rowContainer.addItem(accessExecuteComponents.container, { flex: '0 0 auto', CSSStyles: { 'border-right': this.hdfsModel.fileStatus.type === HdfsFileType.Directory ? cssStyles.tableBorderCss : '' } }); rowContainer.addItem(accessExecuteComponents.container, { flex: '0 0 auto', CSSStyles: { 'border-right': this.hdfsModel.fileStatus.type === HdfsFileType.Directory ? cssStyles.tableBorderCss : '' } });
accessExecuteComponents.checkbox.onChanged(() => { accessExecuteComponents.checkbox.onChanged(() => {
entry.getPermission(AclEntryScope.access).execute = accessExecuteComponents.checkbox.checked; entry.getPermission(AclEntryScope.access).execute = accessExecuteComponents.checkbox.checked;
@@ -311,14 +312,14 @@ export class ManageAccessDialog {
const defaultPermission = entry.getPermission(AclEntryScope.default); const defaultPermission = entry.getPermission(AclEntryScope.default);
const defaultReadComponents = createCheckbox(builder, defaultPermission && defaultPermission.read, !!defaultPermission, permissionsReadColumnWidth, permissionsRowHeight); const defaultReadComponents = createCheckbox(builder, defaultPermission && defaultPermission.read, !!defaultPermission, permissionsReadColumnWidth, permissionsRowHeight, `${loc.defaultHeader} ${loc.readHeader}`);
const defaultWriteComponents = createCheckbox(builder, defaultPermission && defaultPermission.write, !!defaultPermission, permissionsWriteColumnWidth, permissionsRowHeight); const defaultWriteComponents = createCheckbox(builder, defaultPermission && defaultPermission.write, !!defaultPermission, permissionsWriteColumnWidth, permissionsRowHeight, `${loc.defaultHeader} ${loc.writeHeader}`);
const defaultExecuteComponents = createCheckbox(builder, defaultPermission && defaultPermission.execute, !!defaultPermission, permissionsExecuteColumnWidth, permissionsRowHeight); const defaultExecuteComponents = createCheckbox(builder, defaultPermission && defaultPermission.execute, !!defaultPermission, permissionsExecuteColumnWidth, permissionsRowHeight, `${loc.defaultHeader} ${loc.executeHeader}`);
permissionsCheckboxesMapping.default = { read: defaultReadComponents.checkbox, write: defaultWriteComponents.checkbox, execute: defaultExecuteComponents.checkbox }; permissionsCheckboxesMapping.default = { read: defaultReadComponents.checkbox, write: defaultWriteComponents.checkbox, execute: defaultExecuteComponents.checkbox };
// Default - Inherit // Default - Inherit
if (includeInherit) { if (includeInherit) {
const defaultInheritComponents = createCheckbox(builder, !defaultPermission, !this.inheritDefaultsCheckbox.checked, permissionsInheritColumnWidth, permissionsRowHeight); const defaultInheritComponents = createCheckbox(builder, !defaultPermission, !this.inheritDefaultsCheckbox.checked, permissionsInheritColumnWidth, permissionsRowHeight, loc.inheritDefaultsLabel);
defaultInheritComponents.checkbox.onChanged(() => { defaultInheritComponents.checkbox.onChanged(() => {
defaultReadComponents.checkbox.enabled = !defaultInheritComponents.checkbox.checked; defaultReadComponents.checkbox.enabled = !defaultInheritComponents.checkbox.checked;
defaultWriteComponents.checkbox.enabled = !defaultInheritComponents.checkbox.checked; defaultWriteComponents.checkbox.enabled = !defaultInheritComponents.checkbox.checked;
@@ -538,9 +539,15 @@ export class ManageAccessDialog {
} }
} }
function createCheckbox(builder: azdata.ModelBuilder, checked: boolean, enabled: boolean, containerWidth: number, containerHeight: number): { container: azdata.FlexContainer, checkbox: azdata.CheckBoxComponent } { function createCheckbox(builder: azdata.ModelBuilder, checked: boolean, enabled: boolean, containerWidth: number, containerHeight: number, ariaLabel: string): { container: azdata.FlexContainer, checkbox: azdata.CheckBoxComponent } {
const checkbox = builder.checkBox() const checkbox = builder.checkBox()
.withProperties({ checked: checked, enabled: enabled, height: checkboxSize, width: checkboxSize }).component(); .withProperties<azdata.CheckBoxProperties>({
checked: checked,
enabled: enabled,
height: checkboxSize,
width: checkboxSize,
ariaLabel: ariaLabel
}).component();
const container = builder.flexContainer() const container = builder.flexContainer()
.withLayout({ width: containerWidth, height: containerHeight }) .withLayout({ width: containerWidth, height: containerHeight })
.component(); .component();

28
src/sql/base/browser/ui/checkbox/checkbox.ts
View File

@@ -30,15 +30,15 @@ export class Checkbox extends Widget {
private _onChange = new Emitter<boolean>(); private _onChange = new Emitter<boolean>();
public readonly onChange: Event<boolean> = this._onChange.event; public readonly onChange: Event<boolean> = this._onChange.event;
constructor(container: HTMLElement, private _opts: ICheckboxOptions) { constructor(container: HTMLElement, opts: ICheckboxOptions) {
super(); super();
this._el = document.createElement('input'); this._el = document.createElement('input');
this._el.type = 'checkbox'; this._el.type = 'checkbox';
this._el.style.verticalAlign = 'middle'; this._el.style.verticalAlign = 'middle';
if (_opts.ariaLabel) { if (opts.ariaLabel) {
this._el.setAttribute('aria-label', _opts.ariaLabel); this.ariaLabel = opts.ariaLabel;
} }
this.onchange(this._el, e => { this.onchange(this._el, e => {
@@ -55,12 +55,12 @@ export class Checkbox extends Widget {
this._label = document.createElement('span'); this._label = document.createElement('span');
this._label.style.verticalAlign = 'middle'; this._label.style.verticalAlign = 'middle';
this.label = _opts.label; this.label = opts.label;
this.enabled = _opts.enabled || true; this.enabled = opts.enabled || true;
this.checked = _opts.checked || false; this.checked = opts.checked || false;
if (_opts.onChange) { if (opts.onChange) {
this.onChange(_opts.onChange); this.onChange(opts.onChange);
} }
container.appendChild(this._el); container.appendChild(this._el);
@@ -70,8 +70,8 @@ export class Checkbox extends Widget {
public set label(val: string) { public set label(val: string) {
this._label.innerText = val; this._label.innerText = val;
// Default the aria label to the label if one wasn't specifically set by the user // Default the aria label to the label if one wasn't specifically set by the user
if (!this._opts.ariaLabel) { if (!this.ariaLabel) {
this._el.setAttribute('aria-label', val); this.ariaLabel = val;
} }
} }
@@ -92,6 +92,14 @@ export class Checkbox extends Widget {
return this._el.checked; return this._el.checked;
} }
public set ariaLabel(val: string | null) {
this._el.setAttribute('aria-label', val || '');
}
public get ariaLabel(): string | null {
return this._el.getAttribute('aria-label');
}
public focus(): void { public focus(): void {
this._el.focus(); this._el.focus();
} }

3
src/sql/workbench/browser/modelComponents/checkbox.component.ts
View File

@@ -86,6 +86,9 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
if (this.height) { if (this.height) {
this._input.setHeight(this.convertSize(this.height)); this._input.setHeight(this.convertSize(this.height));
} }
if (this.ariaLabel) {
this._input.ariaLabel = this.ariaLabel;
}
} }
// CSS-bound properties // CSS-bound properties