Merge pull request #528 from wpmudev/enhance/SUI-13

aria(select2): Screen readers improvement.
wpmudev · Sep 14, 2022 · 09b8e00 · 09b8e00
2 parents e36f86c + ae8d9bf
commit 09b8e00
Showing 1 changed file with 63 additions and 31 deletions.
diff --git a/assets/js/shared-ui/select2.full.js b/assets/js/shared-ui/select2.full.js
@@ -5841,38 +5841,70 @@
 				});
 
 				this.on('keypress', function (evt) {
-				var key = evt.which;
-
-				if (self.isOpen()) {
-					if (key === KEYS.ESC || (key === KEYS.UP && evt.altKey)) {
-					self.close(evt);
-
-					evt.preventDefault();
-					} else if (key === KEYS.ENTER || key === KEYS.TAB) {
-					self.trigger('results:select', {});
-
-					evt.preventDefault();
-					} else if ((key === KEYS.SPACE && evt.ctrlKey)) {
-					self.trigger('results:toggle', {});
-
-					evt.preventDefault();
-					} else if (key === KEYS.UP) {
-					self.trigger('results:previous', {});
-
-					evt.preventDefault();
-					} else if (key === KEYS.DOWN) {
-					self.trigger('results:next', {});
-
-					evt.preventDefault();
-					}
-				} else {
-					if (key === KEYS.ENTER || key === KEYS.SPACE ||
-						(key === KEYS.DOWN && evt.altKey)) {
-					self.open();
-
-					evt.preventDefault();
+					var key = evt.which;
+
+					if (self.isOpen()) {
+						if (key === KEYS.ENTER) {
+							self.trigger('results:select');
+							evt.preventDefault();
+						} else if ((key === KEYS.SPACE && evt.ctrlKey)) {
+							self.trigger('results:toggle');
+							evt.preventDefault();
+						} else if (key === KEYS.UP) {
+							self.trigger('results:previous');			  
+							evt.preventDefault();
+						} else if (key === KEYS.DOWN) {
+							self.trigger('results:next');
+							evt.preventDefault();
+						} else if (key === KEYS.ESC || key === KEYS.TAB) {
+							self.close();
+							evt.preventDefault();
+						}
+					} else {
+						// Added the functionality to change option on press of up and down arrow. @edited
+						if (key === KEYS.ENTER || key === KEYS.SPACE || ((key === KEYS.DOWN || key === KEYS.UP) && evt.altKey)) {
+							self.open();
+							evt.preventDefault();
+						}
+						else if (key === KEYS.DOWN) {
+							if (undefined != this.$element.find('option:selected').next().val()) {
+								this.$element.val(this.$element.find('option:selected').next().val());
+								this.$element.trigger('change');
+							}
+							evt.preventDefault();
+						}
+						else if (key === KEYS.UP) {
+							if (undefined != this.$element.find('option:selected').prev().val()) {
+								this.$element.val(this.$element.find('option:selected').prev().val());
+								this.$element.trigger('change');
+							}
+							evt.preventDefault();
+						}
+						// Added the functionality to select option based on key press. @edited
+						else {
+							const selectedValue = this.$element.find('option:selected').text();
+							const keyPressed = String.fromCharCode(key).toLowerCase();
+							const values = this.$element.find('option').filter(function() {
+								return $(this).text()?.toLowerCase().startsWith(keyPressed);
+							});
+							const arrLength = values.length - 1;
+							let elemVal = selectedValue;
+
+							values.each(function(index) {
+								console.log(selectedValue);
+								if(selectedValue !== '' && selectedValue[0].toLowerCase() === keyPressed) {
+									if ($(this).text() === selectedValue && index !== arrLength) {
+										elemVal = $(values[index + 1]).val();
+										return false;
+									}
+									return;
+								}
+								elemVal = $(this).val();
+								return false;
+							});
+							elemVal !== selectedValue && (self.$element.val(elemVal), self.$element.trigger('change'));
+					  	}
 					}
-				}
 				});
 			};