WICKET-7131 Improved accessibility and screen reader support (#1034)

* Improved accessability and screen reader support * Ensure that the input field exists before trying to change its attributes * Fix code style issues --------- Co-authored-by: Erik Strid <[email protected]>
apache · Nov 19, 2024 · b25c831 · b25c831
1 parent 6619dd8
commit b25c831
Showing 1 changed file with 29 additions and 3 deletions.
diff --git a/...in/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/wicket-autocomplete.js b/...in/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/wicket-autocomplete.js
@@ -136,6 +136,7 @@
 								showAutoComplete();
 							}
 							render(true, false);
+							jqEvent.preventDefault();
 						}
 
 						break;
@@ -153,6 +154,7 @@
 								render(true, false);
 								showAutoComplete();
 							}
+							jqEvent.preventDefault();
 						}
 
 						break;
@@ -243,7 +245,7 @@
 		{
 			// Remove the autocompletion menu if still present from
 			// a previous call. This is required to properly register
-			// the mouse event handler again 
+			// the mouse event handler again
 			var choiceDiv=document.getElementById(getMenuId());
 			if (choiceDiv !== null) {
 				choiceDiv.parentNode.parentNode.removeChild(choiceDiv.parentNode);
@@ -325,7 +327,6 @@
 				container.appendChild(choiceDiv);
 				choiceDiv.id=getMenuId();
 				choiceDiv.className = "wicket-aa";
-				choiceDiv.ariaLive = "polite";
 			}
 
 
@@ -404,6 +405,9 @@
 			var container = getAutocompleteContainer();
 			var index=getOffsetParentZIndex(ajaxAttributes.c);
 			container.show();
+
+			input.setAttribute("aria-expanded", "true");
+
 			if (!isNaN(Number(index))) {
 				container.style.zIndex=(Number(index)+1);
 			}
@@ -441,6 +445,13 @@
 
 		function hideAutoComplete(){
 			hideAutoCompleteTimer = undefined;
+
+			var input = Wicket.$(ajaxAttributes.c);
+			if (input) {
+				input.setAttribute("aria-expanded", "false");
+				input.removeAttribute("aria-activedescendant");
+			}
+
 			visible = 0;
 			setSelected(-1);
 
@@ -458,7 +469,6 @@
 
 			if (triggerChangeOnHide) {
 				triggerChangeOnHide = false;
-				var input = Wicket.$(ajaxAttributes.c);
 				isTriggeredChange = true;
 				jQuery(input).trigger('change');
 			}
@@ -612,6 +622,7 @@
 				selChSinceLastRender = true; // selected item will not have selected style until rendrered
 			}
 			element.innerHTML=resp;
+			element.firstChild.role = "listbox";
 			var selectableElements = getSelectableElements();
 			if (selectableElements) {
 				elementCount=selectableElements.length;
@@ -659,6 +670,11 @@
 					node.onclick = clickFunc;
 					node.onmouseover = mouseOverFunc;
 					node.onmousedown = mouseDownFunc;
+					node.role = "option";
+					node.id = getMenuId() + '-item-' + i;
+					node.setAttribute("tabindex", -1);
+					node.setAttribute("aria-posinset", i + 1);
+					node.setAttribute("aria-setsize", elementCount);
 				}
 			} else {
 				elementCount=0;
@@ -754,16 +770,26 @@
 			var node=getSelectableElement(0);
 			var re = /\bselected\b/gi;
 			var sizeAffected = false;
+			var input=Wicket.$(ajaxAttributes.c);
+
 			for(var i=0;i<elementCount;i++)
 			{
 				var origClassNames = node.className;
 				var classNames = origClassNames.replace(re, "");
+
 				if(selected===i){
 					classNames += " selected";
+					node.setAttribute("aria-selected", "true");
+					input.setAttribute("aria-activedescendant", node.id);
+
 					if (adjustScroll) {
 						adjustScrollOffset(menu.parentNode, node);
 					}
 				}
+				else {
+					node.setAttribute("aria-selected", "false");
+				}
+
 				if (classNames !== origClassNames) {
 					node.className = classNames;
 				}