From 3109960618339fbea488b36ad770513f61227c36 Mon Sep 17 00:00:00 2001
From: Uraz Akgultan <uraz@akgultan.com>
Date: Sun, 22 Jan 2023 23:02:00 +0100
Subject: [PATCH] feat: add accessibility

---
 .../accordion-native/src/Accordion.xml        |  2 +-
 .../src/BottomSheet.editorConfig.ts           | 18 +++-
 .../bottom-sheet-native/src/BottomSheet.tsx   |  3 +
 .../bottom-sheet-native/src/BottomSheet.xml   | 41 +++++++-
 .../src/components/CustomModalSheet.tsx       |  9 +-
 .../src/components/ExpandingDrawer.tsx        | 12 ++-
 .../src/components/NativeBottomSheet.tsx      | 11 ++-
 .../typings/BottomSheetProps.d.ts             | 18 +++-
 .../src/Carousel.editorConfig.ts              | 10 ++
 .../carousel-native/src/Carousel.tsx          |  3 +
 .../carousel-native/src/Carousel.xml          | 54 +++++++----
 .../typings/CarouselProps.d.ts                | 10 +-
 .../src/ColorPicker.editorConfig.ts           | 26 +++++
 .../color-picker-native/src/ColorPicker.tsx   | 36 ++++++-
 .../color-picker-native/src/ColorPicker.xml   | 45 +++++++--
 .../src/components/PickerSlider.tsx           | 96 ++++++++++++++-----
 .../typings/ColorPickerProps.d.ts             | 18 +++-
 .../src/Feedback.editorConfig.ts              | 24 +++++
 .../feedback-native/src/Feedback.tsx          |  7 +-
 .../feedback-native/src/Feedback.xml          | 21 +++-
 .../typings/FeedbackProps.d.ts                |  8 ++
 21 files changed, 404 insertions(+), 68 deletions(-)
 create mode 100644 packages/pluggableWidgets/feedback-native/src/Feedback.editorConfig.ts

diff --git a/packages/pluggableWidgets/accordion-native/src/Accordion.xml b/packages/pluggableWidgets/accordion-native/src/Accordion.xml
index 5b49755f9..65c510cc5 100644
--- a/packages/pluggableWidgets/accordion-native/src/Accordion.xml
+++ b/packages/pluggableWidgets/accordion-native/src/Accordion.xml
@@ -67,7 +67,7 @@
                                 <description />
                                 <returnType type="Boolean" />
                             </property>
-                            <property key="accessible" type="enumeration" defaultValue="yes">
+                            <property key="accessible" type="enumeration" defaultValue="no">
                                 <caption>Accessible</caption>
                                 <description />
                                 <enumerationValues>
diff --git a/packages/pluggableWidgets/bottom-sheet-native/src/BottomSheet.editorConfig.ts b/packages/pluggableWidgets/bottom-sheet-native/src/BottomSheet.editorConfig.ts
index e176a2dcd..01136e9ba 100644
--- a/packages/pluggableWidgets/bottom-sheet-native/src/BottomSheet.editorConfig.ts
+++ b/packages/pluggableWidgets/bottom-sheet-native/src/BottomSheet.editorConfig.ts
@@ -87,9 +87,10 @@ export function getPreview(values: BottomSheetPreviewProps, isDarkMode: boolean)
     };
 }
 
-export function getProperties(values: any, defaultProperties: Properties): Properties {
+export function getProperties(values: BottomSheetPreviewProps, defaultProperties: Properties): Properties {
     if (values.type === "modal") {
         if (values.modalRendering === "basic") {
+            hidePropertyIn(defaultProperties, values, "accessible");
             hidePropertiesIn(defaultProperties, values, ["smallContent", "largeContent", "fullscreenContent"]);
         } else {
             hidePropertiesIn(defaultProperties, values, [
@@ -112,10 +113,23 @@ export function getProperties(values: any, defaultProperties: Properties): Prope
             hidePropertyIn(defaultProperties, values, "fullscreenContent");
         }
     }
+
+    if (values.accessible === "no" || (values.type === "modal" && values.modalRendering === "basic")) {
+        hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+        hidePropertyIn(defaultProperties, values, "screenReaderHint");
+    }
+
+    values.itemsBasic.forEach((item, index) => {
+        if (item.modalAccessible === "no") {
+            hidePropertyIn(defaultProperties, values, "itemsBasic", index, "modalScreenReaderCaption");
+            hidePropertyIn(defaultProperties, values, "itemsBasic", index, "modalScreenReaderHint");
+        }
+    });
+
     return defaultProperties;
 }
 
-export function check(values: any): Problem[] {
+export function check(values: BottomSheetPreviewProps): Problem[] {
     const errors: Problem[] = [];
     if (values.type === "modal") {
         if (!values.triggerAttribute) {
diff --git a/packages/pluggableWidgets/bottom-sheet-native/src/BottomSheet.tsx b/packages/pluggableWidgets/bottom-sheet-native/src/BottomSheet.tsx
index b0e936624..661f49687 100644
--- a/packages/pluggableWidgets/bottom-sheet-native/src/BottomSheet.tsx
+++ b/packages/pluggableWidgets/bottom-sheet-native/src/BottomSheet.tsx
@@ -29,6 +29,9 @@ export function BottomSheet(props: BottomSheetProps<BottomSheetStyle>): ReactEle
     if (props.type === "expanding") {
         return (
             <ExpandingDrawer
+                accessible={props.accessible === "yes"}
+                screenReaderCaption={props.screenReaderCaption}
+                screenReaderHint={props.screenReaderHint}
                 smallContent={props.smallContent}
                 largeContent={props.largeContent}
                 fullscreenContent={props.showFullscreenContent ? props.fullscreenContent : null}
diff --git a/packages/pluggableWidgets/bottom-sheet-native/src/BottomSheet.xml b/packages/pluggableWidgets/bottom-sheet-native/src/BottomSheet.xml
index 033fc3c84..ebd4b0de9 100644
--- a/packages/pluggableWidgets/bottom-sheet-native/src/BottomSheet.xml
+++ b/packages/pluggableWidgets/bottom-sheet-native/src/BottomSheet.xml
@@ -19,7 +19,7 @@
                     <caption>Trigger attribute</caption>
                     <description>Defines if the modal bottom sheet is visible or not. Initially this value should be false. When set to true, the bottom sheet will be shown. When the bottom sheet is hidden, the trigger attribute value is set to false.</description>
                     <attributeTypes>
-                        <attributeType name="Boolean"/>
+                        <attributeType name="Boolean" />
                     </attributeTypes>
                 </property>
                 <property key="modalRendering" type="enumeration" defaultValue="basic">
@@ -55,6 +55,25 @@
                                 <enumerationValue key="customStyle">Custom</enumerationValue>
                             </enumerationValues>
                         </property>
+                        <property key="modalAccessible" type="enumeration" defaultValue="yes">
+                            <caption>Accessible</caption>
+                            <category>General</category>
+                            <description />
+                            <enumerationValues>
+                                <enumerationValue key="yes">Yes</enumerationValue>
+                                <enumerationValue key="no">No</enumerationValue>
+                            </enumerationValues>
+                        </property>
+                        <property key="modalScreenReaderCaption" type="textTemplate" required="false">
+                            <caption>Screen reader caption</caption>
+                            <category>General</category>
+                            <description />
+                        </property>
+                        <property key="modalScreenReaderHint" type="textTemplate" required="false">
+                            <caption>Screen reader hint</caption>
+                            <category>General</category>
+                            <description />
+                        </property>
                     </properties>
                 </property>
                 <property key="nativeImplementation" type="boolean" defaultValue="true">
@@ -87,9 +106,27 @@
                 </property>
             </propertyGroup>
             <propertyGroup caption="Common">
-                <systemProperty key="Name"/>
+                <systemProperty key="Name" />
                 <systemProperty key="Visibility" />
             </propertyGroup>
+            <propertyGroup caption="Accessibilty">
+                <property key="accessible" type="enumeration" defaultValue="no">
+                    <caption>Accessible</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="yes">Yes</enumerationValue>
+                        <enumerationValue key="no">No</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="screenReaderCaption" type="textTemplate" required="false">
+                    <caption>Screen reader caption</caption>
+                    <description />
+                </property>
+                <property key="screenReaderHint" type="textTemplate" required="false">
+                    <caption>Screen reader hint</caption>
+                    <description />
+                </property>
+            </propertyGroup>
         </propertyGroup>
     </properties>
 </widget>
diff --git a/packages/pluggableWidgets/bottom-sheet-native/src/components/CustomModalSheet.tsx b/packages/pluggableWidgets/bottom-sheet-native/src/components/CustomModalSheet.tsx
index 042fb451c..1de56d3a6 100644
--- a/packages/pluggableWidgets/bottom-sheet-native/src/components/CustomModalSheet.tsx
+++ b/packages/pluggableWidgets/bottom-sheet-native/src/components/CustomModalSheet.tsx
@@ -1,13 +1,16 @@
 import { createElement, ReactElement, ReactNode, useCallback, useEffect, useState } from "react";
 import { InteractionManager, LayoutChangeEvent, SafeAreaView, StyleSheet, View } from "react-native";
 import Modal, { OnSwipeCompleteParams } from "react-native-modal";
-import { EditableValue, ValueStatus } from "mendix";
+import { DynamicValue, EditableValue, ValueStatus } from "mendix";
 import { BottomSheetStyle, defaultPaddings } from "../ui/Styles";
 
 interface CustomModalSheetProps {
     triggerAttribute?: EditableValue<boolean>;
     content?: ReactNode;
     styles: BottomSheetStyle;
+    accessible?: boolean;
+    screenReaderCaption?: DynamicValue<string>;
+    screenReaderHint?: DynamicValue<string>;
 }
 
 export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement => {
@@ -62,6 +65,10 @@ export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement =>
 
     return (
         <Modal
+            accessible={props.accessible}
+            accessibilityLabel={props.screenReaderCaption?.value}
+            accessibilityHint={props.screenReaderHint?.value}
+            accessibilityState={{ expanded: height > 0 }}
             isVisible={currentStatus}
             coverScreen
             backdropOpacity={0.5}
diff --git a/packages/pluggableWidgets/bottom-sheet-native/src/components/ExpandingDrawer.tsx b/packages/pluggableWidgets/bottom-sheet-native/src/components/ExpandingDrawer.tsx
index 4e48c161a..6e396a136 100644
--- a/packages/pluggableWidgets/bottom-sheet-native/src/components/ExpandingDrawer.tsx
+++ b/packages/pluggableWidgets/bottom-sheet-native/src/components/ExpandingDrawer.tsx
@@ -1,7 +1,8 @@
-import { BottomSheetStyle } from "../ui/Styles";
 import { createElement, ReactNode, useCallback, useState, ReactElement, Children } from "react";
-import BottomSheet from "reanimated-bottom-sheet";
 import { Dimensions, LayoutChangeEvent, SafeAreaView, StyleSheet, View } from "react-native";
+import BottomSheet from "reanimated-bottom-sheet";
+import { DynamicValue } from "mendix";
+import { BottomSheetStyle } from "../ui/Styles";
 
 interface ExpandingDrawerProps {
     smallContent?: ReactNode;
@@ -10,6 +11,9 @@ interface ExpandingDrawerProps {
     onOpen?: () => void;
     onClose?: () => void;
     styles: BottomSheetStyle;
+    accessible?: boolean;
+    screenReaderCaption?: DynamicValue<string>;
+    screenReaderHint?: DynamicValue<string>;
 }
 
 export const ExpandingDrawer = (props: ExpandingDrawerProps): ReactElement => {
@@ -56,6 +60,10 @@ export const ExpandingDrawer = (props: ExpandingDrawerProps): ReactElement => {
                 pointerEvents="box-none"
             >
                 <View
+                    accessible={props.accessible}
+                    accessibilityLabel={props.screenReaderCaption?.value}
+                    accessibilityHint={props.screenReaderHint?.value}
+                    accessibilityState={{ expanded: isOpen }}
                     onLayout={onLayoutHandlerHeader}
                     style={!isSmallContentValid ? { height: 20 } : {}}
                     pointerEvents="box-none"
diff --git a/packages/pluggableWidgets/bottom-sheet-native/src/components/NativeBottomSheet.tsx b/packages/pluggableWidgets/bottom-sheet-native/src/components/NativeBottomSheet.tsx
index c306d02a1..6319a6b7a 100644
--- a/packages/pluggableWidgets/bottom-sheet-native/src/components/NativeBottomSheet.tsx
+++ b/packages/pluggableWidgets/bottom-sheet-native/src/components/NativeBottomSheet.tsx
@@ -2,9 +2,9 @@ import { createElement, ReactElement, useCallback, useEffect, useRef, useState }
 import ActionSheet, { ActionSheetCustom } from "react-native-actionsheet";
 import { Platform, Text } from "react-native";
 import { EditableValue, ValueStatus } from "mendix";
+import { executeAction } from "@mendix/piw-utils-internal";
 import { ItemsBasicType } from "../../typings/BottomSheetProps";
 import { ModalItemContainerStyle, BottomSheetStyle, defaultMargins } from "../ui/Styles";
-import { executeAction } from "@mendix/piw-utils-internal";
 
 interface NativeBottomSheetProps {
     name: string;
@@ -47,7 +47,14 @@ export const NativeBottomSheet = (props: NativeBottomSheetProps): ReactElement =
 
     if (Platform.OS === "android" || !props.useNative) {
         const options = props.itemsBasic.map((item, index) => (
-            <Text key={`${props.name}_item_${index}`} style={props.styles.modalItems[item.styleClass]}>
+            <Text
+                accessible={item.modalAccessible === "yes"}
+                accessibilityLabel={item.modalScreenReaderCaption?.value || item.caption}
+                accessibilityHint={item.modalScreenReaderHint?.value}
+                accessibilityRole="button"
+                key={`${props.name}_item_${index}`}
+                style={props.styles.modalItems[item.styleClass]}
+            >
                 {item.caption}
             </Text>
         ));
diff --git a/packages/pluggableWidgets/bottom-sheet-native/typings/BottomSheetProps.d.ts b/packages/pluggableWidgets/bottom-sheet-native/typings/BottomSheetProps.d.ts
index ef9f09b5d..6445576bd 100644
--- a/packages/pluggableWidgets/bottom-sheet-native/typings/BottomSheetProps.d.ts
+++ b/packages/pluggableWidgets/bottom-sheet-native/typings/BottomSheetProps.d.ts
@@ -4,7 +4,7 @@
  * @author Mendix UI Content Team
  */
 import { ComponentType, CSSProperties, ReactNode } from "react";
-import { ActionValue, EditableValue } from "mendix";
+import { ActionValue, DynamicValue, EditableValue } from "mendix";
 
 export type TypeEnum = "modal" | "expanding";
 
@@ -12,16 +12,26 @@ export type ModalRenderingEnum = "basic" | "custom";
 
 export type StyleClassEnum = "defaultStyle" | "primaryStyle" | "dangerStyle" | "customStyle";
 
+export type ModalAccessibleEnum = "yes" | "no";
+
 export interface ItemsBasicType {
     caption: string;
     action?: ActionValue;
     styleClass: StyleClassEnum;
+    modalAccessible: ModalAccessibleEnum;
+    modalScreenReaderCaption?: DynamicValue<string>;
+    modalScreenReaderHint?: DynamicValue<string>;
 }
 
+export type AccessibleEnum = "yes" | "no";
+
 export interface ItemsBasicPreviewType {
     caption: string;
     action: {} | null;
     styleClass: StyleClassEnum;
+    modalAccessible: ModalAccessibleEnum;
+    modalScreenReaderCaption: string;
+    modalScreenReaderHint: string;
 }
 
 export interface BottomSheetProps<Style> {
@@ -38,6 +48,9 @@ export interface BottomSheetProps<Style> {
     fullscreenContent?: ReactNode;
     onOpen?: ActionValue;
     onClose?: ActionValue;
+    accessible: AccessibleEnum;
+    screenReaderCaption?: DynamicValue<string>;
+    screenReaderHint?: DynamicValue<string>;
 }
 
 export interface BottomSheetPreviewProps {
@@ -56,4 +69,7 @@ export interface BottomSheetPreviewProps {
     fullscreenContent: { widgetCount: number; renderer: ComponentType<{ caption?: string }> };
     onOpen: {} | null;
     onClose: {} | null;
+    accessible: AccessibleEnum;
+    screenReaderCaption: string;
+    screenReaderHint: string;
 }
diff --git a/packages/pluggableWidgets/carousel-native/src/Carousel.editorConfig.ts b/packages/pluggableWidgets/carousel-native/src/Carousel.editorConfig.ts
index 346daedbc..277adddf5 100644
--- a/packages/pluggableWidgets/carousel-native/src/Carousel.editorConfig.ts
+++ b/packages/pluggableWidgets/carousel-native/src/Carousel.editorConfig.ts
@@ -1,4 +1,5 @@
 import { RowLayoutProps, StructurePreviewProps } from "@mendix/piw-utils-internal";
+import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
 
 import paginationSVG from "./assets/pagination.svg";
 
@@ -56,3 +57,12 @@ export function getPreview(values: CarouselPreviewProps, isDarkMode: boolean): S
         ]
     };
 }
+
+export function getProperties(values: CarouselPreviewProps, defaultProperties: Properties): Properties {
+    if (values.accessible === "no") {
+        hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+        hidePropertyIn(defaultProperties, values, "screenReaderHint");
+    }
+
+    return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/carousel-native/src/Carousel.tsx b/packages/pluggableWidgets/carousel-native/src/Carousel.tsx
index cf2e93c57..f67381030 100644
--- a/packages/pluggableWidgets/carousel-native/src/Carousel.tsx
+++ b/packages/pluggableWidgets/carousel-native/src/Carousel.tsx
@@ -147,6 +147,9 @@ export const Carousel = (props: CarouselProps<CarouselStyle>): ReactElement => {
                     <Fragment>
                         <NativeCarousel
                             testID={`${props.name}$carousel`}
+                            accessible={props.accessible === "yes"}
+                            accessibilityLabel={props.screenReaderCaption?.value}
+                            accessibilityHint={props.screenReaderHint?.value}
                             activeSlideAlignment={props.activeSlideAlignment}
                             layout="default"
                             firstItem={0}
diff --git a/packages/pluggableWidgets/carousel-native/src/Carousel.xml b/packages/pluggableWidgets/carousel-native/src/Carousel.xml
index 9a08efc0e..aec3c3e53 100644
--- a/packages/pluggableWidgets/carousel-native/src/Carousel.xml
+++ b/packages/pluggableWidgets/carousel-native/src/Carousel.xml
@@ -1,10 +1,7 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<widget id="com.mendix.widget.native.carousel.Carousel" pluginWidget="true" needsEntityContext="true" offlineCapable="true"
-        supportedPlatform="Native"
-        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">
+<widget id="com.mendix.widget.native.carousel.Carousel" pluginWidget="true" needsEntityContext="true" offlineCapable="true" supportedPlatform="Native" 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>Carousel</name>
-    <description/>
+    <description />
     <studioProCategory>Display</studioProCategory>
     <studioCategory>Display</studioCategory>
     <properties>
@@ -12,11 +9,11 @@
             <propertyGroup caption="Data source">
                 <property key="contentSource" type="datasource" isList="true">
                     <caption>Source</caption>
-                    <description/>
+                    <description />
                 </property>
                 <property key="content" type="widgets" dataSource="contentSource">
                     <caption>Content</caption>
-                    <description/>
+                    <description />
                 </property>
             </propertyGroup>
             <propertyGroup caption="Display">
@@ -41,19 +38,38 @@
                     </enumerationValues>
                 </property>
             </propertyGroup>
-<!--            Library has a bug with loops-->
-<!--            https://github.com/archriss/react-native-snap-carousel/issues/653 - -->
-<!--            https://github.com/archriss/react-native-snap-carousel/issues/608-->
-<!--            Also not working properly with Mobx-->
-<!--            <propertyGroup caption="Behavior">-->
-<!--                <property key="loop" type="boolean" defaultValue="false">-->
-<!--                    <caption>Loop</caption>-->
-<!--                    <description>After the last item the carousel continues to the first item.</description>-->
-<!--                </property>-->
-<!--            </propertyGroup>-->
+            <!--            Library has a bug with loops-->
+            <!--            https://github.com/archriss/react-native-snap-carousel/issues/653 - -->
+            <!--            https://github.com/archriss/react-native-snap-carousel/issues/608-->
+            <!--            Also not working properly with Mobx-->
+            <!--            <propertyGroup caption="Behavior">-->
+            <!--                <property key="loop" type="boolean" defaultValue="false">-->
+            <!--                    <caption>Loop</caption>-->
+            <!--                    <description>After the last item the carousel continues to the first item.</description>-->
+            <!--                </property>-->
+            <!--            </propertyGroup>-->
             <propertyGroup caption="Common">
-                <systemProperty key="Name"/>
-                <systemProperty key="Visibility"/>
+                <systemProperty key="Name" />
+                <systemProperty key="Visibility" />
+            </propertyGroup>
+
+            <propertyGroup caption="Accessibilty">
+                <property key="accessible" type="enumeration" defaultValue="no">
+                    <caption>Accessible</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="yes">Yes</enumerationValue>
+                        <enumerationValue key="no">No</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="screenReaderCaption" type="textTemplate" required="false">
+                    <caption>Screen reader caption</caption>
+                    <description />
+                </property>
+                <property key="screenReaderHint" type="textTemplate" required="false">
+                    <caption>Screen reader hint</caption>
+                    <description />
+                </property>
             </propertyGroup>
         </propertyGroup>
     </properties>
diff --git a/packages/pluggableWidgets/carousel-native/typings/CarouselProps.d.ts b/packages/pluggableWidgets/carousel-native/typings/CarouselProps.d.ts
index 3adbb53b8..9bd69e52b 100644
--- a/packages/pluggableWidgets/carousel-native/typings/CarouselProps.d.ts
+++ b/packages/pluggableWidgets/carousel-native/typings/CarouselProps.d.ts
@@ -4,12 +4,14 @@
  * @author Mendix UI Content Team
  */
 import { ComponentType, CSSProperties } from "react";
-import { ListValue, ListWidgetValue } from "mendix";
+import { DynamicValue, ListValue, ListWidgetValue } from "mendix";
 
 export type LayoutEnum = "card" | "fullWidth";
 
 export type ActiveSlideAlignmentEnum = "center" | "start";
 
+export type AccessibleEnum = "yes" | "no";
+
 export interface CarouselProps<Style> {
     name: string;
     style: Style[];
@@ -18,6 +20,9 @@ export interface CarouselProps<Style> {
     layout: LayoutEnum;
     showPagination: boolean;
     activeSlideAlignment: ActiveSlideAlignmentEnum;
+    accessible: AccessibleEnum;
+    screenReaderCaption?: DynamicValue<string>;
+    screenReaderHint?: DynamicValue<string>;
 }
 
 export interface CarouselPreviewProps {
@@ -30,4 +35,7 @@ export interface CarouselPreviewProps {
     layout: LayoutEnum;
     showPagination: boolean;
     activeSlideAlignment: ActiveSlideAlignmentEnum;
+    accessible: AccessibleEnum;
+    screenReaderCaption: string;
+    screenReaderHint: string;
 }
diff --git a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.editorConfig.ts b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.editorConfig.ts
index e4f4364c7..6a24ba623 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 { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
 
 import { ColorPickerPreviewProps } from "../typings/ColorPickerProps";
 import colorPickerSvgNoPreviewDark from "./assets/ColorPicker.nopreview.dark.svg";
@@ -22,3 +23,28 @@ export function getPreview(values: ColorPickerPreviewProps, isDarkMode: boolean)
         width: 188
     };
 }
+
+export function getProperties(values: ColorPickerPreviewProps, defaultProperties: Properties): Properties {
+    if (!values.showSaturation) {
+        hidePropertyIn(defaultProperties, values, "screenReaderCaptionSaturation");
+    }
+
+    if (!values.showLightness) {
+        hidePropertyIn(defaultProperties, values, "screenReaderCaptionBrightness");
+    }
+
+    if (!values.showAlpha) {
+        hidePropertyIn(defaultProperties, values, "screenReaderCaptionTransparency");
+    }
+
+    if (values.accessible === "no") {
+        hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+        hidePropertyIn(defaultProperties, values, "screenReaderHint");
+        hidePropertyIn(defaultProperties, values, "screenReaderCaptionHue");
+        hidePropertyIn(defaultProperties, values, "screenReaderCaptionSaturation");
+        hidePropertyIn(defaultProperties, values, "screenReaderCaptionBrightness");
+        hidePropertyIn(defaultProperties, values, "screenReaderCaptionTransparency");
+    }
+
+    return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.tsx b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.tsx
index 253ab4d26..1bf0bd9a3 100644
--- a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.tsx
+++ b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.tsx
@@ -1,7 +1,7 @@
 import { flattenStyles } from "@mendix/piw-native-utils-internal";
 import { ValueStatus } from "mendix";
 import { Component, createElement, ReactElement, ReactNode } from "react";
-import { View, ViewStyle } from "react-native";
+import { AccessibilityInfo, View, ViewStyle } from "react-native";
 
 import { HueGradient, LightnessGradient, SaturationGradient } from "react-native-color";
 import tinycolor from "tinycolor2";
@@ -15,6 +15,7 @@ import { executeAction } from "@mendix/piw-utils-internal";
 
 interface State {
     color?: HSLA;
+    screenReaderEnabled?: boolean;
 }
 
 export type Props = ColorPickerProps<ColorPickerStyle>;
@@ -28,7 +29,8 @@ export class ColorPicker extends Component<Props, State> {
     private readonly styles = flattenStyles(defaultColorPickerStyle, this.props.style);
     private readonly defaultSteps = 80;
     readonly state: State = {
-        color: undefined
+        color: undefined,
+        screenReaderEnabled: undefined
     };
 
     render(): ReactNode {
@@ -50,6 +52,17 @@ export class ColorPicker extends Component<Props, State> {
         );
     }
 
+    componentDidMount(): void {
+        if (this.props.accessible === "yes") {
+            AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled =>
+                this.setState({ screenReaderEnabled: isScreenReaderEnabled })
+            );
+            AccessibilityInfo.addEventListener("screenReaderChanged", isScreenReaderEnabled =>
+                this.setState({ screenReaderEnabled: isScreenReaderEnabled })
+            );
+        }
+    }
+
     componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): void {
         if (this.props.color.value !== prevProps.color.value && this.state.color === prevState.color) {
             this.setState({ color: undefined });
@@ -108,6 +121,9 @@ export class ColorPicker extends Component<Props, State> {
                 <View
                     testID={`${this.props.name}$preview`}
                     style={[this.styles.preview, { backgroundColor: tinycolor(color).toHslString() }]}
+                    accessible={this.props.accessible === "yes"}
+                    accessibilityLabel={this.props.screenReaderCaption?.value}
+                    accessibilityHint={this.props.screenReaderHint?.value}
                 />
             )
         );
@@ -122,6 +138,10 @@ export class ColorPicker extends Component<Props, State> {
         return (
             <PickerSlider
                 testID={`${this.props.name}$hue`}
+                accessible={this.props.accessible === "yes"}
+                screenReaderCaption={this.props.screenReaderCaptionHue}
+                screenReaderEnabled={this.state.screenReaderEnabled}
+                accessibilityValue={{ min: 0, max: 359, now: color.h }}
                 value={color.h}
                 onValueChange={this.onChangeHueHandler}
                 onValueChangeComplete={this.onChangeCompleteHandler}
@@ -143,6 +163,10 @@ export class ColorPicker extends Component<Props, State> {
         return (
             <PickerSlider
                 testID={`${this.props.name}$saturation`}
+                accessible={this.props.accessible === "yes"}
+                screenReaderCaption={this.props.screenReaderCaptionSaturation}
+                screenReaderEnabled={this.state.screenReaderEnabled}
+                accessibilityValue={{ text: `${color.s * 100}%` }}
                 value={color.s}
                 onValueChange={this.onChangeSaturationHandler}
                 onValueChangeComplete={this.onChangeCompleteHandler}
@@ -163,6 +187,10 @@ export class ColorPicker extends Component<Props, State> {
         return (
             <PickerSlider
                 testID={`${this.props.name}$lightness`}
+                accessible={this.props.accessible === "yes"}
+                screenReaderCaption={this.props.screenReaderCaptionBrightness}
+                screenReaderEnabled={this.state.screenReaderEnabled}
+                accessibilityValue={{ text: `${color.l * 100}%` }}
                 value={color.l}
                 onValueChange={this.onChangeLightnessHandler}
                 onValueChangeComplete={this.onChangeCompleteHandler}
@@ -183,6 +211,10 @@ export class ColorPicker extends Component<Props, State> {
         return (
             <PickerSlider
                 testID={`${this.props.name}$alpha`}
+                accessible={this.props.accessible === "yes"}
+                screenReaderCaption={this.props.screenReaderCaptionTransparency}
+                screenReaderEnabled={this.state.screenReaderEnabled}
+                accessibilityValue={{ text: `${color.a * 100}%` }}
                 value={color.a}
                 onValueChange={this.onChangeAlphaHandler}
                 onValueChangeComplete={this.onChangeCompleteHandler}
diff --git a/packages/pluggableWidgets/color-picker-native/src/ColorPicker.xml b/packages/pluggableWidgets/color-picker-native/src/ColorPicker.xml
index 5c616bc7a..a43472a57 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">
@@ -55,7 +52,41 @@
             </propertyGroup>
             <propertyGroup caption="Common">
                 <systemProperty key="Visibility" />
-                <systemProperty key="Name"/>
+                <systemProperty key="Name" />
+            </propertyGroup>
+            <propertyGroup caption="Accessibilty">
+                <property key="accessible" type="enumeration" defaultValue="yes">
+                    <caption>Accessible</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="yes">Yes</enumerationValue>
+                        <enumerationValue key="no">No</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="screenReaderCaption" type="textTemplate" required="false">
+                    <caption>Screen reader caption</caption>
+                    <description />
+                </property>
+                <property key="screenReaderHint" type="textTemplate" required="false">
+                    <caption>Screen reader hint</caption>
+                    <description />
+                </property>
+                <property key="screenReaderCaptionHue" type="textTemplate" required="false">
+                    <caption>Color picker caption</caption>
+                    <description />
+                </property>
+                <property key="screenReaderCaptionSaturation" type="textTemplate" required="false">
+                    <caption>Saturation caption</caption>
+                    <description />
+                </property>
+                <property key="screenReaderCaptionBrightness" type="textTemplate" required="false">
+                    <caption>Brightness caption</caption>
+                    <description />
+                </property>
+                <property key="screenReaderCaptionTransparency" type="textTemplate" required="false">
+                    <caption>Transparency caption</caption>
+                    <description />
+                </property>
             </propertyGroup>
         </propertyGroup>
     </properties>
diff --git a/packages/pluggableWidgets/color-picker-native/src/components/PickerSlider.tsx b/packages/pluggableWidgets/color-picker-native/src/components/PickerSlider.tsx
index 38c331528..b8b9fd924 100644
--- a/packages/pluggableWidgets/color-picker-native/src/components/PickerSlider.tsx
+++ b/packages/pluggableWidgets/color-picker-native/src/components/PickerSlider.tsx
@@ -1,6 +1,16 @@
 import { Component, createElement, createRef } from "react";
-import { GestureResponderEvent, Platform, StyleSheet, TouchableWithoutFeedback, View, ViewStyle } from "react-native";
+import {
+    AccessibilityActionEvent,
+    AccessibilityValue,
+    GestureResponderEvent,
+    Platform,
+    StyleSheet,
+    TouchableWithoutFeedback,
+    View,
+    ViewStyle
+} from "react-native";
 import Slider from "react-native-slider";
+import { DynamicValue } from "mendix";
 
 interface PickerSlidersProps {
     value: number;
@@ -14,6 +24,11 @@ interface PickerSlidersProps {
     trackStyle?: ViewStyle;
     disabled?: boolean;
     testID?: string;
+    accessible?: boolean;
+    screenReaderCaption?: DynamicValue<string>;
+    screenReaderHint?: DynamicValue<string>;
+    screenReaderEnabled?: boolean;
+    accessibilityValue?: AccessibilityValue;
 }
 
 export class PickerSlider extends Component<PickerSlidersProps> {
@@ -23,37 +38,68 @@ export class PickerSlider extends Component<PickerSlidersProps> {
     private readonly viewRef = createRef<View>();
     private isSliding = false;
 
-    render(): JSX.Element {
-        return (
+    private renderSlider = (): JSX.Element => {
+        const minValue = this.props.minimumValue || 0;
+        const maxValue = this.props.maximumValue || 1;
+        const SliderRender = (
+            <View
+                {...(this.props.accessible && this.props.screenReaderEnabled && { testID: this.props.testID })}
+                accessible={this.props.accessible}
+                accessibilityLabel={this.props.screenReaderCaption?.value}
+                accessibilityRole="adjustable"
+                accessibilityActions={[{ name: "increment" }, { name: "decrement" }]}
+                onAccessibilityAction={(event: AccessibilityActionEvent) => {
+                    const value = event.nativeEvent.actionName === "increment" ? 1 : -1;
+                    const newValue = this.props.value + value * this.props.step;
+                    console.warn(this.props.value);
+                    if (newValue >= minValue && newValue <= maxValue) {
+                        this.onChangeHandler(newValue);
+                        this.onSlidingComplete();
+                    }
+                }}
+                accessibilityState={{ disabled: this.props.disabled }}
+                accessibilityValue={this.props.accessibilityValue}
+                style={[styles.container]}
+                ref={this.viewRef}
+            >
+                <View style={styles.gradient}>{this.props.children}</View>
+                <Slider
+                    value={this.props.value}
+                    step={this.props.step}
+                    animateTransitions={false}
+                    thumbTouchSize={{ width: 48, height: 48 }}
+                    minimumValue={this.props.minimumValue}
+                    maximumValue={this.props.maximumValue}
+                    onValueChange={this.onChangeHandler}
+                    onSlidingComplete={this.onSlidingCompleteHandler}
+                    minimumTrackTintColor="transparent"
+                    maximumTrackTintColor="transparent"
+                    trackStyle={this.props.trackStyle}
+                    thumbStyle={[
+                        styles.thumb,
+                        this.props.thumbStyle as ViewStyle,
+                        { backgroundColor: this.props.thumbTintColor }
+                    ]}
+                    disabled={this.props.disabled}
+                />
+            </View>
+        );
+
+        return this.props.accessible && this.props.screenReaderEnabled ? (
+            SliderRender
+        ) : (
             <TouchableWithoutFeedback
                 onPressIn={this.onTapHandler}
                 testID={this.props.testID}
                 disabled={this.props.disabled}
             >
-                <View style={[styles.container]} ref={this.viewRef}>
-                    <View style={styles.gradient}>{this.props.children}</View>
-                    <Slider
-                        value={this.props.value}
-                        step={this.props.step}
-                        animateTransitions={false}
-                        thumbTouchSize={{ width: 48, height: 48 }}
-                        minimumValue={this.props.minimumValue}
-                        maximumValue={this.props.maximumValue}
-                        onValueChange={this.onChangeHandler}
-                        onSlidingComplete={this.onSlidingCompleteHandler}
-                        minimumTrackTintColor="transparent"
-                        maximumTrackTintColor="transparent"
-                        trackStyle={this.props.trackStyle}
-                        thumbStyle={[
-                            styles.thumb,
-                            this.props.thumbStyle as ViewStyle,
-                            { backgroundColor: this.props.thumbTintColor }
-                        ]}
-                        disabled={this.props.disabled}
-                    />
-                </View>
+                {SliderRender}
             </TouchableWithoutFeedback>
         );
+    };
+
+    render(): JSX.Element {
+        return this.renderSlider();
     }
 
     private onChange(value: number): void {
diff --git a/packages/pluggableWidgets/color-picker-native/typings/ColorPickerProps.d.ts b/packages/pluggableWidgets/color-picker-native/typings/ColorPickerProps.d.ts
index d2df22233..12e3979f2 100644
--- a/packages/pluggableWidgets/color-picker-native/typings/ColorPickerProps.d.ts
+++ b/packages/pluggableWidgets/color-picker-native/typings/ColorPickerProps.d.ts
@@ -4,10 +4,12 @@
  * @author Mendix UI Content Team
  */
 import { CSSProperties } from "react";
-import { ActionValue, EditableValue } from "mendix";
+import { ActionValue, DynamicValue, EditableValue } from "mendix";
 
 export type FormatEnum = "hex" | "hsl" | "hsv" | "rgb";
 
+export type AccessibleEnum = "yes" | "no";
+
 export interface ColorPickerProps<Style> {
     name: string;
     style: Style[];
@@ -18,6 +20,13 @@ export interface ColorPickerProps<Style> {
     showLightness: boolean;
     showAlpha: boolean;
     onChange?: ActionValue;
+    accessible: AccessibleEnum;
+    screenReaderCaption?: DynamicValue<string>;
+    screenReaderHint?: DynamicValue<string>;
+    screenReaderCaptionHue?: DynamicValue<string>;
+    screenReaderCaptionSaturation?: DynamicValue<string>;
+    screenReaderCaptionBrightness?: DynamicValue<string>;
+    screenReaderCaptionTransparency?: DynamicValue<string>;
 }
 
 export interface ColorPickerPreviewProps {
@@ -32,4 +41,11 @@ export interface ColorPickerPreviewProps {
     showLightness: boolean;
     showAlpha: boolean;
     onChange: {} | null;
+    accessible: AccessibleEnum;
+    screenReaderCaption: string;
+    screenReaderHint: string;
+    screenReaderCaptionHue: string;
+    screenReaderCaptionSaturation: string;
+    screenReaderCaptionBrightness: string;
+    screenReaderCaptionTransparency: string;
 }
diff --git a/packages/pluggableWidgets/feedback-native/src/Feedback.editorConfig.ts b/packages/pluggableWidgets/feedback-native/src/Feedback.editorConfig.ts
new file mode 100644
index 000000000..640db0a4c
--- /dev/null
+++ b/packages/pluggableWidgets/feedback-native/src/Feedback.editorConfig.ts
@@ -0,0 +1,24 @@
+import { Properties, hidePropertyIn, Problem } from "@mendix/pluggable-widgets-tools";
+
+import { FeedbackPreviewProps } from "../typings/FeedbackProps";
+
+export function getProperties(values: FeedbackPreviewProps, defaultProperties: Properties): Properties {
+    if (values.accessible === "no") {
+        hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+        hidePropertyIn(defaultProperties, values, "screenReaderHint");
+    }
+    return defaultProperties;
+}
+
+export function check(values: FeedbackPreviewProps): Problem[] {
+    const errors: Problem[] = [];
+    if (values.accessible === "yes" && !values.screenReaderCaption) {
+        errors.push({
+            property: "screenReaderCaption",
+            severity: "error",
+            message: "Screen reader caption cannot be empty.",
+            url: ""
+        });
+    }
+    return errors;
+}
diff --git a/packages/pluggableWidgets/feedback-native/src/Feedback.tsx b/packages/pluggableWidgets/feedback-native/src/Feedback.tsx
index 61203474f..f5c4fc724 100644
--- a/packages/pluggableWidgets/feedback-native/src/Feedback.tsx
+++ b/packages/pluggableWidgets/feedback-native/src/Feedback.tsx
@@ -92,7 +92,12 @@ export class Feedback extends Component<FeedbackProps<FeedbackStyle>, State> {
 
     private renderFloatingButton(): JSX.Element | null {
         return this.state.status === "initial" ? (
-            <View style={floatingButtonContainer(this.state.deviceHeight)}>
+            <View
+                accessible={this.props.accessible === "yes"}
+                accessibilityLabel={this.props.screenReaderCaption?.value}
+                accessibilityHint={this.props.screenReaderHint?.value}
+                style={floatingButtonContainer(this.state.deviceHeight)}
+            >
                 <View style={this.styles.floatingButton}>
                     <TouchableOpacity onPress={this.onFeedbackButtonPressHandler} testID={`${this.props.name}$button`}>
                         {this.props.logo && this.props.logo.value ? (
diff --git a/packages/pluggableWidgets/feedback-native/src/Feedback.xml b/packages/pluggableWidgets/feedback-native/src/Feedback.xml
index fd382b2e7..50be27f8f 100644
--- a/packages/pluggableWidgets/feedback-native/src/Feedback.xml
+++ b/packages/pluggableWidgets/feedback-native/src/Feedback.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <widget id="com.mendix.widget.native.feedback.Feedback" 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>Feedback</name>
     <description>Allow users to submit feedback directly into the app project.</description>
@@ -20,5 +20,24 @@
             <category>General</category>
             <description>For customized branding, add a logo to the widget. The recommended size of the image is 90 by 90 pixels.</description>
         </property>
+        <property key="accessible" type="enumeration" defaultValue="no">
+            <caption>Accessible</caption>
+            <category>General</category>
+            <description />
+            <enumerationValues>
+                <enumerationValue key="yes">Yes</enumerationValue>
+                <enumerationValue key="no">No</enumerationValue>
+            </enumerationValues>
+        </property>
+        <property key="screenReaderCaption" type="textTemplate" required="false">
+            <caption>Screen reader caption</caption>
+            <category>General</category>
+            <description />
+        </property>
+        <property key="screenReaderHint" type="textTemplate" required="false">
+            <caption>Screen reader hint</caption>
+            <category>General</category>
+            <description />
+        </property>
     </properties>
 </widget>
diff --git a/packages/pluggableWidgets/feedback-native/typings/FeedbackProps.d.ts b/packages/pluggableWidgets/feedback-native/typings/FeedbackProps.d.ts
index ccb30503c..91b77fd85 100644
--- a/packages/pluggableWidgets/feedback-native/typings/FeedbackProps.d.ts
+++ b/packages/pluggableWidgets/feedback-native/typings/FeedbackProps.d.ts
@@ -6,12 +6,17 @@
 import { CSSProperties } from "react";
 import { DynamicValue, NativeImage } from "mendix";
 
+export type AccessibleEnum = "yes" | "no";
+
 export interface FeedbackProps<Style> {
     name: string;
     style: Style[];
     sprintrapp: string;
     allowScreenshot: boolean;
     logo?: DynamicValue<NativeImage>;
+    accessible: AccessibleEnum;
+    screenReaderCaption?: DynamicValue<string>;
+    screenReaderHint?: DynamicValue<string>;
 }
 
 export interface FeedbackPreviewProps {
@@ -22,4 +27,7 @@ export interface FeedbackPreviewProps {
     sprintrapp: string;
     allowScreenshot: boolean;
     logo: { type: "static"; imageUrl: string; } | { type: "dynamic"; entity: string; } | null;
+    accessible: AccessibleEnum;
+    screenReaderCaption: string;
+    screenReaderHint: string;
 }