slim-select 2.3.3 → 2.4.1

package/dist/slimselect.global.js

@@ -60,8 +60,7 @@ var SlimSelect = (function () {
             this.class = [];
             this.isMultiple = false;
             this.isOpen = false;
-            this.isWindowFocused = true;
-            this.triggerFocus = true;
+            this.isFullOpen = false;
             this.intervalMove = null;
             if (!settings) {
                 settings = {};
@@ -348,6 +347,7 @@ var SlimSelect = (function () {
             this.main = this.mainDiv();
             this.content = this.contentDiv();
             this.updateClassStyles();
+            this.updateAriaAttributes();
             this.settings.contentLocation.appendChild(this.content.main);
         }
         enable() {
@@ -361,6 +361,7 @@ var SlimSelect = (function () {
         open() {
             this.main.arrow.path.setAttribute('d', this.classes.arrowOpen);
             this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
+            this.main.main.setAttribute('aria-expanded', 'true');
             this.moveContent();
             const selectedOptions = this.store.getSelectedOptions();
             if (selectedOptions.length) {
@@ -374,6 +375,7 @@ var SlimSelect = (function () {
         close() {
             this.main.main.classList.remove(this.classes.openAbove);
             this.main.main.classList.remove(this.classes.openBelow);
+            this.main.main.setAttribute('aria-expanded', 'false');
             this.content.main.classList.remove(this.classes.openAbove);
             this.content.main.classList.remove(this.classes.openBelow);
             this.main.arrow.path.setAttribute('d', this.classes.arrowClose);
@@ -400,15 +402,18 @@ var SlimSelect = (function () {
                 this.content.main.classList.add('ss-' + this.settings.contentPosition);
             }
         }
+        updateAriaAttributes() {
+            this.main.main.role = 'combobox';
+            this.main.main.setAttribute('aria-haspopup', 'listbox');
+            this.main.main.setAttribute('aria-controls', this.content.main.id);
+            this.main.main.setAttribute('aria-expanded', 'false');
+            this.content.main.setAttribute('role', 'listbox');
+        }
         mainDiv() {
             const main = document.createElement('div');
             main.dataset.id = this.settings.id;
+            main.id = this.settings.id;
             main.tabIndex = 0;
-            main.onfocus = () => {
-                if (this.settings.triggerFocus && this.settings.isWindowFocused) {
-                    this.callbacks.open();
-                }
-            };
             main.onkeydown = (e) => {
                 switch (e.key) {
                     case 'ArrowUp':
@@ -420,6 +425,8 @@ var SlimSelect = (function () {
                         this.callbacks.close();
                         return true;
                     case 'Enter':
+                    case ' ':
+                        this.callbacks.open();
                         const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
                         if (highlighted) {
                             highlighted.click();
@@ -496,12 +503,10 @@ var SlimSelect = (function () {
                 },
             };
         }
-        mainFocus(trigger) {
-            if (!trigger) {
-                this.settings.triggerFocus = false;
+        mainFocus(eventType) {
+            if (eventType !== 'click') {
+                this.main.main.focus({ preventScroll: true });
             }
-            this.main.main.focus({ preventScroll: true });
-            this.settings.triggerFocus = true;
         }
         placeholder() {
             const placeholderOption = this.store.filter((o) => o.placeholder, false);
@@ -677,6 +682,7 @@ var SlimSelect = (function () {
         contentDiv() {
             const main = document.createElement('div');
             main.dataset.id = this.settings.id;
+            main.id = this.settings.id;
             const search = this.searchDiv();
             main.appendChild(search.main);
             const list = this.listDiv();
@@ -734,7 +740,6 @@ var SlimSelect = (function () {
                 switch (e.key) {
                     case 'ArrowUp':
                     case 'ArrowDown':
-                        this.callbacks.open();
                         e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
                         return false;
                     case 'Tab':
@@ -744,6 +749,7 @@ var SlimSelect = (function () {
                         this.callbacks.close();
                         return false;
                     case 'Enter':
+                    case ' ':
                         if (this.callbacks.addable && e.ctrlKey) {
                             addable.click();
                         }
@@ -756,12 +762,6 @@ var SlimSelect = (function () {
                         return false;
                 }
             };
-            input.onfocus = () => {
-                if (this.settings.isOpen) {
-                    return;
-                }
-                this.callbacks.open();
-            };
             main.appendChild(input);
             if (this.callbacks.addable) {
                 addable.classList.add(this.classes.addable);
@@ -834,12 +834,8 @@ var SlimSelect = (function () {
             }
             return searchReturn;
         }
-        searchFocus(trigger) {
-            if (!trigger) {
-                this.settings.triggerFocus = false;
-            }
+        searchFocus() {
             this.content.search.input.focus();
-            this.settings.triggerFocus = true;
         }
         getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
             let query = '.' + this.classes.option;
@@ -895,7 +891,6 @@ var SlimSelect = (function () {
         listDiv() {
             const options = document.createElement('div');
             options.classList.add(this.classes.list);
-            options.setAttribute('role', 'listbox');
             return options;
         }
         renderError(error) {
@@ -1040,6 +1035,7 @@ var SlimSelect = (function () {
             }
             const optionEl = document.createElement('div');
             optionEl.dataset.id = option.id;
+            optionEl.id = option.id;
             optionEl.classList.add(this.classes.option);
             optionEl.setAttribute('role', 'option');
             if (option.class) {
@@ -1073,9 +1069,12 @@ var SlimSelect = (function () {
             }
             if (option.selected) {
                 optionEl.classList.add(this.classes.selected);
+                optionEl.setAttribute('aria-selected', 'true');
+                this.main.main.setAttribute('aria-activedescendant', optionEl.id);
             }
             else {
                 optionEl.classList.remove(this.classes.selected);
+                optionEl.setAttribute('aria-selected', 'false');
             }
             optionEl.addEventListener('click', (e) => {
                 e.preventDefault();
@@ -1493,13 +1492,13 @@ var SlimSelect = (function () {
                 afterClose: undefined,
             };
             this.windowResize = debounce(() => {
-                if (!this.settings.isOpen) {
+                if (!this.settings.isOpen && !this.settings.isFullOpen) {
                     return;
                 }
                 this.render.moveContent();
             });
             this.windowScroll = debounce(() => {
-                if (!this.settings.isOpen) {
+                if (!this.settings.isOpen && !this.settings.isFullOpen) {
                     return;
                 }
                 this.render.moveContent();
@@ -1509,19 +1508,13 @@ var SlimSelect = (function () {
                     return;
                 }
                 if (e.target && !hasClassInTree(e.target, this.settings.id)) {
-                    this.close();
+                    this.close(e.type);
                 }
             };
             this.windowVisibilityChange = () => {
                 if (document.hidden) {
-                    this.settings.isWindowFocused = false;
                     this.close();
                 }
-                else {
-                    setTimeout(() => {
-                        this.settings.isWindowFocused = true;
-                    }, 20);
-                }
             };
             this.selectEl = (typeof config.select === 'string' ? document.querySelector(config.select) : config.select);
             if (!this.selectEl) {
@@ -1594,6 +1587,14 @@ var SlimSelect = (function () {
             this.render = new Render(this.settings, this.store, callbacks);
             this.render.renderValues();
             this.render.renderOptions(this.store.getData());
+            const selectAriaLabel = this.selectEl.getAttribute('aria-label');
+            const selectAriaLabelledBy = this.selectEl.getAttribute('aria-labelledby');
+            if (selectAriaLabel) {
+                this.render.main.main.setAttribute('aria-label', selectAriaLabel);
+            }
+            else if (selectAriaLabelledBy) {
+                this.render.main.main.setAttribute('aria-labelledby', selectAriaLabelledBy);
+            }
             if (this.selectEl.parentNode) {
                 this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
             }
@@ -1683,13 +1684,16 @@ var SlimSelect = (function () {
             }
             this.render.open();
             if (this.settings.showSearch) {
-                this.render.searchFocus(false);
+                this.render.searchFocus();
             }
+            this.settings.isOpen = true;
             setTimeout(() => {
                 if (this.events.afterOpen) {
                     this.events.afterOpen();
                 }
-                this.settings.isOpen = true;
+                if (this.settings.isOpen) {
+                    this.settings.isFullOpen = true;
+                }
             }, this.settings.timeoutDelay);
             if (this.settings.contentPosition === 'absolute') {
                 if (this.settings.intervalMove) {
@@ -1698,7 +1702,7 @@ var SlimSelect = (function () {
                 this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500);
             }
         }
-        close() {
+        close(eventType = null) {
             if (!this.settings.isOpen || this.settings.alwaysOpen) {
                 return;
             }
@@ -1709,12 +1713,13 @@ var SlimSelect = (function () {
             if (this.render.content.search.input.value !== '') {
                 this.search('');
             }
-            this.render.mainFocus(false);
+            this.render.mainFocus(eventType);
+            this.settings.isOpen = false;
+            this.settings.isFullOpen = false;
             setTimeout(() => {
                 if (this.events.afterClose) {
                     this.events.afterClose();
                 }
-                this.settings.isOpen = false;
             }, this.settings.timeoutDelay);
             if (this.settings.intervalMove) {
                 clearInterval(this.settings.intervalMove);

package/dist/slimselect.js

@@ -63,8 +63,7 @@
             this.class = [];
             this.isMultiple = false;
             this.isOpen = false;
-            this.isWindowFocused = true;
-            this.triggerFocus = true;
+            this.isFullOpen = false;
             this.intervalMove = null;
             if (!settings) {
                 settings = {};
@@ -351,6 +350,7 @@
             this.main = this.mainDiv();
             this.content = this.contentDiv();
             this.updateClassStyles();
+            this.updateAriaAttributes();
             this.settings.contentLocation.appendChild(this.content.main);
         }
         enable() {
@@ -364,6 +364,7 @@
         open() {
             this.main.arrow.path.setAttribute('d', this.classes.arrowOpen);
             this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow);
+            this.main.main.setAttribute('aria-expanded', 'true');
             this.moveContent();
             const selectedOptions = this.store.getSelectedOptions();
             if (selectedOptions.length) {
@@ -377,6 +378,7 @@
         close() {
             this.main.main.classList.remove(this.classes.openAbove);
             this.main.main.classList.remove(this.classes.openBelow);
+            this.main.main.setAttribute('aria-expanded', 'false');
             this.content.main.classList.remove(this.classes.openAbove);
             this.content.main.classList.remove(this.classes.openBelow);
             this.main.arrow.path.setAttribute('d', this.classes.arrowClose);
@@ -403,15 +405,18 @@
                 this.content.main.classList.add('ss-' + this.settings.contentPosition);
             }
         }
+        updateAriaAttributes() {
+            this.main.main.role = 'combobox';
+            this.main.main.setAttribute('aria-haspopup', 'listbox');
+            this.main.main.setAttribute('aria-controls', this.content.main.id);
+            this.main.main.setAttribute('aria-expanded', 'false');
+            this.content.main.setAttribute('role', 'listbox');
+        }
         mainDiv() {
             const main = document.createElement('div');
             main.dataset.id = this.settings.id;
+            main.id = this.settings.id;
             main.tabIndex = 0;
-            main.onfocus = () => {
-                if (this.settings.triggerFocus && this.settings.isWindowFocused) {
-                    this.callbacks.open();
-                }
-            };
             main.onkeydown = (e) => {
                 switch (e.key) {
                     case 'ArrowUp':
@@ -423,6 +428,8 @@
                         this.callbacks.close();
                         return true;
                     case 'Enter':
+                    case ' ':
+                        this.callbacks.open();
                         const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
                         if (highlighted) {
                             highlighted.click();
@@ -499,12 +506,10 @@
                 },
             };
         }
-        mainFocus(trigger) {
-            if (!trigger) {
-                this.settings.triggerFocus = false;
+        mainFocus(eventType) {
+            if (eventType !== 'click') {
+                this.main.main.focus({ preventScroll: true });
             }
-            this.main.main.focus({ preventScroll: true });
-            this.settings.triggerFocus = true;
         }
         placeholder() {
             const placeholderOption = this.store.filter((o) => o.placeholder, false);
@@ -680,6 +685,7 @@
         contentDiv() {
             const main = document.createElement('div');
             main.dataset.id = this.settings.id;
+            main.id = this.settings.id;
             const search = this.searchDiv();
             main.appendChild(search.main);
             const list = this.listDiv();
@@ -737,7 +743,6 @@
                 switch (e.key) {
                     case 'ArrowUp':
                     case 'ArrowDown':
-                        this.callbacks.open();
                         e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
                         return false;
                     case 'Tab':
@@ -747,6 +752,7 @@
                         this.callbacks.close();
                         return false;
                     case 'Enter':
+                    case ' ':
                         if (this.callbacks.addable && e.ctrlKey) {
                             addable.click();
                         }
@@ -759,12 +765,6 @@
                         return false;
                 }
             };
-            input.onfocus = () => {
-                if (this.settings.isOpen) {
-                    return;
-                }
-                this.callbacks.open();
-            };
             main.appendChild(input);
             if (this.callbacks.addable) {
                 addable.classList.add(this.classes.addable);
@@ -837,12 +837,8 @@
             }
             return searchReturn;
         }
-        searchFocus(trigger) {
-            if (!trigger) {
-                this.settings.triggerFocus = false;
-            }
+        searchFocus() {
             this.content.search.input.focus();
-            this.settings.triggerFocus = true;
         }
         getOptions(notPlaceholder = false, notDisabled = false, notHidden = false) {
             let query = '.' + this.classes.option;
@@ -898,7 +894,6 @@
         listDiv() {
             const options = document.createElement('div');
             options.classList.add(this.classes.list);
-            options.setAttribute('role', 'listbox');
             return options;
         }
         renderError(error) {
@@ -1043,6 +1038,7 @@
             }
             const optionEl = document.createElement('div');
             optionEl.dataset.id = option.id;
+            optionEl.id = option.id;
             optionEl.classList.add(this.classes.option);
             optionEl.setAttribute('role', 'option');
             if (option.class) {
@@ -1076,9 +1072,12 @@
             }
             if (option.selected) {
                 optionEl.classList.add(this.classes.selected);
+                optionEl.setAttribute('aria-selected', 'true');
+                this.main.main.setAttribute('aria-activedescendant', optionEl.id);
             }
             else {
                 optionEl.classList.remove(this.classes.selected);
+                optionEl.setAttribute('aria-selected', 'false');
             }
             optionEl.addEventListener('click', (e) => {
                 e.preventDefault();
@@ -1496,13 +1495,13 @@
                 afterClose: undefined,
             };
             this.windowResize = debounce(() => {
-                if (!this.settings.isOpen) {
+                if (!this.settings.isOpen && !this.settings.isFullOpen) {
                     return;
                 }
                 this.render.moveContent();
             });
             this.windowScroll = debounce(() => {
-                if (!this.settings.isOpen) {
+                if (!this.settings.isOpen && !this.settings.isFullOpen) {
                     return;
                 }
                 this.render.moveContent();
@@ -1512,19 +1511,13 @@
                     return;
                 }
                 if (e.target && !hasClassInTree(e.target, this.settings.id)) {
-                    this.close();
+                    this.close(e.type);
                 }
             };
             this.windowVisibilityChange = () => {
                 if (document.hidden) {
-                    this.settings.isWindowFocused = false;
                     this.close();
                 }
-                else {
-                    setTimeout(() => {
-                        this.settings.isWindowFocused = true;
-                    }, 20);
-                }
             };
             this.selectEl = (typeof config.select === 'string' ? document.querySelector(config.select) : config.select);
             if (!this.selectEl) {
@@ -1597,6 +1590,14 @@
             this.render = new Render(this.settings, this.store, callbacks);
             this.render.renderValues();
             this.render.renderOptions(this.store.getData());
+            const selectAriaLabel = this.selectEl.getAttribute('aria-label');
+            const selectAriaLabelledBy = this.selectEl.getAttribute('aria-labelledby');
+            if (selectAriaLabel) {
+                this.render.main.main.setAttribute('aria-label', selectAriaLabel);
+            }
+            else if (selectAriaLabelledBy) {
+                this.render.main.main.setAttribute('aria-labelledby', selectAriaLabelledBy);
+            }
             if (this.selectEl.parentNode) {
                 this.selectEl.parentNode.insertBefore(this.render.main.main, this.selectEl.nextSibling);
             }
@@ -1686,13 +1687,16 @@
             }
             this.render.open();
             if (this.settings.showSearch) {
-                this.render.searchFocus(false);
+                this.render.searchFocus();
             }
+            this.settings.isOpen = true;
             setTimeout(() => {
                 if (this.events.afterOpen) {
                     this.events.afterOpen();
                 }
-                this.settings.isOpen = true;
+                if (this.settings.isOpen) {
+                    this.settings.isFullOpen = true;
+                }
             }, this.settings.timeoutDelay);
             if (this.settings.contentPosition === 'absolute') {
                 if (this.settings.intervalMove) {
@@ -1701,7 +1705,7 @@
                 this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500);
             }
         }
-        close() {
+        close(eventType = null) {
             if (!this.settings.isOpen || this.settings.alwaysOpen) {
                 return;
             }
@@ -1712,12 +1716,13 @@
             if (this.render.content.search.input.value !== '') {
                 this.search('');
             }
-            this.render.mainFocus(false);
+            this.render.mainFocus(eventType);
+            this.settings.isOpen = false;
+            this.settings.isFullOpen = false;
             setTimeout(() => {
                 if (this.events.afterClose) {
                     this.events.afterClose();
                 }
-                this.settings.isOpen = false;
             }, this.settings.timeoutDelay);
             if (this.settings.intervalMove) {
                 clearInterval(this.settings.intervalMove);