diff --git a/extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts b/extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts index af4946b073..6a09a403ae 100644 --- a/extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts +++ b/extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts @@ -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({ + checked: checked, + enabled: enabled, + height: checkboxSize, + width: checkboxSize, + ariaLabel: ariaLabel + }).component(); const container = builder.flexContainer() .withLayout({ width: containerWidth, height: containerHeight }) .component(); diff --git a/src/sql/base/browser/ui/checkbox/checkbox.ts b/src/sql/base/browser/ui/checkbox/checkbox.ts index be5c5c67cd..14aa6b9537 100644 --- a/src/sql/base/browser/ui/checkbox/checkbox.ts +++ b/src/sql/base/browser/ui/checkbox/checkbox.ts @@ -30,15 +30,15 @@ export class Checkbox extends Widget { private _onChange = new Emitter(); public readonly onChange: Event = 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(); } diff --git a/src/sql/workbench/browser/modelComponents/checkbox.component.ts b/src/sql/workbench/browser/modelComponents/checkbox.component.ts index 51c7337f98..908bae4c2e 100644 --- a/src/sql/workbench/browser/modelComponents/checkbox.component.ts +++ b/src/sql/workbench/browser/modelComponents/checkbox.component.ts @@ -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