From f1c0635d6d2b94e94b7ecc311bb49480db1fae6d Mon Sep 17 00:00:00 2001 From: TeodorTaushanov Date: Tue, 28 May 2024 10:40:55 +0300 Subject: [PATCH] fix(ui5-notification-list): fix keyboard issues (#9040) Fix trigger actions and close buttons with "space". Add left and right arrows navigation. --- packages/fiori/src/NotificationList.ts | 4 +++ .../fiori/src/NotificationListGroupItem.ts | 6 ++-- packages/fiori/src/NotificationListItem.ts | 16 ++++----- .../fiori/src/NotificationListItemBase.ts | 12 ++++++- .../pages/NotificationList_test_page.html | 4 ++- .../fiori/test/specs/NotificationList.spec.js | 34 +++++++++++++++++-- packages/main/src/ListItemBase.ts | 4 +++ 7 files changed, 64 insertions(+), 16 deletions(-) diff --git a/packages/fiori/src/NotificationList.ts b/packages/fiori/src/NotificationList.ts index 647f4b11ec1b..af1b81820cda 100644 --- a/packages/fiori/src/NotificationList.ts +++ b/packages/fiori/src/NotificationList.ts @@ -1,6 +1,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js"; import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js"; import List from "@ui5/webcomponents/dist/List.js"; import NotificationListGroupItem from "./NotificationListGroupItem.js"; @@ -24,9 +25,12 @@ import { @customElement("ui5-notification-list") class NotificationList extends List { + navigationMode = NavigationMode.Auto; + constructor() { super(); this.accessibleName = NotificationList.i18nFioriBundle.getText(NOTIFICATION_LIST_ACCESSIBLE_NAME); + this._itemNavigation._navigationMode = NavigationMode.Auto; } static i18nFioriBundle: I18nBundle; diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts index 8fd0bb1a2fe1..4b1f19576ffc 100644 --- a/packages/fiori/src/NotificationListGroupItem.ts +++ b/packages/fiori/src/NotificationListGroupItem.ts @@ -189,12 +189,12 @@ class NotificationListGroupItem extends NotificationListItemBase { } async _onkeydown(e: KeyboardEvent) { - await super._onkeydown(e); - if (!this.focused) { return; } + await super._onkeydown(e); + const space = isSpace(e); const plus = isPlus(e); const minus = isMinus(e); @@ -209,6 +209,7 @@ class NotificationListGroupItem extends NotificationListItemBase { // expand if (this.collapsed) { this.toggleCollapsed(); + e.stopImmediatePropagation(); } } @@ -216,6 +217,7 @@ class NotificationListGroupItem extends NotificationListItemBase { // collapse if (!this.collapsed) { this.toggleCollapsed(); + e.stopImmediatePropagation(); } } } diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts index e07c51e5afdb..6d5d66ffa5f9 100644 --- a/packages/fiori/src/NotificationListItem.ts +++ b/packages/fiori/src/NotificationListItem.ts @@ -1,5 +1,5 @@ import { - isSpace, isEnter, isDelete, isF10Shift, isEnterShift, isUp, isDown, + isSpace, isDelete, isF10Shift, isEnterShift, isUp, isDown, } from "@ui5/webcomponents-base/dist/Keys.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; @@ -484,10 +484,6 @@ class NotificationListItem extends NotificationListItemBase { async _onkeydown(e: KeyboardEvent) { await super._onkeydown(e); - if (isEnter(e)) { - this.fireItemPress(e); - } - if (isF10Shift(e)) { e.preventDefault(); } @@ -496,6 +492,11 @@ class NotificationListItem extends NotificationListItemBase { } focusSameItemOnNextRow(e: KeyboardEvent) { + const target = e.target as HTMLElement; + if (!target || target.hasAttribute("ui5-menu-item")) { + return; + } + if (this.focused || (!isUp(e) && !isDown(e))) { return; } @@ -515,11 +516,6 @@ class NotificationListItem extends NotificationListItemBase { return; } - const target = e.target as HTMLElement; - if (!target) { - return; - } - const sameItemOnNextRow = nextItem.getHeaderDomRef()!.querySelector(`.${target.className}`) as HTMLElement; if (sameItemOnNextRow && sameItemOnNextRow.offsetParent) { sameItemOnNextRow.focus(); diff --git a/packages/fiori/src/NotificationListItemBase.ts b/packages/fiori/src/NotificationListItemBase.ts index 6a8c53492adf..e36766851c7c 100644 --- a/packages/fiori/src/NotificationListItemBase.ts +++ b/packages/fiori/src/NotificationListItemBase.ts @@ -2,9 +2,12 @@ import { isSpace, isF2 } from "@ui5/webcomponents-base/dist/Keys.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; +import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js"; +import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js"; import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js"; import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js"; +import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js"; /** * @class @@ -64,8 +67,9 @@ class NotificationListItemBase extends ListItemBase { async _onkeydown(e: KeyboardEvent) { super._onkeydown(e); - if (isSpace(e)) { + if (isSpace(e) && getEventMark(e) !== "button") { e.preventDefault(); + return; } if (isF2(e)) { @@ -83,6 +87,12 @@ class NotificationListItemBase extends ListItemBase { return this.getFocusDomRef(); } + shouldForwardTabAfter() { + const aContent = getTabbableElements(this.getHeaderDomRef()!); + + return aContent.length === 0 || (aContent[aContent.length - 1] === getActiveElement()); + } + static async onDefine() { NotificationListItemBase.i18nFioriBundle = await getI18nBundle("@ui5/webcomponents-fiori"); } diff --git a/packages/fiori/test/pages/NotificationList_test_page.html b/packages/fiori/test/pages/NotificationList_test_page.html index beb4517d136b..c7098c2dac05 100644 --- a/packages/fiori/test/pages/NotificationList_test_page.html +++ b/packages/fiori/test/pages/NotificationList_test_page.html @@ -170,7 +170,9 @@ - +
+
+ Some button