;
+
_markupText = "";
@i18n("@ui5/webcomponents-fiori")
@@ -133,8 +148,20 @@ class SearchItem extends ListItemBase {
}
async _onkeydown(e: KeyboardEvent) {
+ // Handle manual tab navigation between action items
+ if (isTabNext(e) || isTabPrevious(e)) {
+ const handled = this._handleTabNavigation(e);
+ if (handled) {
+ e.preventDefault();
+ e.stopPropagation();
+ return;
+ }
+ }
+
+ // Call super for other key handling
super._onkeydown(e);
+ // Handle space/enter when focus is within action items
if (this.getFocusDomRef()!.matches(":has(:focus-within)")) {
if (isSpace(e) || isEnter(e)) {
e.preventDefault();
@@ -142,6 +169,7 @@ class SearchItem extends ListItemBase {
}
}
+ // Handle F2 for focus navigation
if (isF2(e)) {
e.stopImmediatePropagation();
const activeElement = getActiveElement();
@@ -160,6 +188,51 @@ class SearchItem extends ListItemBase {
}
}
+ /**
+ * Handles manual tab navigation between action items and delete button
+ */
+ _handleTabNavigation(e: KeyboardEvent): boolean {
+ const focusDomRef = this.getFocusDomRef();
+ if (!focusDomRef) {
+ return false;
+ }
+
+ const tabbableElements = getTabbableElements(focusDomRef);
+ if (tabbableElements.length === 0) {
+ return false;
+ }
+
+ const activeElement = getActiveElement() as HTMLElement;
+ const currentIndex = tabbableElements.indexOf(activeElement);
+
+ if (currentIndex === -1) {
+ return false;
+ }
+
+ let nextElement: HTMLElement | null = null;
+
+ if (isTabNext(e)) {
+ if (currentIndex < tabbableElements.length - 1) {
+ nextElement = tabbableElements[currentIndex + 1];
+ } else {
+ return false;
+ }
+ } else if (isTabPrevious(e)) {
+ if (currentIndex > 0) {
+ nextElement = tabbableElements[currentIndex - 1];
+ } else {
+ return false;
+ }
+ }
+
+ if (nextElement) {
+ nextElement.focus();
+ return true;
+ }
+
+ return false;
+ }
+
_onDeleteButtonClick() {
this.fireDecoratorEvent("delete");
}
@@ -177,9 +250,24 @@ class SearchItem extends ListItemBase {
this._markupText = this.highlightText ? generateHighlightedMarkup((this.text || ""), this.highlightText) : encodeXML(this.text || "");
}
+ /**
+ * Determines if the current search item either has no tabbable content or
+ * [Tab] is performed on the last tabbable content item.
+ * This method is crucial for proper tab navigation between action items.
+ */
+ shouldForwardTabAfter() {
+ const aContent = getTabbableElements(this.getFocusDomRef()!);
+
+ return aContent.length === 0 || (aContent[aContent.length - 1] === getActiveElement());
+ }
+
get _deleteButtonTooltip() {
return SearchItem.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON);
}
+
+ get hasActions() {
+ return !!this.actions.length;
+ }
}
SearchItem.define();
diff --git a/packages/fiori/src/SearchItemTemplate.tsx b/packages/fiori/src/SearchItemTemplate.tsx
index 489a516e069d..18affbe31b5e 100644
--- a/packages/fiori/src/SearchItemTemplate.tsx
+++ b/packages/fiori/src/SearchItemTemplate.tsx
@@ -44,14 +44,22 @@ export default function SearchFieldTemplate(this: SearchItem) {
{this.description}
- {this.deletable &&
-
+ {this.hasActions &&
+
+
+ }
+
+ {this.deletable &&
+
+ }
+
+ Search with Actions - Example of flexible action slot
+
+
+
+
+
+
+
+
+ Important
+
+
+
+ Hover over search items to see secondary actions. Use Tab/Shift+Tab to navigate between action buttons and delete button.
+
+
+
Search with Suggestions - Filter by typing