slim-select 2.3.3 → 2.4.1

package/src/vue/dist/slimselectvue.es.js

@@ -59,8 +59,7 @@ class Settings {
         this.class = [];
         this.isMultiple = false;
         this.isOpen = false;
-        this.isWindowFocused = true;
-        this.triggerFocus = true;
+        this.isFullOpen = false;
         this.intervalMove = null;
         if (!settings) {
             settings = {};
@@ -347,6 +346,7 @@ class Render {
         this.main = this.mainDiv();
         this.content = this.contentDiv();
         this.updateClassStyles();
+        this.updateAriaAttributes();
         this.settings.contentLocation.appendChild(this.content.main);
     }
     enable() {
@@ -360,6 +360,7 @@ class Render {
     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) {
@@ -373,6 +374,7 @@ class Render {
     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);
@@ -399,15 +401,18 @@ class Render {
             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':
@@ -419,6 +424,8 @@ class Render {
                     this.callbacks.close();
                     return true;
                 case 'Enter':
+                case ' ':
+                    this.callbacks.open();
                     const highlighted = this.content.list.querySelector('.' + this.classes.highlighted);
                     if (highlighted) {
                         highlighted.click();
@@ -495,12 +502,10 @@ class Render {
             },
         };
     }
-    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);
@@ -676,6 +681,7 @@ class Render {
     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();
@@ -733,7 +739,6 @@ class Render {
             switch (e.key) {
                 case 'ArrowUp':
                 case 'ArrowDown':
-                    this.callbacks.open();
                     e.key === 'ArrowDown' ? this.highlight('down') : this.highlight('up');
                     return false;
                 case 'Tab':
@@ -743,6 +748,7 @@ class Render {
                     this.callbacks.close();
                     return false;
                 case 'Enter':
+                case ' ':
                     if (this.callbacks.addable && e.ctrlKey) {
                         addable.click();
                     }
@@ -755,12 +761,6 @@ class Render {
                     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);
@@ -833,12 +833,8 @@ class Render {
         }
         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;
@@ -894,7 +890,6 @@ class Render {
     listDiv() {
         const options = document.createElement('div');
         options.classList.add(this.classes.list);
-        options.setAttribute('role', 'listbox');
         return options;
     }
     renderError(error) {
@@ -1039,6 +1034,7 @@ class Render {
         }
         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) {
@@ -1072,9 +1068,12 @@ class Render {
         }
         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();
@@ -1492,13 +1491,13 @@ class SlimSelect {
             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();
@@ -1508,19 +1507,13 @@ class SlimSelect {
                 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) {
@@ -1593,6 +1586,14 @@ class SlimSelect {
         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);
         }
@@ -1682,13 +1683,16 @@ class SlimSelect {
         }
         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) {
@@ -1697,7 +1701,7 @@ class SlimSelect {
             this.settings.intervalMove = setInterval(this.render.moveContent.bind(this.render), 500);
         }
     }
-    close() {
+    close(eventType = null) {
         if (!this.settings.isOpen || this.settings.alwaysOpen) {
             return;
         }
@@ -1708,12 +1712,13 @@ class SlimSelect {
         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/src/vue/dist/slimselectvue.global.js

@@ -60,8 +60,7 @@ var SlimSelectVue = (function (vue) {
           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 SlimSelectVue = (function (vue) {
           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 SlimSelectVue = (function (vue) {
       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 SlimSelectVue = (function (vue) {
       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 SlimSelectVue = (function (vue) {
               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 SlimSelectVue = (function (vue) {
                       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 SlimSelectVue = (function (vue) {
               },
           };
       }
-      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 SlimSelectVue = (function (vue) {
       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 SlimSelectVue = (function (vue) {
               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 SlimSelectVue = (function (vue) {
                       this.callbacks.close();
                       return false;
                   case 'Enter':
+                  case ' ':
                       if (this.callbacks.addable && e.ctrlKey) {
                           addable.click();
                       }
@@ -756,12 +762,6 @@ var SlimSelectVue = (function (vue) {
                       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 SlimSelectVue = (function (vue) {
           }
           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 SlimSelectVue = (function (vue) {
       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 SlimSelectVue = (function (vue) {
           }
           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 SlimSelectVue = (function (vue) {
           }
           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 SlimSelectVue = (function (vue) {
               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 SlimSelectVue = (function (vue) {
                   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 SlimSelectVue = (function (vue) {
           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 SlimSelectVue = (function (vue) {
           }
           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 SlimSelectVue = (function (vue) {
               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 SlimSelectVue = (function (vue) {
           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);