From cd3cc95baf49d4dbe021958b1b4ca7cdc7a0b848 Mon Sep 17 00:00:00 2001
From: Srirang Kalantri <srirangkalantri0@gmail.com>
Date: Mon, 19 Oct 2026 11:56:17 +0530
Subject: [PATCH 1/2] fix: add label for accessibility

---
 .../color-picker-native/CHANGELOG.md          |  4 +++
 .../color-picker-native/package.json          |  2 +-
 .../color-picker-native/src/ColorPicker.tsx   |  4 +++
 .../color-picker-native/src/ColorPicker.xml   | 29 ++++++++++++++-----
 .../src/__tests__/ColorPicker.spec.tsx        | 21 ++++++++++++++
 .../__snapshots__/ColorPicker.spec.tsx.snap   | 10 +++++++
 .../src/components/PickerSlider.tsx           |  2 ++
 .../color-picker-native/src/package.xml       |  2 +-
 .../typings/ColorPickerProps.d.ts             | 10 ++++++-
 9 files changed, 74 insertions(+), 10 deletions(-)

diff --git a/packages/pluggableWidgets/color-picker-native/CHANGELOG.md b/packages/pluggableWidgets/color-picker-native/CHANGELOG.md
index 84f5fb6b2..0d0a29282 100644
--- a/packages/pluggableWidgets/color-picker-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/color-picker-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We added screen reader label properties for the hue, saturation, brightness and transparency sliders.
+
 ### Changed
 
 -   We updated tinycolor2 to 1.6.0.
diff --git a/packages/pluggableWidgets/color-picker-native/package.json b/packages/pluggableWidgets/color-picker-native/package.json
index 128f09f13..823bf544b 100644
--- a/packages/pluggableWidgets/color-picker-native/package.json
+++ b/packages/pluggableWidgets/color-picker-native/package.json
@@ -1,7 +1,7 @@
 {
   "name": "color-picker-native",
   "widgetName": "ColorPicker",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
diff --git a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.tsx b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.tsx
index f4372e5bd..9cfe175dd 100644
--- a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.tsx
+++ b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.tsx
@@ -110,6 +110,7 @@ export function ColorPicker(props: Props): ReactElement | null {
             )}
             <PickerSlider
                 testID={`${props.name}$hue`}
+                accessibilityLabel={props.hueLabel?.value || "Hue"}
                 value={color.h}
                 onValueChange={onChangeHue}
                 onValueChangeComplete={onChangeComplete}
@@ -128,6 +129,7 @@ export function ColorPicker(props: Props): ReactElement | null {
             {props.showSaturation && !colorValue.readOnly && (
                 <PickerSlider
                     testID={`${props.name}$saturation`}
+                    accessibilityLabel={props.saturationLabel?.value || "Saturation"}
                     value={color.s}
                     onValueChange={onChangeSaturation}
                     onValueChangeComplete={onChangeComplete}
@@ -142,6 +144,7 @@ export function ColorPicker(props: Props): ReactElement | null {
             {props.showLightness && !colorValue.readOnly && (
                 <PickerSlider
                     testID={`${props.name}$lightness`}
+                    accessibilityLabel={props.lightnessLabel?.value || "Brightness"}
                     value={color.l}
                     onValueChange={onChangeLightness}
                     onValueChangeComplete={onChangeComplete}
@@ -156,6 +159,7 @@ export function ColorPicker(props: Props): ReactElement | null {
             {format !== "hex" && props.showAlpha && !colorValue.readOnly && (
                 <PickerSlider
                     testID={`${props.name}$alpha`}
+                    accessibilityLabel={props.alphaLabel?.value || "Transparency"}
                     value={color.a}
                     onValueChange={onChangeAlpha}
                     onValueChangeComplete={onChangeComplete}
diff --git a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.xml b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.xml
index 5c616bc7a..67a1a8d90 100644
--- a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.xml
+++ b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.xml
@@ -1,8 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?>
-<widget id="com.mendix.widget.native.colorpicker.ColorPicker" supportedPlatform="Native" needsEntityContext="true"
-        offlineCapable="true" pluginWidget="true" xmlns="http://www.mendix.com/widget/1.0/"
-        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-        xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../../../node_modules/mendix/custom_widget.xsd">
+<?xml version="1.0" encoding="utf-8" ?>
+<widget id="com.mendix.widget.native.colorpicker.ColorPicker" supportedPlatform="Native" needsEntityContext="true" offlineCapable="true" pluginWidget="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../../../node_modules/mendix/custom_widget.xsd">
     <name>Color picker</name>
     <description>Pick a color from a circular color input</description>
     <studioProCategory>Input elements</studioProCategory>
@@ -14,7 +11,7 @@
                     <caption>Color</caption>
                     <description>Attribute containing a valid color like #d0d0d0, red, rgba(255,255,255,0).</description>
                     <attributeTypes>
-                        <attributeType name="String"/>
+                        <attributeType name="String" />
                     </attributeTypes>
                 </property>
                 <property key="format" type="enumeration" defaultValue="hex">
@@ -47,6 +44,24 @@
                     <description>Enables a slider to make the color more transparent or opaque.</description>
                 </property>
             </propertyGroup>
+            <propertyGroup caption="Accessibility">
+                <property key="hueLabel" type="textTemplate" required="false">
+                    <caption>Hue label</caption>
+                    <description>Screen reader label of the hue slider. Defaults to "Hue".</description>
+                </property>
+                <property key="saturationLabel" type="textTemplate" required="false">
+                    <caption>Saturation label</caption>
+                    <description>Screen reader label of the saturation slider. Defaults to "Saturation".</description>
+                </property>
+                <property key="lightnessLabel" type="textTemplate" required="false">
+                    <caption>Brightness label</caption>
+                    <description>Screen reader label of the brightness slider. Defaults to "Brightness".</description>
+                </property>
+                <property key="alphaLabel" type="textTemplate" required="false">
+                    <caption>Transparency label</caption>
+                    <description>Screen reader label of the transparency slider. Defaults to "Transparency".</description>
+                </property>
+            </propertyGroup>
             <propertyGroup caption="Events">
                 <property key="onChange" type="action" required="false">
                     <caption>On change</caption>
@@ -55,7 +70,7 @@
             </propertyGroup>
             <propertyGroup caption="Common">
                 <systemProperty key="Visibility" />
-                <systemProperty key="Name"/>
+                <systemProperty key="Name" />
             </propertyGroup>
         </propertyGroup>
     </properties>
diff --git a/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx b/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx
index db85160af..ef2f25784 100644
--- a/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx
+++ b/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx
@@ -1,4 +1,5 @@
 import { actionValue, EditableValueBuilder } from "@mendix/piw-utils-internal";
+import { DynamicValue, ValueStatus } from "mendix";
 import { View } from "react-native";
 import { fireEvent, render, RenderAPI } from "@testing-library/react-native";
 import { ReactTestInstance } from "react-test-renderer";
@@ -222,6 +223,26 @@ describe("Color Picker", () => {
         });
     });
 
+    it("labels the sliders for screen readers", () => {
+        const label = (value: string): DynamicValue<string> => ({ status: ValueStatus.Available, value });
+        const component = render(
+            <ColorPicker
+                {...defaultProps}
+                format="rgb"
+                showAlpha
+                hueLabel={label("Tint")}
+                saturationLabel={label("Intensity")}
+            />
+        );
+
+        const labelOf = (name: string): string =>
+            component.getByTestId(`color-picker-test$${name}`).props.accessibilityLabel;
+        expect(labelOf("hue")).toBe("Tint");
+        expect(labelOf("saturation")).toBe("Intensity");
+        expect(labelOf("lightness")).toBe("Brightness");
+        expect(labelOf("alpha")).toBe("Transparency");
+    });
+
     it("changes the value with screen reader actions", () => {
         const onChangeAction = actionValue();
         const component = render(<ColorPicker {...defaultProps} onChange={onChangeAction} />);
diff --git a/packages/pluggableWidgets/color-picker-native/src/__tests__/__snapshots__/ColorPicker.spec.tsx.snap b/packages/pluggableWidgets/color-picker-native/src/__tests__/__snapshots__/ColorPicker.spec.tsx.snap
index 6c301bd8b..34f5a5531 100644
--- a/packages/pluggableWidgets/color-picker-native/src/__tests__/__snapshots__/ColorPicker.spec.tsx.snap
+++ b/packages/pluggableWidgets/color-picker-native/src/__tests__/__snapshots__/ColorPicker.spec.tsx.snap
@@ -1118,6 +1118,7 @@ exports[`Color Picker renders 1`] = `
           },
         ]
       }
+      accessibilityLabel="Hue"
       accessibilityRole="adjustable"
       accessibilityState={
         {
@@ -2330,6 +2331,7 @@ exports[`Color Picker renders 1`] = `
           },
         ]
       }
+      accessibilityLabel="Saturation"
       accessibilityRole="adjustable"
       accessibilityState={
         {
@@ -3542,6 +3544,7 @@ exports[`Color Picker renders 1`] = `
           },
         ]
       }
+      accessibilityLabel="Brightness"
       accessibilityRole="adjustable"
       accessibilityState={
         {
@@ -4776,6 +4779,7 @@ exports[`Color Picker renders with alpha slider 1`] = `
           },
         ]
       }
+      accessibilityLabel="Hue"
       accessibilityRole="adjustable"
       accessibilityState={
         {
@@ -5988,6 +5992,7 @@ exports[`Color Picker renders with alpha slider 1`] = `
           },
         ]
       }
+      accessibilityLabel="Saturation"
       accessibilityRole="adjustable"
       accessibilityState={
         {
@@ -7200,6 +7205,7 @@ exports[`Color Picker renders with alpha slider 1`] = `
           },
         ]
       }
+      accessibilityLabel="Brightness"
       accessibilityRole="adjustable"
       accessibilityState={
         {
@@ -8412,6 +8418,7 @@ exports[`Color Picker renders with alpha slider 1`] = `
           },
         ]
       }
+      accessibilityLabel="Transparency"
       accessibilityRole="adjustable"
       accessibilityState={
         {
@@ -9647,6 +9654,7 @@ exports[`Color Picker renders with custom style 1`] = `
           },
         ]
       }
+      accessibilityLabel="Hue"
       accessibilityRole="adjustable"
       accessibilityState={
         {
@@ -10859,6 +10867,7 @@ exports[`Color Picker renders with custom style 1`] = `
           },
         ]
       }
+      accessibilityLabel="Saturation"
       accessibilityRole="adjustable"
       accessibilityState={
         {
@@ -12071,6 +12080,7 @@ exports[`Color Picker renders with custom style 1`] = `
           },
         ]
       }
+      accessibilityLabel="Brightness"
       accessibilityRole="adjustable"
       accessibilityState={
         {
diff --git a/packages/pluggableWidgets/color-picker-native/src/components/PickerSlider.tsx b/packages/pluggableWidgets/color-picker-native/src/components/PickerSlider.tsx
index bb91f9b6f..072c6c32a 100644
--- a/packages/pluggableWidgets/color-picker-native/src/components/PickerSlider.tsx
+++ b/packages/pluggableWidgets/color-picker-native/src/components/PickerSlider.tsx
@@ -14,6 +14,7 @@ interface PickerSlidersProps {
     trackStyle?: ViewStyle;
     disabled?: boolean;
     testID?: string;
+    accessibilityLabel?: string;
 }
 
 export function PickerSlider(props: PropsWithChildren<PickerSlidersProps>): ReactElement {
@@ -22,6 +23,7 @@ export function PickerSlider(props: PropsWithChildren<PickerSlidersProps>): Reac
             <View style={styles.gradient}>{props.children}</View>
             <Slider
                 testID={props.testID}
+                accessibilityLabel={props.accessibilityLabel}
                 value={props.value}
                 step={props.step}
                 trackClickable
diff --git a/packages/pluggableWidgets/color-picker-native/src/package.xml b/packages/pluggableWidgets/color-picker-native/src/package.xml
index a15fe6417..ca87247bd 100644
--- a/packages/pluggableWidgets/color-picker-native/src/package.xml
+++ b/packages/pluggableWidgets/color-picker-native/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="ColorPicker" version="2.4.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="ColorPicker" version="2.4.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="ColorPicker.xml" />
         </widgetFiles>
diff --git a/packages/pluggableWidgets/color-picker-native/typings/ColorPickerProps.d.ts b/packages/pluggableWidgets/color-picker-native/typings/ColorPickerProps.d.ts
index fdf2e2203..0ac89b4a2 100644
--- a/packages/pluggableWidgets/color-picker-native/typings/ColorPickerProps.d.ts
+++ b/packages/pluggableWidgets/color-picker-native/typings/ColorPickerProps.d.ts
@@ -3,7 +3,7 @@
  * WARNING: All changes made to this file will be overwritten
  * @author Mendix Widgets Framework Team
  */
-import { ActionValue, EditableValue } from "mendix";
+import { ActionValue, DynamicValue, EditableValue } from "mendix";
 import { CSSProperties } from "react";
 
 export type FormatEnum = "hex" | "hsl" | "hsv" | "rgb";
@@ -17,6 +17,10 @@ export interface ColorPickerProps<Style> {
     showSaturation: boolean;
     showLightness: boolean;
     showAlpha: boolean;
+    hueLabel?: DynamicValue<string>;
+    saturationLabel?: DynamicValue<string>;
+    lightnessLabel?: DynamicValue<string>;
+    alphaLabel?: DynamicValue<string>;
     onChange?: ActionValue;
 }
 
@@ -37,5 +41,9 @@ export interface ColorPickerPreviewProps {
     showSaturation: boolean;
     showLightness: boolean;
     showAlpha: boolean;
+    hueLabel: string;
+    saturationLabel: string;
+    lightnessLabel: string;
+    alphaLabel: string;
     onChange: {} | null;
 }

From ebcbe87a2b172447e1e57529af0049e6c5c2c65c Mon Sep 17 00:00:00 2001
From: Srirang Kalantri <srirangkalantri0@gmail.com>
Date: Mon, 19 Oct 2026 16:00:47 +0530
Subject: [PATCH 2/2] fix: add accessibility labels

---
 .../src/ColorPicker.editorConfig.ts                   |  8 ++++++++
 .../color-picker-native/src/ColorPicker.tsx           |  8 ++++----
 .../color-picker-native/src/ColorPicker.xml           |  4 ++++
 .../src/__tests__/ColorPicker.spec.tsx                | 11 ++++++++++-
 .../color-picker-native/typings/ColorPickerProps.d.ts |  2 ++
 5 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.editorConfig.ts b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.editorConfig.ts
index e4f4364c7..3ef2c9a1f 100644
--- a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.editorConfig.ts
+++ b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.editorConfig.ts
@@ -1,4 +1,5 @@
 import { StructurePreviewProps } from "@mendix/piw-utils-internal";
+import { hidePropertiesIn, Properties } from "@mendix/pluggable-widgets-tools";
 
 import { ColorPickerPreviewProps } from "../typings/ColorPickerProps";
 import colorPickerSvgNoPreviewDark from "./assets/ColorPicker.nopreview.dark.svg";
@@ -22,3 +23,10 @@ export function getPreview(values: ColorPickerPreviewProps, isDarkMode: boolean)
         width: 188
     };
 }
+
+export function getProperties(values: ColorPickerPreviewProps, defaultProperties: Properties): Properties {
+    if (!values.enableAccessibility) {
+        hidePropertiesIn(defaultProperties, values, ["hueLabel", "saturationLabel", "lightnessLabel", "alphaLabel"]);
+    }
+    return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.tsx b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.tsx
index 9cfe175dd..598a23d86 100644
--- a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.tsx
+++ b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.tsx
@@ -110,7 +110,7 @@ export function ColorPicker(props: Props): ReactElement | null {
             )}
             <PickerSlider
                 testID={`${props.name}$hue`}
-                accessibilityLabel={props.hueLabel?.value || "Hue"}
+                accessibilityLabel={(props.enableAccessibility && props.hueLabel?.value) || "Hue"}
                 value={color.h}
                 onValueChange={onChangeHue}
                 onValueChangeComplete={onChangeComplete}
@@ -129,7 +129,7 @@ export function ColorPicker(props: Props): ReactElement | null {
             {props.showSaturation && !colorValue.readOnly && (
                 <PickerSlider
                     testID={`${props.name}$saturation`}
-                    accessibilityLabel={props.saturationLabel?.value || "Saturation"}
+                    accessibilityLabel={(props.enableAccessibility && props.saturationLabel?.value) || "Saturation"}
                     value={color.s}
                     onValueChange={onChangeSaturation}
                     onValueChangeComplete={onChangeComplete}
@@ -144,7 +144,7 @@ export function ColorPicker(props: Props): ReactElement | null {
             {props.showLightness && !colorValue.readOnly && (
                 <PickerSlider
                     testID={`${props.name}$lightness`}
-                    accessibilityLabel={props.lightnessLabel?.value || "Brightness"}
+                    accessibilityLabel={(props.enableAccessibility && props.lightnessLabel?.value) || "Brightness"}
                     value={color.l}
                     onValueChange={onChangeLightness}
                     onValueChangeComplete={onChangeComplete}
@@ -159,7 +159,7 @@ export function ColorPicker(props: Props): ReactElement | null {
             {format !== "hex" && props.showAlpha && !colorValue.readOnly && (
                 <PickerSlider
                     testID={`${props.name}$alpha`}
-                    accessibilityLabel={props.alphaLabel?.value || "Transparency"}
+                    accessibilityLabel={(props.enableAccessibility && props.alphaLabel?.value) || "Transparency"}
                     value={color.a}
                     onValueChange={onChangeAlpha}
                     onValueChangeComplete={onChangeComplete}
diff --git a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.xml b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.xml
index 67a1a8d90..271c2de3b 100644
--- a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.xml
+++ b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.xml
@@ -45,6 +45,10 @@
                 </property>
             </propertyGroup>
             <propertyGroup caption="Accessibility">
+                <property key="enableAccessibility" type="boolean" defaultValue="false">
+                    <caption>Custom accessibility labels</caption>
+                    <description>Enables setting custom screen reader labels for the sliders.</description>
+                </property>
                 <property key="hueLabel" type="textTemplate" required="false">
                     <caption>Hue label</caption>
                     <description>Screen reader label of the hue slider. Defaults to "Hue".</description>
diff --git a/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx b/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx
index ef2f25784..c467986dc 100644
--- a/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx
+++ b/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx
@@ -18,7 +18,8 @@ describe("Color Picker", () => {
             showPreview: true,
             showSaturation: true,
             showLightness: true,
-            showAlpha: false
+            showAlpha: false,
+            enableAccessibility: false
         };
     });
 
@@ -230,6 +231,7 @@ describe("Color Picker", () => {
                 {...defaultProps}
                 format="rgb"
                 showAlpha
+                enableAccessibility
                 hueLabel={label("Tint")}
                 saturationLabel={label("Intensity")}
             />
@@ -243,6 +245,13 @@ describe("Color Picker", () => {
         expect(labelOf("alpha")).toBe("Transparency");
     });
 
+    it("ignores custom labels when accessibility is not enabled", () => {
+        const label = (value: string): DynamicValue<string> => ({ status: ValueStatus.Available, value });
+        const component = render(<ColorPicker {...defaultProps} hueLabel={label("Tint")} />);
+
+        expect(component.getByTestId("color-picker-test$hue").props.accessibilityLabel).toBe("Hue");
+    });
+
     it("changes the value with screen reader actions", () => {
         const onChangeAction = actionValue();
         const component = render(<ColorPicker {...defaultProps} onChange={onChangeAction} />);
diff --git a/packages/pluggableWidgets/color-picker-native/typings/ColorPickerProps.d.ts b/packages/pluggableWidgets/color-picker-native/typings/ColorPickerProps.d.ts
index 0ac89b4a2..41aa4b994 100644
--- a/packages/pluggableWidgets/color-picker-native/typings/ColorPickerProps.d.ts
+++ b/packages/pluggableWidgets/color-picker-native/typings/ColorPickerProps.d.ts
@@ -17,6 +17,7 @@ export interface ColorPickerProps<Style> {
     showSaturation: boolean;
     showLightness: boolean;
     showAlpha: boolean;
+    enableAccessibility: boolean;
     hueLabel?: DynamicValue<string>;
     saturationLabel?: DynamicValue<string>;
     lightnessLabel?: DynamicValue<string>;
@@ -41,6 +42,7 @@ export interface ColorPickerPreviewProps {
     showSaturation: boolean;
     showLightness: boolean;
     showAlpha: boolean;
+    enableAccessibility: boolean;
     hueLabel: string;
     saturationLabel: string;
     lightnessLabel: string;