From aa7b4ab6ad66e01e032e3bbd91cffae3116b3b0f Mon Sep 17 00:00:00 2001
From: Stoyan <abvsuxhard@gmail.com>
Date: Tue, 27 Jan 2026 12:18:26 +0200
Subject: [PATCH 1/3] fix(ui5-color-picker): add accessibleName property for
 unique landmarks

---
 packages/main/src/ColorPicker.ts          | 13 ++++++++++++-
 packages/main/src/ColorPickerTemplate.tsx |  4 ++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts
index 7e3230866f0c..34ba38b3548e 100644
--- a/packages/main/src/ColorPicker.ts
+++ b/packages/main/src/ColorPicker.ts
@@ -137,6 +137,15 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	@property({ type: Boolean })
 	simplified = false;
 
+	/**
+	 * Defines the accessible name of the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.20.0
+	 */
+	@property()
+	accessibleName?: string;
+
 	/**
 	 * Defines the current main color which is selected via the hue slider and is shown in the main color square.
 	 * @private
@@ -557,7 +566,9 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	}
 
 	get colorPickerLabel() {
-		return ColorPicker.i18nBundle.getText(COLORPICKER_LABEL);
+		return this.accessibleName
+			? `${ColorPicker.i18nBundle.getText(COLORPICKER_LABEL)} ${this.accessibleName}`
+			: ColorPicker.i18nBundle.getText(COLORPICKER_LABEL);
 	}
 
 	get sliderGroupLabel() {
diff --git a/packages/main/src/ColorPickerTemplate.tsx b/packages/main/src/ColorPickerTemplate.tsx
index cc9f78868ddc..4a31c5ffa4ea 100644
--- a/packages/main/src/ColorPickerTemplate.tsx
+++ b/packages/main/src/ColorPickerTemplate.tsx
@@ -6,7 +6,7 @@ import Button from "./Button.js";
 
 export default function ColorPickerTemplate(this: ColorPicker) {
 	return (
-		<section
+		<div
 			class="ui5-color-picker-root"
 			role="group"
 			aria-label={this.colorPickerLabel}
@@ -132,6 +132,6 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					</div>
 				</div>
 			}
-		</section>
+		</div>
 	);
 }

From cc4686f7640b47ba90bafd587b0349787a6fe46e Mon Sep 17 00:00:00 2001
From: Stoyan <abvsuxhard@gmail.com>
Date: Mon, 2 Feb 2026 15:56:36 +0200
Subject: [PATCH 2/3] add accessibleNameRef

---
 packages/main/src/ColorPicker.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts
index 34ba38b3548e..278139c354bb 100644
--- a/packages/main/src/ColorPicker.ts
+++ b/packages/main/src/ColorPicker.ts
@@ -8,6 +8,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import {
 	getRGBColor,
@@ -146,6 +147,15 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	@property()
 	accessibleName?: string;
 
+	/**
+	 * Receives id(or many ids) of the elements that label the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.20.0
+	 */
+	@property()
+	accessibleNameRef?: string;
+
 	/**
 	 * Defines the current main color which is selected via the hue slider and is shown in the main color square.
 	 * @private
@@ -566,8 +576,9 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	}
 
 	get colorPickerLabel() {
-		return this.accessibleName
-			? `${ColorPicker.i18nBundle.getText(COLORPICKER_LABEL)} ${this.accessibleName}`
+		const effectiveLabel = getEffectiveAriaLabelText(this);
+		return effectiveLabel
+			? `${ColorPicker.i18nBundle.getText(COLORPICKER_LABEL)} ${effectiveLabel}`
 			: ColorPicker.i18nBundle.getText(COLORPICKER_LABEL);
 	}
 

From 43e12e1c03d0d9c338f20437586199f634db9f90 Mon Sep 17 00:00:00 2001
From: Stoyan <abvsuxhard@gmail.com>
Date: Wed, 4 Feb 2026 09:24:53 +0200
Subject: [PATCH 3/3] fix lint change

---
 packages/main/src/ColorPicker.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts
index e1bda6179ff9..f9d4fa461ef2 100644
--- a/packages/main/src/ColorPicker.ts
+++ b/packages/main/src/ColorPicker.ts
@@ -7,7 +7,6 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import {