ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -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.handlePermissionStatusUpdated(this.hdfsModel.permissionStatus);
await modelView.initializeModel(this.rootLoadingComponent);
this.addUserOrGroupInput.focus();
});
this.dialog.content = [tab];
}
@@ -280,21 +281,21 @@ export class ManageAccessDialog {
rowContainer.addItem(nameCell);
// 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' });
accessReadComponents.checkbox.onChanged(() => {
entry.getPermission(AclEntryScope.access).read = accessReadComponents.checkbox.checked;
});
// 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' });
accessWriteComponents.checkbox.onChanged(() => {
entry.getPermission(AclEntryScope.access).write = accessWriteComponents.checkbox.checked;
});
// 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 : '' } });
accessExecuteComponents.checkbox.onChanged(() => {
entry.getPermission(AclEntryScope.access).execute = accessExecuteComponents.checkbox.checked;
@@ -311,14 +312,14 @@ export class ManageAccessDialog {
const defaultPermission = entry.getPermission(AclEntryScope.default);
const defaultReadComponents = createCheckbox(builder, defaultPermission && defaultPermission.read, !!defaultPermission, permissionsReadColumnWidth, permissionsRowHeight);
const defaultWriteComponents = createCheckbox(builder, defaultPermission && defaultPermission.write, !!defaultPermission, permissionsWriteColumnWidth, permissionsRowHeight);
const defaultExecuteComponents = createCheckbox(builder, defaultPermission && defaultPermission.execute, !!defaultPermission, permissionsExecuteColumnWidth, 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, `${loc.defaultHeader} ${loc.writeHeader}`);
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 };
// Default - Inherit
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(() => {
defaultReadComponents.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()
.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()
.withLayout({ width: containerWidth, height: containerHeight })
.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>();
public readonly onChange: Event<boolean> = this._onChange.event;
constructor(container: HTMLElement, private _opts: ICheckboxOptions) {
constructor(container: HTMLElement, opts: ICheckboxOptions) {
super();
this._el = document.createElement('input');
this._el.type = 'checkbox';
this._el.style.verticalAlign = 'middle';
if (_opts.ariaLabel) {
this._el.setAttribute('aria-label', _opts.ariaLabel);
if (opts.ariaLabel) {
this.ariaLabel = opts.ariaLabel;
}
this.onchange(this._el, e => {
@@ -55,12 +55,12 @@ export class Checkbox extends Widget {
this._label = document.createElement('span');
this._label.style.verticalAlign = 'middle';
this.label = _opts.label;
this.enabled = _opts.enabled || true;
this.checked = _opts.checked || false;
this.label = opts.label;
this.enabled = opts.enabled || true;
this.checked = opts.checked || false;
if (_opts.onChange) {
this.onChange(_opts.onChange);
if (opts.onChange) {
this.onChange(opts.onChange);
}
container.appendChild(this._el);
@@ -70,8 +70,8 @@ export class Checkbox extends Widget {
public set label(val: string) {
this._label.innerText = val;
// Default the aria label to the label if one wasn't specifically set by the user
if (!this._opts.ariaLabel) {
this._el.setAttribute('aria-label', val);
if (!this.ariaLabel) {
this.ariaLabel = val;
}
}
@@ -92,6 +92,14 @@ export class Checkbox extends Widget {
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 {
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) {
this._input.setHeight(this.convertSize(this.height));
}
if (this.ariaLabel) {
this._input.ariaLabel = this.ariaLabel;
}
}
// CSS-bound properties