Skip to content

fix(f6-navigation): skip empty groups #6397

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

Merged
merged 1 commit into from
Feb 6, 2023
Merged

fix(f6-navigation): skip empty groups #6397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
142 changes: 98 additions & 44 deletions packages/base/src/features/F6Navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { isF6Next, isF6Previous } from "../Keys.js";
import { instanceOfUI5Element } from "../UI5Element.js";
import { getFirstFocusableElement } from "../util/FocusableElements.js";
import getFastNavigationGroups from "../util/getFastNavigationGroups.js";
import isElementClickable from "../util/isElementClickable.js";

class F6Navigation {
static _instance: F6Navigation;
Expand All @@ -19,56 +20,61 @@ class F6Navigation {
document.addEventListener("keydown", this.keydownHandler);
}

async _keydownHandler(event: KeyboardEvent) {
if (isF6Next(event)) {
this.updateGroups();
async groupElementToFocus(nextElement: HTMLElement) {
const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;

if (this.groups.length < 1) {
return;
if (nextElementDomRef) {
if (isElementClickable(nextElementDomRef)) {
return nextElementDomRef;
}

event.preventDefault();
const elementToFocus = await getFirstFocusableElement(nextElementDomRef);

let nextIndex = -1;
let nextElement;
if (this.selectedGroup) {
nextIndex = this.groups.indexOf(this.selectedGroup);
if (elementToFocus) {
return elementToFocus;
}
}
}

async findNextFocusableGroupElement(currentIndex: number) {
let elementToFocus;

if (nextIndex > -1) {
if (nextIndex + 1 >= this.groups.length) {
nextElement = this.groups[0];
/* eslint-disable no-await-in-loop */
for (let index = 0; index < this.groups.length; index++) {
let nextElement;

if (currentIndex > -1) {
if (currentIndex + 1 >= this.groups.length) {
currentIndex = 0;
nextElement = this.groups[currentIndex];
} else {
nextElement = this.groups[nextIndex + 1];
currentIndex += 1;
nextElement = this.groups[currentIndex];
}
} else {
nextElement = this.groups[0];
currentIndex = 0;
nextElement = this.groups[currentIndex];
}

const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
elementToFocus = await this.groupElementToFocus(nextElement);

if (nextElementDomRef) {
const elementToFocus = await getFirstFocusableElement(nextElementDomRef, true);
elementToFocus?.focus();
if (elementToFocus) {
break;
}
}
/* eslint-enable no-await-in-loop */

if (isF6Previous(event)) {
this.updateGroups();

if (this.groups.length < 1) {
return;
}
return elementToFocus;
}

event.preventDefault();
async findPreviousFocusableGroupElement(currentIndex: number) {
let elementToFocus;

let nextIndex = -1;
/* eslint-disable no-await-in-loop */
for (let index = 0; index < this.groups.length; index++) {
let nextElement;
if (this.selectedGroup) {
nextIndex = this.groups.indexOf(this.selectedGroup);
}

if (nextIndex > 0) {
if (currentIndex > 0) {
// Handle the situation where the first focusable element of two neighbor groups is the same
// For example:
// <ui5-flexible-column-layout>
Expand All @@ -77,22 +83,70 @@ class F6Navigation {
// </ui5-list>
// </ui5-flexible-column-layout>
// Here for both FCL & List the firstFoccusableElement is the same (the ui5-li)
const firstFocusable = await this.groupElementToFocus(this.groups[currentIndex - 1]);
const shouldSkipParent = firstFocusable === await this.groupElementToFocus(this.groups[currentIndex]);

const firstFocusable = await getFirstFocusableElement(this.groups[nextIndex - 1], true);
const shouldSkipParent = firstFocusable === await getFirstFocusableElement(this.groups[nextIndex], true);
currentIndex = shouldSkipParent ? currentIndex - 2 : currentIndex - 1;

nextElement = this.groups[shouldSkipParent ? nextIndex - 2 : nextIndex - 1];
if (currentIndex < 0) {
currentIndex = this.groups.length - 1;
}

nextElement = this.groups[currentIndex];
} else {
nextElement = this.groups[this.groups.length - 1];
currentIndex = this.groups.length - 1;
nextElement = this.groups[currentIndex];
}

const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
elementToFocus = await this.groupElementToFocus(nextElement);

if (nextElementDomRef) {
const elementToFocus = await getFirstFocusableElement(nextElementDomRef, true);
elementToFocus?.focus();
if (elementToFocus) {
break;
}
}
/* eslint-enable no-await-in-loop */

return elementToFocus;
}

async _keydownHandler(event: KeyboardEvent) {
const forward = isF6Next(event);
const backward = isF6Previous(event);
if (!(forward || backward)) {
return;
}

this.updateGroups();

if (this.groups.length < 1) {
return;
}

event.preventDefault();

let elementToFocus;

if (this.groups.length === 0) {
elementToFocus = await this.groupElementToFocus(this.groups[0]);

return elementToFocus?.focus();
}

let currentIndex = -1;

if (this.selectedGroup) {
currentIndex = this.groups.indexOf(this.selectedGroup);
}

if (forward) {
elementToFocus = await this.findNextFocusableGroupElement(currentIndex);
}

if (backward) {
elementToFocus = await this.findPreviousFocusableGroupElement(currentIndex);
}

elementToFocus?.focus();
}

removeEventListeners() {
Expand All @@ -109,19 +163,19 @@ class F6Navigation {
let element: Element | null | ParentNode = this.deepActive(root);

while (element && (element as Element).getAttribute("data-sap-ui-fastnavgroup") !== "true" && element !== htmlElement) {
element = element.parentElement ? element.parentNode : (element.parentNode as ShadowRoot).host;
element = element.parentElement ? element.parentNode : (element.parentNode as ShadowRoot).host;
}

this.selectedGroup = element as HTMLElement;
}
}

deepActive(root: DocumentOrShadowRoot): Element | null {
deepActive(root: DocumentOrShadowRoot): Element | null {
if (root.activeElement && root.activeElement.shadowRoot) {
return this.deepActive(root.activeElement.shadowRoot);
return this.deepActive(root.activeElement.shadowRoot);
}

return root.activeElement;
}
}

destroy() {
this.removeEventListeners();
Expand Down
40 changes: 40 additions & 0 deletions packages/main/test/pages/F6Test1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<title>Avatar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">


<script src="../../bundle.esm.js" type="module"></script>
<link rel="stylesheet" type="text/css" href="./styles/F6Test.css">
</head>

<body>
<div class="section">
<ui5-button>Before element</ui5-button>
</div>
<div class="section" data-sap-ui-fastnavgroup="true">
<ui5-button id="first">First focusable</ui5-button>
</div>
<div class="section">
<ui5-button>Something focusable</ui5-button>
</div>
<div class="section" data-sap-ui-fastnavgroup="true">
<ui5-button id="second">Second focusable</ui5-button>
</div>
<div class="section">
<ui5-button>Something focusable</ui5-button>
</div>
<div class="section" data-sap-ui-fastnavgroup="true">
<ui5-button id="third">Third focusable</ui5-button>
</div>
<div class="section">
<ui5-button>After Element</ui5-button>
</div>
</body>

</html>
40 changes: 40 additions & 0 deletions packages/main/test/pages/F6Test2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<title>Avatar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">


<script src="../../bundle.esm.js" type="module"></script>
<link rel="stylesheet" type="text/css" href="./styles/F6Test.css">
</head>

<body>
<div class="section">
<ui5-button>Before element</ui5-button>
</div>
<div class="section" data-sap-ui-fastnavgroup="true">
<ui5-button id="first">First focusable</ui5-button>
</div>
<div class="section">
<ui5-button>Something focusable</ui5-button>
</div>
<div class="section" data-sap-ui-fastnavgroup="true">
Group without focusable element
</div>
<div class="section">
<ui5-button>Something focusable</ui5-button>
</div>
<div class="section" data-sap-ui-fastnavgroup="true">
<ui5-button id="second">Second focusable</ui5-button>
</div>
<div class="section">
<ui5-button>After Element</ui5-button>
</div>
</body>

</html>
37 changes: 37 additions & 0 deletions packages/main/test/pages/F6Test3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<title>Avatar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">


<script src="../../bundle.esm.js" type="module"></script>
<link rel="stylesheet" type="text/css" href="./styles/F6Test.css">
</head>

<body>
<div class="section">
<ui5-button>Before element</ui5-button>
</div>
<div class="section" data-sap-ui-fastnavgroup="true">
<ui5-button id="first">First focusable</ui5-button>
<div class="section" data-sap-ui-fastnavgroup="true">
<ui5-button id="second">Second focusable</ui5-button>
</div>
</div>
<div class="section">
<ui5-button>Something focusable</ui5-button>
</div>
<div class="section" data-sap-ui-fastnavgroup="true">
<ui5-button id="third">Third focusable</ui5-button>
</div>
<div class="section">
<ui5-button>After Element</ui5-button>
</div>
</body>

</html>
44 changes: 44 additions & 0 deletions packages/main/test/pages/F6Test4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<title>Avatar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">


<script src="../../bundle.esm.js" type="module"></script>
<link rel="stylesheet" type="text/css" href="./styles/F6Test.css">
</head>

<body>
<div class="section">
<ui5-button>Before element</ui5-button>
</div>
<div class="section" data-sap-ui-fastnavgroup="true">
<div class="section" data-sap-ui-fastnavgroup="true">
<ui5-button id="first">First focusable</ui5-button>
</div>
</div>
<div class="section">
<ui5-button>Something focusable</ui5-button>
</div>
<div class="section" data-sap-ui-fastnavgroup="true">
<div class="section" data-sap-ui-fastnavgroup="true">
<ui5-button id="second">First focusable</ui5-button>
</div>
</div>
<div class="section">
<ui5-button>Something focusable</ui5-button>
</div>
<div class="section" data-sap-ui-fastnavgroup="true">
<ui5-button id="third">Second focusable</ui5-button>
</div>
<div class="section">
<ui5-button>After Element</ui5-button>
</div>
</body>

</html>
Loading