fix(ui5-color-palette): improve keyboard navigation#13342
fix(ui5-color-palette): improve keyboard navigation#13342NHristov-sap wants to merge 7 commits intomainfrom
Conversation
|
🚀 Deployed on https://pr-13342--ui5-webcomponents-preview.netlify.app |
|
Theres an issue with the recent colors in the colorpalettepopover - when you select a color from the recent colors you cant move with <> arrows until you leave the recent colors section |
Fixed. |
| targetRow = Math.max(lastRowWithCol, 0); | ||
| } | ||
| let targetIndex = targetRow * rowSize + col; | ||
| if (targetIndex >= this.displayedColors.length) { |
There was a problem hiding this comment.
this line shouldnt be here
| } | ||
| } | ||
|
|
||
| _onColorContainerKeyDown(e: KeyboardEvent) { |
There was a problem hiding this comment.
another small issue - home and end "end" on elements that are at the start or end of a container (eg. home won't loop around when the focus is already on the defaultColors button. This isnt the case if the color palette is at the start or the end, if the palette is the last element, pressing "end" will loop the focus to the defaultColors button
3 participants
The previous keyboard navigation in the
ui5-color-paletteandui5-color-palette-popovertreated all elements as a flat list, cycling through them sequentially with all arrow keys.This change introduces proper grid-aware navigation: Arrow Up/Down moves vertically between sections (Default Color button, palette grid, More Colors button, recent colors) while preserving the user's column position, and Arrow Left/Right moves horizontally within grids only. The Default Color and More Colors buttons no longer react to Left/Right arrows since they are standalone elements outside the grid. When navigating vertically into a partial row that lacks the remembered column, focus correctly walks up to find the nearest full row containing that column rather than snapping to the last item.