Merge pull request #314 from joselrio/ROU-4790

ClearButton A11Y and Search Input disabled fixes
sa-si-dev · Mar 9, 2024 · 27fa4c1 · 27fa4c1
2 parents a89cf25 + fc93d25
commit 27fa4c1
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 72 deletions.
diff --git a/dist-archive/virtual-select-1.0.41.min.js b/dist-archive/virtual-select-1.0.41.min.js
diff --git a/dist/virtual-select.js b/dist/virtual-select.js
diff --git a/dist/virtual-select.min.js b/dist/virtual-select.min.js
diff --git a/docs/assets/virtual-select.js b/docs/assets/virtual-select.js
diff --git a/docs/assets/virtual-select.min.js b/docs/assets/virtual-select.min.js
diff --git a/src/virtual-select.js b/src/virtual-select.js
@@ -176,7 +176,7 @@ export class VirtualSelect {
 
           <div class="vscomp-arrow"></div>
 
-          <div class="vscomp-clear-button toggle-button-child" ${clearButtonTooltip}>
+          <div class="vscomp-clear-button toggle-button-child" ${clearButtonTooltip} tabindex="0" aria-label="clear button">
             <i class="vscomp-clear-icon"></i>
           </div>
         </div>
@@ -430,7 +430,7 @@ export class VirtualSelect {
     this.addEvent(document, 'click', 'onDocumentClick');
     this.addEvent(this.$allWrappers, 'keydown', 'onKeyDown');
     this.addEvent(this.$toggleButton, 'click', 'onToggleButtonClick');
-    this.addEvent(this.$clearButton, 'click', 'onClearButtonClick');
+    this.addEvent(this.$clearButton, 'click keydown', 'onClearButtonClick');
     this.addEvent(this.$dropboxContainer, 'click', 'onDropboxContainerClick');
     this.addEvent(this.$dropboxCloseButton, 'click', 'onDropboxCloseButtonClick');
     this.addEvent(this.$optionsContainer, 'scroll', 'onOptionsScroll');
@@ -465,7 +465,7 @@ export class VirtualSelect {
     this.removeEvent(document, 'click', 'onDocumentClick');
     this.removeEvent(this.$allWrappers, 'keydown', 'onKeyDown');
     this.removeEvent(this.$toggleButton, 'click', 'onToggleButtonClick');
-    this.removeEvent(this.$clearButton, 'click', 'onClearButtonClick');
+    this.removeEvent(this.$clearButton, 'click keydown', 'onClearButtonClick');
     this.removeEvent(this.$dropboxContainer, 'click', 'onDropboxContainerClick');
     this.removeEvent(this.$dropboxCloseButton, 'click', 'onDropboxCloseButtonClick');
     this.removeEvent(this.$optionsContainer, 'scroll', 'onOptionsScroll');
@@ -573,8 +573,15 @@ export class VirtualSelect {
     }
   }
 
-  onClearButtonClick() {
-    this.reset();
+  onClearButtonClick(e) {
+    if (e.type === 'click') {
+      this.reset();
+    } else if (e.type === 'keydown') {
+      if (e.code === 'Enter' || e.code === 'Space') {
+        e.stopPropagation();
+        this.reset();
+      }
+    }
   }
 
   onOptionsScroll() {