Merge pull request #808 from OutSystems/ROU-4372

ROU-4372: Tabs A11y improvements
OutSystems · Aug 31, 2023 · 0c67d41 · 0c67d41
2 parents f729390 + 4c56ab6
commit 0c67d41
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 0 deletions.
diff --git a/dist/OutSystemsUI.d.ts b/dist/OutSystemsUI.d.ts
@@ -37,6 +37,7 @@ declare namespace OSFramework.OSUI.Constants {
             Listbox: string;
             MenuItem: string;
             Option: string;
+            Presentation: string;
             Progressbar: string;
             Region: string;
             Search: string;
@@ -342,8 +343,10 @@ declare namespace OSFramework.OSUI.GlobalEnum {
         ArrowLeft = "ArrowLeft",
         ArrowRight = "ArrowRight",
         ArrowUp = "ArrowUp",
+        End = "End",
         Enter = "Enter",
         Escape = "Escape",
+        Home = "Home",
         Shift = "Shift",
         ShiftTab = "ShiftTab",
         Space = " ",
@@ -1081,6 +1084,7 @@ declare namespace OSFramework.OSUI.Helper {
         static RoleListbox(element: HTMLElement): void;
         static RoleMenuItem(element: HTMLElement): void;
         static RoleOption(element: HTMLElement): void;
+        static RolePresentation(element: HTMLElement): void;
         static RoleProgressBar(element: HTMLElement): void;
         static RoleRegion(element: HTMLElement): void;
         static RoleSearch(element: HTMLElement): void;

diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js
@@ -79,6 +79,7 @@ var OSFramework;
                     Listbox: 'listbox',
                     MenuItem: 'menuitem',
                     Option: 'option',
+                    Presentation: 'presentation',
                     Progressbar: 'progressbar',
                     Region: 'region',
                     Search: 'search',
@@ -421,8 +422,10 @@ var OSFramework;
                 Keycodes["ArrowLeft"] = "ArrowLeft";
                 Keycodes["ArrowRight"] = "ArrowRight";
                 Keycodes["ArrowUp"] = "ArrowUp";
+                Keycodes["End"] = "End";
                 Keycodes["Enter"] = "Enter";
                 Keycodes["Escape"] = "Escape";
+                Keycodes["Home"] = "Home";
                 Keycodes["Shift"] = "Shift";
                 Keycodes["ShiftTab"] = "ShiftTab";
                 Keycodes["Space"] = " ";
@@ -2985,6 +2988,9 @@ var OSFramework;
                 static RoleOption(element) {
                     Helper.Dom.Attribute.Set(element, OSUI.Constants.A11YAttributes.Role.AttrName, OSUI.Constants.A11YAttributes.Role.Option);
                 }
+                static RolePresentation(element) {
+                    Helper.Dom.Attribute.Set(element, OSUI.Constants.A11YAttributes.Role.AttrName, OSUI.Constants.A11YAttributes.Role.Presentation);
+                }
                 static RoleProgressBar(element) {
                     Helper.Dom.Attribute.Set(element, OSUI.Constants.A11YAttributes.Role.AttrName, OSUI.Constants.A11YAttributes.Role.Progressbar);
                 }
@@ -10068,6 +10074,14 @@ var OSFramework;
                                 }
                                 this.changeTab(targetHeaderItemIndex, undefined, true);
                                 break;
+                            case OSUI.GlobalEnum.Keycodes.End:
+                                targetHeaderItemIndex = this.getChildItems(Tabs_1.Enum.ChildTypes.TabsHeaderItem).length - 1;
+                                this.changeTab(targetHeaderItemIndex, undefined, true);
+                                break;
+                            case OSUI.GlobalEnum.Keycodes.Home:
+                                targetHeaderItemIndex = 0;
+                                this.changeTab(targetHeaderItemIndex, undefined, true);
+                                break;
                         }
                         const targetHeaderItem = this.getChildByIndex(targetHeaderItemIndex, Tabs_1.Enum.ChildTypes.TabsHeaderItem);
                         if (targetHeaderItem) {
@@ -10669,6 +10683,9 @@ var OSFramework;
                     setA11YProperties(isUpdate = true) {
                         if (isUpdate === false) {
                             OSUI.Helper.A11Y.RoleTab(this.selfElement);
+                            if (OSUI.Helper.DeviceInfo.IsIos || OSUI.Helper.DeviceInfo.GetOperatingSystem() === OSUI.GlobalEnum.MobileOS.MacOS) {
+                                OSUI.Helper.A11Y.RolePresentation(this.selfElement.parentElement);
+                            }
                         }
                         if (this._isActive) {
                             OSUI.Helper.A11Y.TabIndexTrue(this.selfElement);

diff --git a/src/scripts/OSFramework/OSUI/Constants.ts b/src/scripts/OSFramework/OSUI/Constants.ts
@@ -33,6 +33,7 @@ namespace OSFramework.OSUI.Constants {
 			Listbox: 'listbox',
 			MenuItem: 'menuitem',
 			Option: 'option',
+			Presentation: 'presentation',
 			Progressbar: 'progressbar',
 			Region: 'region',
 			Search: 'search',

diff --git a/src/scripts/OSFramework/OSUI/GlobalEnum.ts b/src/scripts/OSFramework/OSUI/GlobalEnum.ts
@@ -250,8 +250,10 @@ namespace OSFramework.OSUI.GlobalEnum {
 		ArrowLeft = 'ArrowLeft',
 		ArrowRight = 'ArrowRight',
 		ArrowUp = 'ArrowUp',
+		End = 'End',
 		Enter = 'Enter',
 		Escape = 'Escape',
+		Home = 'Home',
 		Shift = 'Shift',
 		ShiftTab = 'ShiftTab', // Do not exist as a keyboard key, but used to manage this behaviour
 		Space = ' ',

diff --git a/src/scripts/OSFramework/OSUI/Helper/ManageAccessibility.ts b/src/scripts/OSFramework/OSUI/Helper/ManageAccessibility.ts
@@ -395,6 +395,17 @@ namespace OSFramework.OSUI.Helper {
 			Dom.Attribute.Set(element, Constants.A11YAttributes.Role.AttrName, Constants.A11YAttributes.Role.Option);
 		}
 
+		/**
+		 * Method that will set the presentation role
+		 *
+		 * @static
+		 * @param {HTMLElement} element
+		 * @memberof A11Y
+		 */
+		public static RolePresentation(element: HTMLElement): void {
+			Dom.Attribute.Set(element, Constants.A11YAttributes.Role.AttrName, Constants.A11YAttributes.Role.Presentation);
+		}
+
 		/**
 		 * Method that will set the progressbar role
 		 *

diff --git a/src/scripts/OSFramework/OSUI/Pattern/Tabs/Tabs.ts b/src/scripts/OSFramework/OSUI/Pattern/Tabs/Tabs.ts
@@ -277,6 +277,18 @@ namespace OSFramework.OSUI.Patterns.Tabs {
 					}
 
 					this.changeTab(targetHeaderItemIndex, undefined, true);
+					break;
+				case GlobalEnum.Keycodes.End:
+					targetHeaderItemIndex = this.getChildItems(Enum.ChildTypes.TabsHeaderItem).length - 1;
+
+					this.changeTab(targetHeaderItemIndex, undefined, true);
+
+					break;
+				case GlobalEnum.Keycodes.Home:
+					targetHeaderItemIndex = 0;
+
+					this.changeTab(targetHeaderItemIndex, undefined, true);
+
 					break;
 			}
 

diff --git a/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts b/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts
@@ -62,6 +62,11 @@ namespace OSFramework.OSUI.Patterns.TabsHeaderItem {
 			// Static attribute to be added when the item is created
 			if (isUpdate === false) {
 				Helper.A11Y.RoleTab(this.selfElement);
+
+				// Workaround for VoiceOver support
+				if(Helper.DeviceInfo.IsIos || Helper.DeviceInfo.GetOperatingSystem() === GlobalEnum.MobileOS.MacOS) {
+					Helper.A11Y.RolePresentation(this.selfElement.parentElement);
+				}
 			}
 
 			// Dynamic values that need to be changed when toggling the active state