slim-select 2.3.2 → 2.4.0

package/src/slim-select/render.ts

@@ -127,6 +127,7 @@ export default class Render {
 
     // Add classes and styles to main/content
     this.updateClassStyles()
+    this.updateAriaAttributes()
 
     // Add content to the content location settings
     this.settings.contentLocation.appendChild(this.content.main)
@@ -155,6 +156,7 @@ export default class Render {
 
     // Add class to main container
     this.main.main.classList.add(this.settings.openPosition === 'up' ? this.classes.openAbove : this.classes.openBelow)
+    this.main.main.setAttribute('aria-expanded', 'true')
 
     // move the content in to the right location
     this.moveContent()
@@ -173,6 +175,7 @@ export default class Render {
   public close(): void {
     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)
@@ -211,23 +214,26 @@ export default class Render {
     }
   }
 
+  public 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')
+    // do an aria-labelledby here maybe
+  }
+
   public mainDiv(): Main {
     // Create main container
     const main = document.createElement('div')
 
     // Add id to data-id
     main.dataset.id = this.settings.id
+    main.id = this.settings.id
 
     // Set tabable to allow tabbing to the element
     main.tabIndex = 0
 
-    // If main gets focus, open the content
-    main.onfocus = () => {
-      if (this.settings.triggerFocus) {
-        this.callbacks.open()
-      }
-    }
-
     // Deal with keyboard events on the main div
     // This is to allow for normal selecting
     // when you may not have a search bar
@@ -243,6 +249,8 @@ export default class Render {
           this.callbacks.close()
           return true // Continue doing normal tabbing
         case 'Enter':
+        case ' ':
+          this.callbacks.open()
           const highlighted = this.content.list.querySelector('.' + this.classes.highlighted) as HTMLDivElement
           if (highlighted) {
             highlighted.click()
@@ -346,12 +354,17 @@ export default class Render {
     }
   }
 
-  public mainFocus(trigger: boolean): void {
+  public mainFocus(trigger: boolean, eventType: string | null): void {
     if (!trigger) {
       this.settings.triggerFocus = false
     }
     // Trigger focus but dont scroll to it
-    this.main.main.focus({ preventScroll: true })
+    // Need for prevent refocus the element if event is not keyboard event.
+    // For example if event is mouse click or tachpad click this condition prevent refocus on element
+    // because click by mouse change focus position and not need return focus to element.
+    if (eventType !== 'click') {
+      this.main.main.focus({ preventScroll: true })
+    }
     this.settings.triggerFocus = true
   }
 
@@ -595,6 +608,7 @@ export default class Render {
 
     // Add id to data-id
     main.dataset.id = this.settings.id
+    main.id = this.settings.id
 
     // Add search
     const search = this.searchDiv()
@@ -685,6 +699,7 @@ export default class Render {
           this.callbacks.close()
           return false
         case 'Enter':
+        case ' ':
           if (this.callbacks.addable && e.ctrlKey) {
             addable.click()
           } else {
@@ -897,7 +912,6 @@ export default class Render {
   public listDiv(): HTMLDivElement {
     const options = document.createElement('div')
     options.classList.add(this.classes.list)
-    options.setAttribute('role', 'listbox')
 
     return options
   }
@@ -1117,6 +1131,7 @@ export default class Render {
     // Create option
     const optionEl = document.createElement('div')
     optionEl.dataset.id = option.id // Dataset id for identifying an option
+    optionEl.id = option.id
     optionEl.classList.add(this.classes.option)
     optionEl.setAttribute('role', 'option') // WCAG attribute
     if (option.class) {
@@ -1164,8 +1179,11 @@ export default class Render {
     // If option is selected
     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')
     }
 
     // Add click event listener

package/src/slim-select/settings.ts

@@ -10,6 +10,7 @@ export default class Settings {
   // Dynamic settings
   public isMultiple: boolean = false
   public isOpen: boolean = false
+  public isWindowFocused: boolean = true
   public triggerFocus: boolean = true
   public intervalMove: NodeJS.Timeout | null = null
 

package/src/slim-select/slimselect.scss

@@ -68,6 +68,7 @@
   outline: 0;
   box-sizing: border-box;
   transition: background-color var(--ss-animation-timing);
+  overflow: hidden;
 
   &:focus {
     box-shadow: 0 0 5px var(--ss-primary-color);

package/src/vue/dist/slim-select/helpers.d.ts

@@ -1,5 +1,5 @@
 export declare function generateID(): string;
 export declare function hasClassInTree(element: HTMLElement, className: string): any;
-export declare function debounce(func: (...params: any[]) => void, wait?: number, immediate?: boolean): () => void;
+export declare function debounce<T extends (...args: any[]) => void>(func: T, wait?: number, immediate?: boolean): () => void;
 export declare function isEqual(a: any, b: any): boolean;
 export declare function kebabCase(str: string): string;

package/src/vue/dist/slim-select/index.d.ts

@@ -36,10 +36,11 @@ export default class SlimSelect {
     setSelected(value: string | string[], runAfterChange?: boolean): void;
     addOption(option: OptionOptional): void;
     open(): void;
-    close(): void;
+    close(eventType?: string | null): void;
     search(value: string): void;
     destroy(): void;
     private windowResize;
     private windowScroll;
     private documentClick;
+    private windowVisibilityChange;
 }

package/src/vue/dist/slim-select/render.d.ts

@@ -91,8 +91,9 @@ export default class Render {
     open(): void;
     close(): void;
     updateClassStyles(): void;
+    updateAriaAttributes(): void;
     mainDiv(): Main;
-    mainFocus(trigger: boolean): void;
+    mainFocus(trigger: boolean, eventType: string | null): void;
     placeholder(): HTMLDivElement;
     renderValues(): void;
     private renderSingleValue;

package/src/vue/dist/slim-select/settings.d.ts

@@ -6,6 +6,7 @@ export default class Settings {
     class: string[];
     isMultiple: boolean;
     isOpen: boolean;
+    isWindowFocused: boolean;
     triggerFocus: boolean;
     intervalMove: NodeJS.Timeout | null;
     disabled: boolean;

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

@@ -59,6 +59,7 @@ class Settings {
         this.class = [];
         this.isMultiple = false;
         this.isOpen = false;
+        this.isWindowFocused = true;
         this.triggerFocus = true;
         this.intervalMove = null;
         if (!settings) {
@@ -346,6 +347,7 @@ class Render {
         this.main = this.mainDiv();
         this.content = this.contentDiv();
         this.updateClassStyles();
+        this.updateAriaAttributes();
         this.settings.contentLocation.appendChild(this.content.main);
     }
     enable() {
@@ -359,6 +361,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) {
@@ -372,6 +375,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);
@@ -398,15 +402,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.callbacks.open();
-            }
-        };
         main.onkeydown = (e) => {
             switch (e.key) {
                 case 'ArrowUp':
@@ -418,6 +425,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();
@@ -494,11 +503,13 @@ class Render {
             },
         };
     }
-    mainFocus(trigger) {
+    mainFocus(trigger, eventType) {
         if (!trigger) {
             this.settings.triggerFocus = false;
         }
-        this.main.main.focus({ preventScroll: true });
+        if (eventType !== 'click') {
+            this.main.main.focus({ preventScroll: true });
+        }
         this.settings.triggerFocus = true;
     }
     placeholder() {
@@ -675,6 +686,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();
@@ -742,6 +754,7 @@ class Render {
                     this.callbacks.close();
                     return false;
                 case 'Enter':
+                case ' ':
                     if (this.callbacks.addable && e.ctrlKey) {
                         addable.click();
                     }
@@ -893,7 +906,6 @@ class Render {
     listDiv() {
         const options = document.createElement('div');
         options.classList.add(this.classes.list);
-        options.setAttribute('role', 'listbox');
         return options;
     }
     renderError(error) {
@@ -1038,6 +1050,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) {
@@ -1071,9 +1084,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();
@@ -1507,8 +1523,19 @@ class SlimSelect {
                 return;
             }
             if (e.target && !hasClassInTree(e.target, this.settings.id)) {
+                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) {
@@ -1581,6 +1608,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);
         }
@@ -1589,6 +1624,7 @@ class SlimSelect {
         if (this.settings.openPosition === 'auto') {
             window.addEventListener('scroll', this.windowScroll, false);
         }
+        document.addEventListener('visibilitychange', this.windowVisibilityChange);
         if (this.settings.disabled) {
             this.disable();
         }
@@ -1649,7 +1685,9 @@ class SlimSelect {
     }
     addOption(option) {
         const selected = this.store.getSelected();
-        this.store.addOption(option);
+        if (!this.store.getDataOptions().some((o) => { var _a; return o.value === ((_a = option.value) !== null && _a !== void 0 ? _a : option.text); })) {
+            this.store.addOption(option);
+        }
         const data = this.store.getData();
         this.select.updateOptions(data);
         this.render.renderValues();
@@ -1682,7 +1720,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;
         }
@@ -1693,7 +1731,7 @@ class SlimSelect {
         if (this.render.content.search.input.value !== '') {
             this.search('');
         }
-        this.render.mainFocus(false);
+        this.render.mainFocus(false, eventType);
         setTimeout(() => {
             if (this.events.afterClose) {
                 this.events.afterClose();
@@ -1737,6 +1775,7 @@ class SlimSelect {
         if (this.settings.openPosition === 'auto') {
             window.removeEventListener('scroll', this.windowScroll, false);
         }
+        document.removeEventListener('visibilitychange', this.windowVisibilityChange);
         this.store.setData([]);
         this.render.destroy();
         this.select.destroy();

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

@@ -60,6 +60,7 @@ var SlimSelectVue = (function (vue) {
           this.class = [];
           this.isMultiple = false;
           this.isOpen = false;
+          this.isWindowFocused = true;
           this.triggerFocus = true;
           this.intervalMove = null;
           if (!settings) {
@@ -347,6 +348,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() {
@@ -360,6 +362,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) {
@@ -373,6 +376,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);
@@ -399,15 +403,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.callbacks.open();
-              }
-          };
           main.onkeydown = (e) => {
               switch (e.key) {
                   case 'ArrowUp':
@@ -419,6 +426,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();
@@ -495,11 +504,13 @@ var SlimSelectVue = (function (vue) {
               },
           };
       }
-      mainFocus(trigger) {
+      mainFocus(trigger, eventType) {
           if (!trigger) {
               this.settings.triggerFocus = false;
           }
-          this.main.main.focus({ preventScroll: true });
+          if (eventType !== 'click') {
+              this.main.main.focus({ preventScroll: true });
+          }
           this.settings.triggerFocus = true;
       }
       placeholder() {
@@ -676,6 +687,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();
@@ -743,6 +755,7 @@ var SlimSelectVue = (function (vue) {
                       this.callbacks.close();
                       return false;
                   case 'Enter':
+                  case ' ':
                       if (this.callbacks.addable && e.ctrlKey) {
                           addable.click();
                       }
@@ -894,7 +907,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) {
@@ -1039,6 +1051,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) {
@@ -1072,9 +1085,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();
@@ -1508,8 +1524,19 @@ var SlimSelectVue = (function (vue) {
                   return;
               }
               if (e.target && !hasClassInTree(e.target, this.settings.id)) {
+                  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) {
@@ -1582,6 +1609,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);
           }
@@ -1590,6 +1625,7 @@ var SlimSelectVue = (function (vue) {
           if (this.settings.openPosition === 'auto') {
               window.addEventListener('scroll', this.windowScroll, false);
           }
+          document.addEventListener('visibilitychange', this.windowVisibilityChange);
           if (this.settings.disabled) {
               this.disable();
           }
@@ -1650,7 +1686,9 @@ var SlimSelectVue = (function (vue) {
       }
       addOption(option) {
           const selected = this.store.getSelected();
-          this.store.addOption(option);
+          if (!this.store.getDataOptions().some((o) => { var _a; return o.value === ((_a = option.value) !== null && _a !== void 0 ? _a : option.text); })) {
+              this.store.addOption(option);
+          }
           const data = this.store.getData();
           this.select.updateOptions(data);
           this.render.renderValues();
@@ -1683,7 +1721,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;
           }
@@ -1694,7 +1732,7 @@ var SlimSelectVue = (function (vue) {
           if (this.render.content.search.input.value !== '') {
               this.search('');
           }
-          this.render.mainFocus(false);
+          this.render.mainFocus(false, eventType);
           setTimeout(() => {
               if (this.events.afterClose) {
                   this.events.afterClose();
@@ -1738,6 +1776,7 @@ var SlimSelectVue = (function (vue) {
           if (this.settings.openPosition === 'auto') {
               window.removeEventListener('scroll', this.windowScroll, false);
           }
+          document.removeEventListener('visibilitychange', this.windowVisibilityChange);
           this.store.setData([]);
           this.render.destroy();
           this.select.destroy();