From f336b318552f03b137f363f1cb95e1426f2b972a Mon Sep 17 00:00:00 2001 From: Stoyan Date: Thu, 2 Apr 2026 11:14:02 +0300 Subject: [PATCH 1/4] test(ui5-color-palette-popover): investigation of failing tests in production --- .../cypress/specs/ColorPalettePopover.cy.tsx | 90 +++++-------------- 1 file changed, 23 insertions(+), 67 deletions(-) diff --git a/packages/main/cypress/specs/ColorPalettePopover.cy.tsx b/packages/main/cypress/specs/ColorPalettePopover.cy.tsx index bad0c933f675..20b6aa52b684 100644 --- a/packages/main/cypress/specs/ColorPalettePopover.cy.tsx +++ b/packages/main/cypress/specs/ColorPalettePopover.cy.tsx @@ -543,7 +543,7 @@ describe("Color Popover Palette arrow keys navigation", () => { }); describe("Color Popover Palette Home and End keyboard navigation", () => { - it.skip("should navigate with Home/End when showDefaultColor is set", () => { + it("should navigate with Home/End when showDefaultColor is set", () => { cy.mount( ); @@ -551,67 +551,34 @@ describe("Color Popover Palette Home and End keyboard navigation", () => { cy.get("[ui5-color-palette-popover]") .ui5ColorPalettePopoverOpen({ opener: "btnPalette" }); - cy.get("[ui5-color-palette-popover]") - .should("have.attr", "open"); - - cy.get("[ui5-color-palette-popover]") - .ui5GetColorPaletteInPopover() - .as("colorPalette"); - - cy.get("@colorPalette") - .ui5GetColorPaletteDefaultButton() - .as("defaultColorButton") - .should("be.visible") - .and("have.focus"); - - cy.get("@defaultColorButton") - .should("have.focus") - .shadow() - .find("button[data-sap-focus-ref]") - .should("have.focus"); + // Default Color button should be focused initially + cy.focused() + .should("have.attr", "aria-label", "Default Color"); - cy.get("@defaultColorButton") + // End → last color item (red) + cy.focused() .realPress("End"); - cy.get("[ui5-color-palette-popover]") - .ui5GetColorPaletteItem(3) - .as("lastColorPaletteItem") - .should("be.visible") - .and("have.attr", "value", "red"); - - cy.get("@lastColorPaletteItem") - .should("have.focus") - .shadow() - .find(".ui5-cp-item") + cy.focused() .should("have.attr", "tabindex", "0") .and("have.attr", "aria-label") .and("include", "red"); + // Home → first color item (cyan) cy.focused() .realPress("Home"); - cy.get("[ui5-color-palette-popover]") - .ui5GetColorPaletteItem(0) - .as("firstColorPaletteItem") - .should("be.visible") - .and("have.attr", "value", "cyan"); - - cy.get("@firstColorPaletteItem") - .should("have.focus") - .shadow() - .find(".ui5-cp-item") + cy.focused() .should("have.attr", "tabindex", "0") .and("have.attr", "aria-label") .and("include", "cyan"); + // Home again → Default Color button cy.focused() .realPress("Home"); cy.focused() .should("have.attr", "aria-label", "Default Color"); - - cy.get("@defaultColorButton") - .should("have.focus"); }); it("should navigate with Home/End keys when showMoreColors is set", () => { @@ -640,42 +607,31 @@ describe("Color Popover Palette Home and End keyboard navigation", () => { .should("have.attr", "aria-label", "More Colors..."); }); - it.skip("should navigate with Home/End when showDefaultColor & showMoreColors are set", () => { + it("should navigate with Home/End when showDefaultColor & showMoreColors are set", () => { cy.mount( ); - cy.get("[ui5-color-palette-popover]") - .as("colorPalettePopover") + cy.get("[ui5-color-palette-popover]") .ui5ColorPalettePopoverOpen({ opener: "btnPalette" }); - cy.get("@colorPalettePopover") - .ui5GetColorPaletteInPopover() - .as("colorPalette"); - - cy.get("@colorPalette") - .ui5GetColorPaletteDefaultButton() - .as("defaultColorButton"); + // Default Color button should be focused initially + cy.focused() + .should("have.attr", "aria-label", "Default Color"); - cy.get("@defaultColorButton") - .should("have.focus") + // End → More Colors button + cy.focused() .realPress("End"); - cy.get("@colorPalette") - .ui5GetColorPaletteMoreColorsButton() - .as("moreColorsButton") - .should("be.visible"); - - cy.get("@moreColorsButton") - .should("exist") - .and("be.visible") - .and("have.focus"); + cy.focused() + .should("have.attr", "aria-label", "More Colors..."); - cy.get("@moreColorsButton") + // Home → Default Color button + cy.focused() .realPress("Home"); - cy.get("@defaultColorButton") - .should("have.focus"); + cy.focused() + .should("have.attr", "aria-label", "Default Color"); }); it("should navigate with End key", () => { From 41e4b2865b0fc81947aaf9cecf09e8533f720167 Mon Sep 17 00:00:00 2001 From: Stoyan Date: Thu, 2 Apr 2026 15:55:34 +0300 Subject: [PATCH 2/4] use sync focus for keyboard navigation buttons --- packages/main/src/ColorPalette.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index 30787ef8aa1b..9b5242d1f59a 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -725,8 +725,11 @@ class ColorPalette extends UI5Element { */ _focusDefaultColor(): boolean { if (this.showDefaultColor && this._defaultColorButton) { - this._defaultColorButton.focus(); - return true; + const focusDomRef = this._defaultColorButton.getFocusDomRef(); + if (focusDomRef) { + focusDomRef.focus(); + return true; + } } return false; } @@ -737,8 +740,11 @@ class ColorPalette extends UI5Element { */ _focusMoreColors(): boolean { if (this.showMoreColors && this._moreColorsButton) { - this._moreColorsButton.focus(); - return true; + const focusDomRef = this._moreColorsButton.getFocusDomRef(); + if (focusDomRef) { + focusDomRef.focus(); + return true; + } } return false; } From 91407289526ebaac90e78d972d471faf75788291 Mon Sep 17 00:00:00 2001 From: Stoyan Date: Fri, 3 Apr 2026 15:15:28 +0300 Subject: [PATCH 3/4] Revert "use sync focus for keyboard navigation buttons" This reverts commit 41e4b2865b0fc81947aaf9cecf09e8533f720167. --- packages/main/src/ColorPalette.ts | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index 9b5242d1f59a..30787ef8aa1b 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -725,11 +725,8 @@ class ColorPalette extends UI5Element { */ _focusDefaultColor(): boolean { if (this.showDefaultColor && this._defaultColorButton) { - const focusDomRef = this._defaultColorButton.getFocusDomRef(); - if (focusDomRef) { - focusDomRef.focus(); - return true; - } + this._defaultColorButton.focus(); + return true; } return false; } @@ -740,11 +737,8 @@ class ColorPalette extends UI5Element { */ _focusMoreColors(): boolean { if (this.showMoreColors && this._moreColorsButton) { - const focusDomRef = this._moreColorsButton.getFocusDomRef(); - if (focusDomRef) { - focusDomRef.focus(); - return true; - } + this._moreColorsButton.focus(); + return true; } return false; } From 075d92842c60b6c9fb108e89849552854b1a39a9 Mon Sep 17 00:00:00 2001 From: Stoyan Date: Fri, 3 Apr 2026 15:16:23 +0300 Subject: [PATCH 4/4] move onkey* hanlders from the buttons to the wrapper elements --- packages/main/src/ColorPaletteTemplate.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/main/src/ColorPaletteTemplate.tsx b/packages/main/src/ColorPaletteTemplate.tsx index 90b3ca10bfff..e5cf921844aa 100644 --- a/packages/main/src/ColorPaletteTemplate.tsx +++ b/packages/main/src/ColorPaletteTemplate.tsx @@ -18,13 +18,14 @@ export default function ColorPaletteTemplate(this: ColorPalette) { onMouseDown={this._onmousedown} > {this.showDefaultColor && -
+
@@ -42,13 +43,14 @@ export default function ColorPaletteTemplate(this: ColorPalette) {
{this.showMoreColors && -
+