[MOO-2437]: Add accessibility label to color picker

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.

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",

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,6 +110,7 @@ export function ColorPicker(props: Props): ReactElement | null {
             )}
             <PickerSlider
                 testID={`${props.name}$hue`}
+                accessibilityLabel={(props.enableAccessibility && 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.enableAccessibility && 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.enableAccessibility && 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.enableAccessibility && props.alphaLabel?.value) || "Transparency"}
                     value={color.a}
                     onValueChange={onChangeAlpha}
                     onValueChangeComplete={onChangeComplete}

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,28 @@
                     <description>Enables a slider to make the color more transparent or opaque.</description>
                 </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>
+                </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 +74,7 @@
             </propertyGroup>
             <propertyGroup caption="Common">
                 <systemProperty key="Visibility" />
-                <systemProperty key="Name"/>
+                <systemProperty key="Name" />
             </propertyGroup>
         </propertyGroup>
     </properties>

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";
@@ -17,7 +18,8 @@ describe("Color Picker", () => {
             showPreview: true,
             showSaturation: true,
             showLightness: true,
-            showAlpha: false
+            showAlpha: false,
+            enableAccessibility: false
         };
     });
 
@@ -222,6 +224,34 @@ 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
+                enableAccessibility
+                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("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/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={
         {

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

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>

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,11 @@ export interface ColorPickerProps<Style> {
     showSaturation: boolean;
     showLightness: boolean;
     showAlpha: boolean;
+    enableAccessibility: boolean;
+    hueLabel?: DynamicValue<string>;
+    saturationLabel?: DynamicValue<string>;
+    lightnessLabel?: DynamicValue<string>;
+    alphaLabel?: DynamicValue<string>;
     onChange?: ActionValue;
 }
 
@@ -37,5 +42,10 @@ export interface ColorPickerPreviewProps {
     showSaturation: boolean;
     showLightness: boolean;
     showAlpha: boolean;
+    enableAccessibility: boolean;
+    hueLabel: string;
+    saturationLabel: string;
+    lightnessLabel: string;
+    alphaLabel: string;
     onChange: {} | null;
 }