Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ROU-4372: Tabs A11y improvements #808

Merged
merged 8 commits into from
Aug 31, 2023
Merged

ROU-4372: Tabs A11y improvements #808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
679becd
Added Home and End keyboard support
BenOsodrac Aug 30, 2023
21066ce
Fixed voiceOver reading tab group
BenOsodrac Aug 30, 2023
214bb8a
build code
BenOsodrac Aug 30, 2023
91215ed
build the code
BenOsodrac Aug 30, 2023
bf0c2b3
Merge branch 'dev' into ROU-4372
BenOsodrac Aug 30, 2023
1225f58
Added validation for osx or ios
BenOsodrac Aug 30, 2023
df24bce
Merge branch 'dev' into ROU-4372
BenOsodrac Aug 30, 2023
4c56ab6
Merge branch 'dev' into ROU-4372
BenOsodrac Aug 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions dist/OutSystemsUI.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ declare namespace OSFramework.OSUI.Constants {
Listbox: string;
MenuItem: string;
Option: string;
Presentation: string;
Progressbar: string;
Region: string;
Search: string;
Expand Down Expand Up @@ -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 = " ",
Expand Down Expand Up @@ -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;
Expand Down
17 changes: 17 additions & 0 deletions dist/OutSystemsUI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ var OSFramework;
Listbox: 'listbox',
MenuItem: 'menuitem',
Option: 'option',
Presentation: 'presentation',
Progressbar: 'progressbar',
Region: 'region',
Search: 'search',
Expand Down Expand Up @@ -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"] = " ";
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions src/scripts/OSFramework/OSUI/Constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ namespace OSFramework.OSUI.Constants {
Listbox: 'listbox',
MenuItem: 'menuitem',
Option: 'option',
Presentation: 'presentation',
Progressbar: 'progressbar',
Region: 'region',
Search: 'search',
Expand Down
2 changes: 2 additions & 0 deletions src/scripts/OSFramework/OSUI/GlobalEnum.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ' ',
Expand Down
11 changes: 11 additions & 0 deletions src/scripts/OSFramework/OSUI/Helper/ManageAccessibility.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down
12 changes: 12 additions & 0 deletions src/scripts/OSFramework/OSUI/Pattern/Tabs/Tabs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
5 changes: 5 additions & 0 deletions src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down