From a93b89590cccb59ec460f9cde27ff753aba8492f Mon Sep 17 00:00:00 2001 From: Dobrin Dimchev Date: Thu, 19 Sep 2024 15:50:49 +0300 Subject: [PATCH] fix: allow tab "forms" navigation --- packages/main/src/List.ts | 20 +- packages/main/test/pages/List.html | 663 +---------------------------- 2 files changed, 20 insertions(+), 663 deletions(-) diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index 7c76e5fb096f..7ea19665be15 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -28,6 +28,8 @@ import debounce from "@ui5/webcomponents-base/dist/util/debounce.js"; import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js"; import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js"; import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js"; +import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js"; +import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js"; import ListSelectionMode from "./types/ListSelectionMode.js"; import ListGrowingMode from "./types/ListGrowingMode.js"; import type ListAccessibleRole from "./types/ListAccessibleRole.js"; @@ -1186,26 +1188,28 @@ class List extends UI5Element { } onForwardBefore(e: CustomEvent) { + const activeElement = getActiveElement() as HTMLElement; const item = e.detail.item as ListItemBase; - const target = getNormalizedTarget(e.target as HTMLElement); + const isFirstItem = this.getItems().indexOf(item) === 0; + const isFirstTabbable = getTabbableElements(item).shift() === getActiveElement(); + const isItemFocused = item.getFocusDomRef() === activeElement; this.setPreviouslyFocusedItem(e.target as ListItemBase); - if (target !== item.getFocusDomRef()) { - return; + if (isItemFocused && (isFirstItem && !isFirstTabbable)) { + this.focusBeforeElement(); + e.stopPropagation(); } - - this.focusBeforeElement(); - e.stopPropagation(); } onForwardAfter(e: CustomEvent) { const item = e.detail.item as ListItemBase; - const target = getNormalizedTarget(e.target as HTMLElement); + const isLastItem = this.getItems().indexOf(item) === this.getItems().length - 1; + const isLastTabbable = isLastItem && getTabbableElements(item).pop() === getActiveElement(); this.setPreviouslyFocusedItem(item); - if (target !== item.getFocusDomRef()) { + if (!isLastTabbable) { return; } diff --git a/packages/main/test/pages/List.html b/packages/main/test/pages/List.html index 339f1499df55..1629425f7c8b 100644 --- a/packages/main/test/pages/List.html +++ b/packages/main/test/pages/List.html @@ -20,674 +20,27 @@ - List growing="Scroll" - - - - - - Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore. - - Woman image - - - Laptop Lenovo - - Woman image - - - IPhone 3 - - Woman image - - - - - - HP Monitor 24 - - Woman image - - - Audio cabel - - Woman image - - - DVD set - - Woman image - - - - - - HP Monitor 24 - - Woman image - - - Audio cabel - - Woman image - - - DVD set - - Woman image - - - - - -

- -

List growing="Button" and growing-button-text property used

- - - Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore. - - Woman image - - - Laptop Lenovo - - Woman image - - - IPhone 3 - - Woman image - - - - - - -

- -

List with img tag

- - - Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore. - Woman image - - Laptop Lenovo - Woman image - - IPhone 3 - Woman image - - - - -

- -

ui5-list

- - - - Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore. - - Woman image - - - Laptop Lenovo - - Woman image - - - IPhone 3 - - Woman image - - - - - - HP Monitor 24 - - Woman image - - - Audio cabel - - Woman image - - - DVD set - - Woman image - - - - - - HP Monitor 24 - - Woman image - - - Audio cabel - - Woman image - - - DVD set - - Woman image - - - - - -

- - - Option 1 - - -

-
-

- - - Laptop HP - - Woman image - - - laptop Lenovo - - Woman image - - - IPhone 3 - - Woman image - - - - -

- - - Avatar inside image slot -
- -
- - Avatar inside image slot -
- - Woman image - -
- - - -

- - - Active item - press - Active item - press - Inactive item - Inactive item - Detail item - - -

- - - Inactive item - Inactive item - - -

- - - Inactive item - Inactive item - - -

- - - Navigation item - Navigation item - -
- -

- - - Navigated item - Navigated item - -
- -

- - - Argentina - Bulgaria - China - - -

- - [prevented Event] itemClick :: n/a - - - Argentina - Bulgaria - China - - -

- - [Event] itemPress :: n/a -

- [Event] itemClick :: n/a -

- [Event] selectionChange :: n/a - - Argentina - Bulgaria - China - Italy - Vietnam - - -

- - - Dolor dolor ipsum culpa proident esse quis quis incididunt. Sunt duis eu ad deserunt dolor sunt Lorem incididunt est irure qui dolore minim consectetur. Voluptate minim veniam aliqua aute et consectetur magna commodo sit. Duis fugiat esse culpa ea velit sit excepteur duis deserunt aliquip minim laborum. Amet aliquip excepteur esse aute ut dolore labore. - Bulgaria - China - - -

- - [Event] itemPress :: n/a -

- [Event] selectionChange :: n/a - - Argentina - Bulgaria - China - - -

-
-

Items 3/3

- Reset List -
- - - Argentina - Bulgaria - China - Detail item - Denmark -
- Custom Delete Button -
- - - -

- - - Laptop HP - - Woman image - - - laptop Lenovo - - Woman image - - - IPhone 3 - - Woman image - - - - -

- - - Laptop HP - - Woman image - - - laptop Lenovo - - Woman image - - - IPhone 3 - - Woman image - - - DVD set - - Woman image - - - - -

- - - +
- Press me - Go to SAP + Press me + Go to SAP
- Press me - Go to SAP + Press me + Go to SAP
- Press me - Go to SAP + Press me + Go to SAP
- - - Option 1 - Option 2 - Option 3 - -

- - Option 1 - Option 2 - Option 3 - - - - -
- Export -
- - - Argentina - - Click me - UI5 link - - Click me - - China - - - - - - - Header button - Option 1 - Option 2 - Option 3 - - -
- Change selectionMode: - - None - Single - SingleStart - SingleEnd - Multiple - Delete - - - -
- Press me - Go to SAP -
- - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - - Woman image - - - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - - Woman image - - - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - - Woman image - - - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. - - Woman image - - - - -
- -
- -
- - + \ No newline at end of file