diff --git a/packages/main/cypress/specs/ColorPalettePopover.cy.tsx b/packages/main/cypress/specs/ColorPalettePopover.cy.tsx
index c0209b551c66..ba96491180a3 100644
--- a/packages/main/cypress/specs/ColorPalettePopover.cy.tsx
+++ b/packages/main/cypress/specs/ColorPalettePopover.cy.tsx
@@ -541,7 +541,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(
             <SimplePalettePopover showDefaultColor={true} />
         );
@@ -638,7 +638,7 @@ 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(
             <SimplePalettePopover showDefaultColor={true} showMoreColors={true} />
         );
diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts
index 3e6bed653a41..07d4776dc9cb 100644
--- a/packages/main/src/ColorPalette.ts
+++ b/packages/main/src/ColorPalette.ts
@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { instanceOfUI5Element } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
@@ -706,8 +707,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;
 	}
@@ -718,8 +722,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;
 	}
@@ -800,7 +807,10 @@ class ColorPalette extends UI5Element {
 
 	focusColorElement(element: ColorPaletteNavigationItem, itemNavigation: ItemNavigation) {
 		itemNavigation.setCurrentItem(element);
+		// Use 10ms delay to ensure the re-render from forcedTabIndex property change completes
+		// setTimeout(() => {
 		itemNavigation._focusCurrentItem();
+		// }, 10);
 	}
 
 	onColorPickerChange(e: Event) {
diff --git a/packages/main/src/ColorPaletteItemTemplate.tsx b/packages/main/src/ColorPaletteItemTemplate.tsx
index 6df6879e012c..52d060c15cde 100644
--- a/packages/main/src/ColorPaletteItemTemplate.tsx
+++ b/packages/main/src/ColorPaletteItemTemplate.tsx
@@ -4,6 +4,7 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
 	return (
 		<div
 			class="ui5-cp-item"
+			data-sap-focus-ref
 			tabindex={parseInt(this.forcedTabIndex)}
 			role="button"
 			aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}