deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-09 17:16:36 +02:00
Code Issues Projects Releases Wiki Activity

Handle enabling/disabling

Browse source
This commit is contained in:
Josh Johnson 2017-08-17 13:50:14 +01:00
parent c7fae9b3ed b8917d84ba
commit 746c910452
3 changed files with 50 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
assets/scripts/src/choices.js
View file

@ -768,6 +768,10 @@ class Choices {
this.containerOuter.close();
this.dropdown.hide();
// IE11 ignores aria-label and blocks virtual keyboard
// if aria-activedescendant is set without a dropdown
this.input.removeAttribute('aria-activedescendant');
// Optionally blur the input if we have a search input
if (blurInput && this.canSearch && document.activeElement === this.input) {
this.input.blur();
@ -1025,19 +1029,13 @@ class Choices {
}
this.passedElement.disabled = false;
const isDisabled = this.containerOuter.element.classList.contains(
this.config.classNames.disabledState,
);
const isDisabled = this.containerOuter.isDisabled;
if (isDisabled) {
this._addEventListeners();
this.passedElement.removeAttribute('disabled');
this.input.removeAttribute('disabled');
this.containerOuter.element.classList.remove(this.config.classNames.disabledState);
this.containerOuter.element.removeAttribute('aria-disabled');
if (this.isSelectOneElement) {
this.containerOuter.element.setAttribute('tabindex', '0');
}
this.containerOuter.enable();
}
return this;
@ -1054,19 +1052,13 @@ class Choices {
}
this.passedElement.disabled = true;
const isEnabled = !this.containerOuter.element.classList.contains(
this.config.classNames.disabledState,
);
const isEnabled = !this.containerOuter.isDisabled;
if (isEnabled) {
this._removeEventListeners();
this.passedElement.setAttribute('disabled', '');
this.input.setAttribute('disabled', '');
this.containerOuter.element.classList.add(this.config.classNames.disabledState);
this.containerOuter.element.setAttribute('aria-disabled', 'true');
if (this.isSelectOneElement) {
this.containerOuter.element.setAttribute('tabindex', '-1');
}
this.containerOuter.disable();
}
return this;
@ -1912,7 +1904,7 @@ class Choices {
}
// Remove focus state
this.containerOuter.blur()
this.containerOuter.blur();
// Close all other dropdowns
if (hasActiveDropdown) {
@ -2132,7 +2124,10 @@ class Choices {
let passedEl = el;
if (choices && choices.length) {
const highlightedChoices = Array.from(this.dropdown.element.querySelectorAll(`.${this.config.classNames.highlightedState}`));
const highlightedChoices = Array.from(
this.dropdown.element.querySelectorAll(`.${this.config.classNames.highlightedState}`),
);
const hasActiveDropdown = this.dropdown.isActive;
// Remove any highlighted choices
highlightedChoices.forEach((choice) => {
@ -2160,7 +2155,13 @@ class Choices {
// Highlight given option, and set accessiblity attributes
passedEl.classList.add(this.config.classNames.highlightedState);
passedEl.setAttribute('aria-selected', 'true');
this.containerOuter.element.setAttribute('aria-activedescendant', passedEl.id);
if (hasActiveDropdown) {
// IE11 ignores aria-label and blocks virtual keyboard
// if aria-activedescendant is set without a dropdown
this.input.setAttribute('aria-activedescendant', passedEl.id);
this.containerOuter.element.setAttribute('aria-activedescendant', passedEl.id);
}
}
}

20
assets/scripts/src/components/container.js
View file

@ -10,6 +10,7 @@ export default class Container {
this.isOpen = false;
this.isFlipped = false;
this.isFocussed = false;
this.isDisabled = false;
}
shouldFlip(dropdownPos) {
@ -53,6 +54,7 @@ export default class Container {
close() {
this.element.classList.remove(this.classNames.openState);
this.element.setAttribute('aria-expanded', 'false');
this.element.removeAttribute('aria-activedescendant');
this.isOpen = false;
// A dropdown flips if it does not have space within the page
@ -71,4 +73,22 @@ export default class Container {
this.element.classList.remove(this.classNames.focusState);
this.isFocussed = false;
}
enable() {
this.element.classList.remove(this.config.classNames.disabledState);
this.element.removeAttribute('aria-disabled');
if (this.instance.isSelectOneElement) {
this.element.setAttribute('tabindex', '0');
}
this.isDisabled = false;
}
disable() {
this.element.classList.add(this.config.classNames.disabledState);
this.element.setAttribute('aria-disabled', 'true');
if (this.instance.isSelectOneElement) {
this.element.setAttribute('tabindex', '-1');
}
this.isDisabled = true;
}
}

10
assets/scripts/src/components/input.js Normal file
View file

@ -0,0 +1,10 @@
/**
* Dropdown
*/
export default class Input {
constructor(instance, element, classNames) {
this.instance = instance;
this.element = element;
this.classNames = classNames;
}
}