Merge pull request #972 from OutSystems/ROU-10963

ROU-10963: Fixed tab navigation inside sidebar.

Author: joselrio

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
 	"diffEditor.ignoreTrimWhitespace": true,
-	"files.autoSave": "afterDelay",
+	"files.autoSave": "off",
 	"editor.minimap.maxColumn": 170,
 	"editor.wordWrapColumn": 170,
 	"editor.formatOnSave": true,

src/scripts/OSFramework/OSUI/Behaviors/FocusTrap.ts

@@ -2,6 +2,7 @@
 namespace OSFramework.OSUI.Behaviors {
 	// FocusTrap type
 	export type FocusTrapParams = {
+		canContainOtherPatterns?: boolean;
 		focusBottomCallback?: GlobalCallbacks.Generic;
 		focusTargetElement: HTMLElement;
 		focusTopCallback?: GlobalCallbacks.Generic;
@@ -14,6 +15,7 @@ namespace OSFramework.OSUI.Behaviors {
 	 * @class FocusTrap
 	 */
 	export class FocusTrap {
+		private _canTargetContainOtherPatts = false;
 		private _firstFocusableElement: HTMLElement;
 		private _focusBottomCallback: GlobalCallbacks.Generic;
 		private _focusTopCallback: GlobalCallbacks.Generic;
@@ -31,13 +33,18 @@ namespace OSFramework.OSUI.Behaviors {
 		 * @memberof FocusTrap
 		 */
 		constructor(opts: FocusTrapParams) {
+			this._focusableElements = [];
+
 			// Store the focus target element
 			this._targetElement = opts.focusTargetElement;
 
 			// Set the callbacks to focusable elements
 			this._focusBottomCallback = opts.focusBottomCallback;
 			this._focusTopCallback = opts.focusTopCallback;
 
+			// Set the indicator that will reflect if the target element is capable to have other patterns inside
+			this._canTargetContainOtherPatts = opts.canContainOtherPatterns || false;
+
 			// Create the elements needed!
 			this._buildPredictableElements();
 		}
@@ -115,15 +122,34 @@ namespace OSFramework.OSUI.Behaviors {
 		}
 
 		// Method to set the focusable elements to be used
-		private _setFocusableElements(): void {
-			this._focusableElements = Helper.Dom.GetFocusableElements(this._targetElement);
-
-			// Check if predicted elements exist at the _focusableElements
-			for (const predictedElement of this._focusableElements.filter(
-				(item) => item === this._predictableTopElement || item === this._predictableBottomElement
-			)) {
-				// If so, remove them from the array collection of _focusableElements
-				this._focusableElements.splice(this._focusableElements.indexOf(predictedElement), 1);
+		private _setFocusableElements(includeTabIndexHidden = false): void {
+			// Ensure the list of focusable elements is empty
+			this._focusableElements.length = 0;
+
+			// Get all the possible focusable
+			const possibleFocusableElements = Helper.Dom.GetFocusableElements(
+				this._targetElement,
+				includeTabIndexHidden
+			);
+
+			// Ensure we get the proper list of focusable elements
+			for (const element of possibleFocusableElements) {
+				// Get the closest data block from the element
+				const closestDataBlock = element.closest(GlobalEnum.DataBlocksTag.DataBlock);
+				// Check if the element is a child of the given targetElement
+				if (closestDataBlock === this._targetElement || closestDataBlock.contains(this._targetElement)) {
+					// Check if element is not a predictable element
+					if (element !== this._predictableTopElement && element !== this._predictableBottomElement) {
+						this._focusableElements.push(element);
+					}
+					// If the targetElement is a "special" element, we need to ensure that the focusable elements are not part of the inner patterns
+					// Example of having an OverflowMenu inside the Sidebar and also get all the focusable elements from it as a part of the ones at the sideBar context
+				} else if (this._canTargetContainOtherPatts) {
+					// Ensure the element we bring from the inner pattern is the default tabindex element for it!
+					if (Helper.Dom.Attribute.Has(element, Constants.FocusableTabIndexDefault)) {
+						this._focusableElements.push(element);
+					}
+				}
 			}
 
 			// Remove the first element from array, because of predictable top element added for trapping
@@ -204,7 +230,7 @@ namespace OSFramework.OSUI.Behaviors {
 			Helper.A11Y.AriaHiddenFalse(this._predictableTopElement);
 
 			// Ensure the list of focusable elements is updated, predictable elements starts with TabIndex Hidden
-			this._setFocusableElements();
+			this._setFocusableElements(true);
 		}
 
 		/**

src/scripts/OSFramework/OSUI/Constants.ts

@@ -86,7 +86,14 @@ namespace OSFramework.OSUI.Constants {
 
 	/* Store focusable elements when doing a focus trap inside an element*/
 	export const FocusableElems =
-		'a[href]:not([disabled]),[tabindex="0"], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])';
+		'a[href]:not([disabled]), [tabindex="0"], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])';
+
+	/* Attribute used to flag the default tabindex element under the pattern context */
+	export const FocusableTabIndexDefault = 'default-tabindex-element';
+
+	/* Store all the hidden elements under the context of a hidden container (ex: sidebar when it's closed) in order to turn them
+	visible for A11Y when hidden container turns into visible */
+	export const FocusableTabIndexHidden = '[tabindex="-1"][default-tabindex-element]';
 
 	/* Attribute used to flag some elements to be ignored by the Focus Trap behaviour */
 	export const FocusTrapIgnoreAttr = 'ignore-focus-trap';

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

@@ -441,12 +441,16 @@ namespace OSFramework.OSUI.Helper {
 		/**
 		 * Method to get the list of focusable elements
 		 *
-		 * @readonly
 		 * @static
-		 * @memberof OSFramework.Helper.Dom
+		 * @param {HTMLElement} element Element to be queried.
+		 * @param {boolean} [includeTabIndexHidden=false] Include elements with tabindex -1
+		 * @return {*}  {HTMLElement[]} List of focusable elements
+		 * @memberof Dom
 		 */
-		public static GetFocusableElements(element: HTMLElement): HTMLElement[] {
-			const _focusableElems = element.querySelectorAll(Constants.FocusableElems);
+		public static GetFocusableElements(element: HTMLElement, includeTabIndexHidden = false): HTMLElement[] {
+			const _focusableElems = element.querySelectorAll(
+				`${Constants.FocusableElems}${includeTabIndexHidden ? ', ' + Constants.FocusableTabIndexHidden : ''}`
+			);
 			// Remove any element that has the focus-trap-ignore attribute
 			const _filteredElements = Array.from(_focusableElems).filter(
 				(element) => element.getAttribute(Constants.FocusTrapIgnoreAttr) !== 'true'

src/scripts/OSFramework/OSUI/Pattern/AccordionItem/AccordionItem.ts

@@ -353,12 +353,18 @@ namespace OSFramework.OSUI.Patterns.AccordionItem {
 				Helper.Dom.Styles.AddClass(this.selfElement, Enum.CssClass.PatternDisabled);
 				Helper.Dom.Styles.RemoveClass(this._elementWithEvents, Enum.CssClass.PatternClickArea);
 				Helper.A11Y.AriaDisabledTrue(this.selfElement);
+				Helper.Dom.Attribute.Remove(this._elementWithEvents, Constants.FocusableTabIndexDefault);
 				this._removeEvents();
 				this.unsetCallbacks();
 			} else {
 				Helper.Dom.Styles.RemoveClass(this.selfElement, Enum.CssClass.PatternDisabled);
 				Helper.Dom.Styles.AddClass(this._elementWithEvents, Enum.CssClass.PatternClickArea);
 				Helper.A11Y.AriaDisabledFalse(this.selfElement);
+				Helper.Dom.Attribute.Set(
+					this._elementWithEvents,
+					Constants.FocusableTabIndexDefault,
+					Constants.EmptyString
+				);
 				this.setCallbacks();
 				this._addEvents();
 			}

src/scripts/OSFramework/OSUI/Pattern/BottomSheet/BottomSheet.ts

@@ -77,6 +77,7 @@ namespace OSFramework.OSUI.Patterns.BottomSheet {
 		private _handleFocusBehavior(): void {
 			const opts = {
 				focusTargetElement: this._parentSelf,
+				canContainOtherPatterns: true,
 			} as Behaviors.FocusTrapParams;
 
 			this._focusTrapInstance = new Behaviors.FocusTrap(opts);

src/scripts/OSFramework/OSUI/Pattern/FlipContent/FlipContent.ts

@@ -133,6 +133,8 @@ namespace OSFramework.OSUI.Patterns.FlipContent {
 				Helper.A11Y.TabIndexTrue(this.selfElement);
 				Helper.A11Y.RoleButton(this.selfElement);
 				Helper.A11Y.AriaLivePolite(this.selfElement);
+				// Set the attr that will be used to define the default tabindex element
+				Helper.Dom.Attribute.Set(this.selfElement, Constants.FocusableTabIndexDefault, Constants.EmptyString);
 			}
 		}
 

src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/OverflowMenu.ts

@@ -140,6 +140,8 @@ namespace OSFramework.OSUI.Patterns.OverflowMenu {
 				Helper.A11Y.RoleMenu(this._balloonElem);
 				this.setTriggerAriaLabel(Enum.AriaLabel.Trigger);
 				Helper.Dom.Attribute.Set(this._triggerElem, Constants.FocusTrapIgnoreAttr, true);
+				// Set the attr that will be used to define the default tabindex element
+				Helper.Dom.Attribute.Set(this._triggerElem, Constants.FocusableTabIndexDefault, Constants.EmptyString);
 			}
 
 			Helper.A11Y.AriaExpanded(this._triggerElem, this.isOpen.toString());

src/scripts/OSFramework/OSUI/Pattern/Progress/AbstractProgress.ts

@@ -27,6 +27,9 @@ namespace OSFramework.OSUI.Patterns.Progress {
 		private _setAccessibilityProps(): void {
 			Helper.Dom.Attribute.Set(this.selfElement, Constants.A11YAttributes.TabIndex, '0');
 
+			// Set the attr that will be used to define the default tabindex element
+			Helper.Dom.Attribute.Set(this.selfElement, Constants.FocusableTabIndexDefault, Constants.EmptyString);
+
 			Helper.Dom.Attribute.Set(
 				this.selfElement,
 				Constants.A11YAttributes.Role.AttrName,

src/scripts/OSFramework/OSUI/Pattern/Rating/Rating.ts

@@ -148,6 +148,7 @@ namespace OSFramework.OSUI.Patterns.Rating {
 				];
 				if (_lastChosen) {
 					_lastChosen.ariaChecked = Constants.A11YAttributes.States.False;
+					Helper.Dom.Attribute.Remove(_lastChosen, Constants.FocusableTabIndexDefault);
 				}
 
 				// If it is, then get the input:checked value
@@ -356,6 +357,8 @@ namespace OSFramework.OSUI.Patterns.Rating {
 			if (this.configs.RatingScale === 1) {
 				ratingItems[1].checked = true;
 				ratingItems[1].ariaChecked = Constants.A11YAttributes.States.True;
+				// Set the attr that will be used to define the default tabindex element
+				Helper.Dom.Attribute.Set(ratingItems[1], Constants.FocusableTabIndexDefault, Constants.EmptyString);
 				return;
 			}
 
@@ -386,6 +389,8 @@ namespace OSFramework.OSUI.Patterns.Rating {
 			// Set the itemas as :checked
 			ratingItems[newValue].checked = true;
 			ratingItems[newValue].ariaChecked = Constants.A11YAttributes.States.True;
+			// Set the attr that will be used to define the default tabindex element
+			Helper.Dom.Attribute.Set(ratingItems[newValue], Constants.FocusableTabIndexDefault, Constants.EmptyString);
 
 			// If is-half add the appropriate class, otherwise just declare the this.isHalfValue, to complete the if statement
 			if (this._isHalfValue) {