Fixed focus on Dropdown Server Side

Author: os-davidlourenco

src/scripts/OSFramework/OSUI/Constants.ts

@@ -6,6 +6,7 @@ namespace OSFramework.OSUI.Constants {
 	export const A11YAttributes = {
 		Aria: {
 			Atomic: 'aria-atomic',
+			Modal: 'aria-modal',
 			Busy: 'aria-busy',
 			Controls: 'aria-controls',
 			Describedby: 'aria-describedby',
@@ -43,6 +44,7 @@ namespace OSFramework.OSUI.Constants {
 			AttrName: 'role',
 			Button: 'button',
 			Complementary: 'complementary',
+			Dialog: 'dialog',
 			Listbox: 'listbox',
 			Menu: 'menu',
 			MenuItem: 'menuitem',

src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts

@@ -210,8 +210,13 @@ namespace OSFramework.OSUI.Feature.Balloon {
 			Helper.Dom.Attribute.Set(this.featureElem, Constants.A11YAttributes.Aria.Hidden, (!this.isOpen).toString());
 
 			if (this.featureOptions.focusOptions.useFocus !== false) {
-				// Will handle the tabindex value of the elements inside pattern
-				Helper.A11Y.SetElementsTabIndex(this.isOpen, this._focusTrapInstance.focusableElements);
+				if (Helper.DeviceInfo.IsMobileDevice === false) {
+					// Will handle the tabindex value of the elements inside pattern
+					Helper.A11Y.SetElementsTabIndex(this.isOpen, this._focusTrapInstance.focusableElements);
+				} else {
+					Helper.A11Y.RoleDialog(this.featureElem);
+					Helper.A11Y.AriaModalTrue(this.featureElem);
+				}
 
 				Helper.Dom.Attribute.Set(
 					this.featureElem,
@@ -310,7 +315,7 @@ namespace OSFramework.OSUI.Feature.Balloon {
 			this._setA11YProperties();
 
 			if (this.isOpen) {
-				if (this.featureOptions.focusOptions.useFocus !== false) {
+				if (this.featureOptions.focusOptions.useFocus !== false && Helper.DeviceInfo.IsMobileDevice === false) {
 					// Handle focus trap logic
 					this._focusManagerInstance.storeLastFocusedElement();
 					this._focusTrapInstance.enableForA11y();
@@ -323,15 +328,17 @@ namespace OSFramework.OSUI.Feature.Balloon {
 					this._manageFocusInsideBalloon(arrowKeyPressed);
 				}
 			} else if (this.featureOptions.focusOptions.useFocus !== false) {
-				// Handle focus trap logic
-				this._focusTrapInstance.disableForA11y();
-				// Focus on last element clicked. Async to avoid conflict with closing animation
-				Helper.AsyncInvocation(() => {
-					this.featureElem.blur();
-					if (isBodyClick === false) {
-						this._focusManagerInstance.setFocusToStoredElement();
-					}
-				});
+				if (Helper.DeviceInfo.IsMobileDevice === false) {
+					// Handle focus trap logic
+					this._focusTrapInstance.disableForA11y();
+					// Focus on last element clicked. Async to avoid conflict with closing animation
+					Helper.AsyncInvocation(() => {
+						this.featureElem.blur();
+						if (isBodyClick === false) {
+							this._focusManagerInstance.setFocusToStoredElement();
+						}
+					});
+				}
 
 				// Unset focus attributes
 				this._focusableBalloonElements = undefined;
@@ -366,7 +373,7 @@ namespace OSFramework.OSUI.Feature.Balloon {
 			this._setEventListeners();
 			this.setFloatingConfigs();
 
-			if (this.featureOptions.focusOptions.useFocus !== false) {
+			if (this.featureOptions.focusOptions.useFocus !== false && Helper.DeviceInfo.IsMobileDevice === false) {
 				this._handleFocusBehavior();
 			}
 

src/scripts/OSFramework/OSUI/Helper/ManageAccessibility.ts

@@ -298,6 +298,28 @@ namespace OSFramework.OSUI.Helper {
 			);
 		}
 
+		/**
+		 * Method that will disable the aria-modal
+		 *
+		 * @param {HTMLElement} element Target element to receive the value atributte
+		 * @returns
+		 * @memberof OSFramework.Helper.A11Y
+		 */
+		public static AriaModalFalse(element: HTMLElement): void {
+			Dom.Attribute.Set(element, Constants.A11YAttributes.Aria.Modal, Constants.A11YAttributes.States.False);
+		}
+
+		/**
+		 * Method that will enable the aria-modal
+		 *
+		 * @param {HTMLElement} element Target element to receive the value atributte
+		 * @returns
+		 * @memberof OSFramework.Helper.A11Y
+		 */
+		public static AriaModalTrue(element: HTMLElement): void {
+			Dom.Attribute.Set(element, Constants.A11YAttributes.Aria.Modal, Constants.A11YAttributes.States.True);
+		}
+
 		/**
 		 * Method that will set the aria-selected to false
 		 *
@@ -411,6 +433,21 @@ namespace OSFramework.OSUI.Helper {
 			);
 		}
 
+		/**
+		 * Method that will set the Dialog role
+		 *
+		 * @static
+		 * @param {HTMLElement} element
+		 * @memberof OSFramework.Helper.A11Y
+		 */
+		public static RoleDialog(element: HTMLElement): void {
+			Dom.Attribute.Set(
+				element,
+				Constants.A11YAttributes.Role.AttrName,
+				Constants.A11YAttributes.Role.Dialog
+			);
+		}
+
 		/**
 		 * Method that will set the list box role
 		 *

src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts

@@ -611,9 +611,14 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 
 				// Check if inputSearch exist
 				if (this._balloonSearchInputElement) {
-					this._balloonSearchInputElement.focus();
+					// This is the time needed in mobile devices to draw the input before focusing it
+					OSFramework.OSUI.Helper.ApplySetTimeOut(() => {
+						this._balloonSearchInputElement.focus();
+					}, 20);
 				} else {
-					this._balloonOptionsWrapperElement.focus();
+					OSFramework.OSUI.Helper.ApplySetTimeOut(() => {
+						this._balloonOptionsWrapperElement.focus();
+					}, 20);
 				}
 			} else {
 				// Remove IsOpened Class
@@ -927,7 +932,7 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide {
 			} else {
 				// Set focus options to pass to the Balloon feature
 				const _focusOptions = {
-					elemToFocusOnOpen: this._selectValuesWrapper,
+					elemToFocusOnOpen: this._balloonElem,
 					useFocus: true,
 					focusTrapParams: {
 						focusBottomCallback: this.close.bind(this),