feat(ui5-search) add actions to search items #12405
Open
+451
−10
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
BGSOFUIRILA-4120
ndeshev
force-pushed
the
search-item-icon
branch
from
97cafe8 to
fb90610
Compare
|
🚀 Deployed on https://pr-12405--ui5-webcomponents-preview.netlify.app |
add tab navigation add tests
…onents into search-item-icon
implement tab navigation looping for search item action buttons
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new actions slot to the ui5-search-item component, enabling developers to include interactive elements (buttons, icons, tags) alongside the delete button. The implementation includes keyboard navigation support with Tab/Shift+Tab cycling through action elements and focus management within search items using F2 for navigation entry.
Key Changes:
- Added
actionsslot toui5-search-itemwith JSDoc documentation - Implemented tab navigation with focus looping between action buttons and delete button
- Added comprehensive Cypress tests covering various tab navigation scenarios
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/fiori/src/SearchItem.ts | Adds actions slot, implements _handleTabNavigation() method for focus management, and updates keyboard event handling |
| packages/fiori/src/SearchItemTemplate.tsx | Adds template rendering for actions slot with conditional display |
| packages/fiori/src/themes/SearchItem.css | Adds styling for actions container with hover/focus-within visibility and flexbox layout |
| packages/fiori/test/pages/Search.html | Adds demo examples showcasing various action slot configurations |
| packages/fiori/cypress/specs/Search.cy.tsx | Adds comprehensive test coverage for tab navigation, focus looping, and action button interactions |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add Actions Slot Support to
ui5-searchThis update adds a new
actionsslot toui5-search-itemcomponent, allowing developers to place interactive elements like buttons or icons alongside the delete button. The feature includes keyboard navigation support and focus management - when users navigate through action elements with Tab, focus cycles within the search item elements.BGSOFUIRILA-4120