From 679becd21343f60b4b5be36fc3d3b4741cb5a886 Mon Sep 17 00:00:00 2001 From: Bernardo Cardoso Date: Wed, 30 Aug 2023 11:09:22 +0100 Subject: [PATCH 1/5] Added Home and End keyboard support --- src/scripts/OSFramework/OSUI/GlobalEnum.ts | 2 ++ src/scripts/OSFramework/OSUI/Pattern/Tabs/Tabs.ts | 12 ++++++++++++ 2 files changed, 14 insertions(+) diff --git a/src/scripts/OSFramework/OSUI/GlobalEnum.ts b/src/scripts/OSFramework/OSUI/GlobalEnum.ts index 9bc095ff59..cdfe151d5e 100644 --- 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/Pattern/Tabs/Tabs.ts b/src/scripts/OSFramework/OSUI/Pattern/Tabs/Tabs.ts index 2ef3a0f0c2..94594b9865 100644 --- 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; } From 21066ce59c253a4e7ab74a3de96df62c2f537143 Mon Sep 17 00:00:00 2001 From: Bernardo Cardoso Date: Wed, 30 Aug 2023 11:13:40 +0100 Subject: [PATCH 2/5] Fixed voiceOver reading tab group --- .../OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts b/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts index f80b3f8f7a..47df58e90f 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts @@ -61,7 +61,7 @@ namespace OSFramework.OSUI.Patterns.TabsHeaderItem { protected setA11YProperties(isUpdate = true): void { // Static attribute to be added when the item is created if (isUpdate === false) { - Helper.A11Y.RoleTab(this.selfElement); + Helper.A11Y.RoleTab(this.selfElement.parentElement); } // Dynamic values that need to be changed when toggling the active state From 214bb8a39496a045384b2934a14919a28c42b4ee Mon Sep 17 00:00:00 2001 From: Bernardo Cardoso Date: Wed, 30 Aug 2023 11:14:00 +0100 Subject: [PATCH 3/5] build code --- dist/OutSystemsUI.css | 6 ++++-- dist/OutSystemsUI.d.ts | 5 +++-- dist/OutSystemsUI.js | 36 ++++++++++++++++++------------------ src/scss/OutSystemsUI.scss | 2 +- 4 files changed, 26 insertions(+), 23 deletions(-) diff --git a/dist/OutSystemsUI.css b/dist/OutSystemsUI.css index 3229652508..6fbb33e92f 100644 --- a/dist/OutSystemsUI.css +++ b/dist/OutSystemsUI.css @@ -1,6 +1,6 @@ @charset "UTF-8"; /*! -OutSystems UI 2.17.0 +OutSystems UI 2.18.0 Website: • https://www.outsystems.com/outsystems-ui GitHub: @@ -4967,7 +4967,9 @@ span.flatpickr-weekday{ padding:0 5px 0 15px; } .vscomp-search-label, -.vscomp-live-region{ +.vscomp-live-region, +.vscomp-dropbox-container-top, +.vscomp-dropbox-container-bottom{ border:0; clip:rect(0 0 0 0); height:1px; diff --git a/dist/OutSystemsUI.d.ts b/dist/OutSystemsUI.d.ts index 0dd77327b0..64c30548c9 100644 --- a/dist/OutSystemsUI.d.ts +++ b/dist/OutSystemsUI.d.ts @@ -80,7 +80,7 @@ declare namespace OSFramework.OSUI.Constants { const AccessibilityHideElementClass = "wcag-hide-text"; const IsRTLClass = "is-rtl"; const NoTransition = "no-transition"; - const OSUIVersion = "2.17.0"; + const OSUIVersion = "2.18.0"; const ZeroValue = 0; } declare namespace OSFramework.OSUI.ErrorCodes { @@ -342,8 +342,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 = " ", @@ -5370,7 +5372,6 @@ declare namespace Providers.OSUI.Dropdown.VirtualSelect { constructor(uniqueId: string, configs: C); private _addErrorMessage; private _manageAttributes; - private _manageDisableStatus; private _onMouseUp; private _onSelectedOption; private _onWindowResize; diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js index c5760b5dd4..1f41244b11 100644 --- a/dist/OutSystemsUI.js +++ b/dist/OutSystemsUI.js @@ -1,5 +1,5 @@ /*! -OutSystems UI 2.17.0 +OutSystems UI 2.18.0 Website: • https://www.outsystems.com/outsystems-ui GitHub: @@ -135,7 +135,7 @@ var OSFramework; Constants.AccessibilityHideElementClass = 'wcag-hide-text'; Constants.IsRTLClass = 'is-rtl'; Constants.NoTransition = 'no-transition'; - Constants.OSUIVersion = '2.17.0'; + Constants.OSUIVersion = '2.18.0'; Constants.ZeroValue = 0; })(Constants = OSUI.Constants || (OSUI.Constants = {})); })(OSUI = OSFramework.OSUI || (OSFramework.OSUI = {})); @@ -421,8 +421,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"] = " "; @@ -10023,6 +10025,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) { @@ -10622,7 +10632,7 @@ var OSFramework; } setA11YProperties(isUpdate = true) { if (isUpdate === false) { - OSUI.Helper.A11Y.RoleTab(this.selfElement); + OSUI.Helper.A11Y.RoleTab(this.selfElement.parentElement); } if (this._isActive) { OSUI.Helper.A11Y.TabIndexTrue(this.selfElement); @@ -18644,17 +18654,8 @@ var Providers; } } _manageAttributes() { - this._manageDisableStatus(); this.setA11YProperties(); } - _manageDisableStatus() { - if (this.configs.IsDisabled) { - OSFramework.OSUI.Helper.Dom.Attribute.Set(this.selfElement, OSFramework.OSUI.GlobalEnum.HTMLAttributes.Disabled, ''); - } - else { - OSFramework.OSUI.Helper.Dom.Attribute.Remove(this.selfElement, OSFramework.OSUI.GlobalEnum.HTMLAttributes.Disabled); - } - } _onMouseUp(event) { event.preventDefault(); } @@ -18745,8 +18746,6 @@ var Providers; if (this.isBuilt) { switch (propertyName) { case OSFramework.OSUI.Patterns.Dropdown.Enum.Properties.IsDisabled: - this._manageDisableStatus(); - break; case VirtualSelect.Enum.Properties.NoOptionsText: case VirtualSelect.Enum.Properties.NoResultsText: case VirtualSelect.Enum.Properties.OptionsList: @@ -18768,9 +18767,9 @@ var Providers; OSFramework.OSUI.Helper.AsyncInvocation(this.virtualselectConfigs.close.bind(this.virtualselectConfigs)); } disable() { - if (this.configs.IsDisabled === false) { + if (this.configs.IsDisabled === false && this.provider !== undefined) { this.configs.IsDisabled = true; - this._manageDisableStatus(); + this.provider.$ele.disable(); } } dispose() { @@ -18789,9 +18788,9 @@ var Providers; super.dispose(); } enable() { - if (this.configs.IsDisabled) { + if (this.configs.IsDisabled && this.provider !== undefined) { this.configs.IsDisabled = false; - this._manageDisableStatus(); + this.provider.$ele.enable(); } } getSelectedValues() { @@ -18971,6 +18970,7 @@ var Providers; this._groupedOptionsList = groupedOptionsList; this._providerOptions = { ele: this.ElementId, + disabled: this.IsDisabled, dropboxWrapper: OSFramework.OSUI.GlobalEnum.HTMLElement.Body, hasOptionDescription: hasDescription, hideClearButton: false, diff --git a/src/scss/OutSystemsUI.scss b/src/scss/OutSystemsUI.scss index 3e10e6f109..6507e32efb 100644 --- a/src/scss/OutSystemsUI.scss +++ b/src/scss/OutSystemsUI.scss @@ -17,7 +17,7 @@ PS: This comment will not be visible at the compiled version! =============================================================================== */ /*! -OutSystems UI 2.17.0 +OutSystems UI 2.18.0 Website: • https://www.outsystems.com/outsystems-ui GitHub: From 91215ed0e3652ec195e9af8d891e0cd8d1cd4364 Mon Sep 17 00:00:00 2001 From: Bernardo Cardoso Date: Wed, 30 Aug 2023 13:47:12 +0100 Subject: [PATCH 4/5] build the code --- dist/OutSystemsUI.d.ts | 2 ++ dist/OutSystemsUI.js | 7 ++++++- src/scripts/OSFramework/OSUI/Constants.ts | 1 + .../OSFramework/OSUI/Helper/ManageAccessibility.ts | 11 +++++++++++ .../OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts | 3 ++- 5 files changed, 22 insertions(+), 2 deletions(-) diff --git a/dist/OutSystemsUI.d.ts b/dist/OutSystemsUI.d.ts index 64c30548c9..e4a5e98416 100644 --- 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; @@ -1083,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 index 1f41244b11..a009163dd4 100644 --- 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', @@ -2987,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); } @@ -10632,7 +10636,8 @@ var OSFramework; } setA11YProperties(isUpdate = true) { if (isUpdate === false) { - OSUI.Helper.A11Y.RoleTab(this.selfElement.parentElement); + OSUI.Helper.A11Y.RoleTab(this.selfElement); + 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 index 98801cd67a..19ebf7b094 100644 --- 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/Helper/ManageAccessibility.ts b/src/scripts/OSFramework/OSUI/Helper/ManageAccessibility.ts index e5ef729e43..cb04243796 100644 --- 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/TabsHeaderItem/TabsHeaderItem.ts b/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts index 47df58e90f..17f1af5303 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts @@ -61,7 +61,8 @@ namespace OSFramework.OSUI.Patterns.TabsHeaderItem { protected setA11YProperties(isUpdate = true): void { // Static attribute to be added when the item is created if (isUpdate === false) { - Helper.A11Y.RoleTab(this.selfElement.parentElement); + Helper.A11Y.RoleTab(this.selfElement); + Helper.A11Y.RolePresentation(this.selfElement.parentElement); } // Dynamic values that need to be changed when toggling the active state From 1225f583d8dafe569e7c1a8a9071885f3e2092e0 Mon Sep 17 00:00:00 2001 From: Bernardo Cardoso Date: Wed, 30 Aug 2023 16:11:47 +0100 Subject: [PATCH 5/5] Added validation for osx or ios --- dist/OutSystemsUI.js | 4 +++- .../OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts | 6 +++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js index a009163dd4..b87c64dafd 100644 --- a/dist/OutSystemsUI.js +++ b/dist/OutSystemsUI.js @@ -10637,7 +10637,9 @@ var OSFramework; setA11YProperties(isUpdate = true) { if (isUpdate === false) { OSUI.Helper.A11Y.RoleTab(this.selfElement); - OSUI.Helper.A11Y.RolePresentation(this.selfElement.parentElement); + 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/Pattern/TabsHeaderItem/TabsHeaderItem.ts b/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts index 17f1af5303..bd0ce5bb75 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts @@ -62,7 +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); - Helper.A11Y.RolePresentation(this.selfElement.parentElement); + + // 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