fix: add accessibility labels

Author: SrirangK

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;
+}

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}

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>

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} />);

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;