From b25c8311b95e46b46f8b23134b68adc3a4f2e543 Mon Sep 17 00:00:00 2001
From: Erik Strid <strid.erik@gmail.com>
Date: Tue, 19 Nov 2024 10:09:16 +0100
Subject: [PATCH] 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 <erik.strid@idainfront.se>
---
 .../html/autocomplete/wicket-autocomplete.js  | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/wicket-autocomplete.js b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/wicket-autocomplete.js
index 6187d18e0a4..262c35b1b76 100644
--- a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/wicket-autocomplete.js
+++ b/wicket-extensions/src/main/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;
 				}