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

* 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

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();
}