diff --git a/packages/pluggableWidgets/accordion-native/CHANGELOG.md b/packages/pluggableWidgets/accordion-native/CHANGELOG.md
index f00e0ad25..a2e6aebc4 100644
--- a/packages/pluggableWidgets/accordion-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/accordion-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.2.0] - 2022-04-07
### Added
diff --git a/packages/pluggableWidgets/accordion-native/package.json b/packages/pluggableWidgets/accordion-native/package.json
index b14e55dad..a7b63fdf9 100644
--- a/packages/pluggableWidgets/accordion-native/package.json
+++ b/packages/pluggableWidgets/accordion-native/package.json
@@ -1,7 +1,7 @@
{
"name": "accordion-native",
"widgetName": "Accordion",
- "version": "2.2.0",
+ "version": "2.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/accordion-native/src/Accordion.editorConfig.ts b/packages/pluggableWidgets/accordion-native/src/Accordion.editorConfig.ts
index 906d50241..52c5ca693 100644
--- a/packages/pluggableWidgets/accordion-native/src/Accordion.editorConfig.ts
+++ b/packages/pluggableWidgets/accordion-native/src/Accordion.editorConfig.ts
@@ -126,6 +126,10 @@ export function getProperties(values: AccordionPreviewProps, defaultProperties:
if (group.groupCollapsed !== "groupStartDynamic") {
hidePropertyIn(defaultProperties, values, "groups", index, "groupCollapsedDynamic");
}
+ if (group.accessible !== "yes") {
+ hidePropertyIn(defaultProperties, values, "groups", index, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "groups", index, "screenReaderHint");
+ }
});
if (!values.collapsible) {
diff --git a/packages/pluggableWidgets/accordion-native/src/Accordion.tsx b/packages/pluggableWidgets/accordion-native/src/Accordion.tsx
index 39b74cf41..348fafcce 100644
--- a/packages/pluggableWidgets/accordion-native/src/Accordion.tsx
+++ b/packages/pluggableWidgets/accordion-native/src/Accordion.tsx
@@ -78,7 +78,7 @@ export function Accordion(props: Props): ReactElement | null {
}, [props.groups]);
return (
- <View style={styles.container} testID={props.name}>
+ <View accessibilityRole="tablist" style={styles.container} testID={props.name}>
{props.groups.map(
(group, index): ReactElement => (
<AccordionGroup
diff --git a/packages/pluggableWidgets/accordion-native/src/Accordion.xml b/packages/pluggableWidgets/accordion-native/src/Accordion.xml
index 37f9b7649..65c510cc5 100644
--- a/packages/pluggableWidgets/accordion-native/src/Accordion.xml
+++ b/packages/pluggableWidgets/accordion-native/src/Accordion.xml
@@ -1,9 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?>
-<widget id="com.mendix.widget.native.accordion.Accordion" 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.accordion.Accordion" 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>Accordion</name>
<description>Toggle the display of sections of content</description>
<studioProCategory>Input elements</studioProCategory>
@@ -13,12 +9,12 @@
<propertyGroup caption="General">
<property key="groups" type="object" isList="true" required="true">
<caption>Groups</caption>
- <description/>
+ <description />
<properties>
<propertyGroup caption="General">
<property key="headerRenderMode" type="enumeration" defaultValue="text">
<caption>Header type</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="text">Text</enumerationValue>
<enumerationValue key="custom">Custom</enumerationValue>
@@ -26,7 +22,7 @@
</property>
<property key="headerTextRenderMode" type="enumeration" defaultValue="heading5">
<caption>Render mode</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="heading1">Heading 1</enumerationValue>
<enumerationValue key="heading2">Heading 2</enumerationValue>
@@ -38,7 +34,7 @@
</property>
<property key="headerText" type="textTemplate">
<caption>Text</caption>
- <description/>
+ <description />
<translations>
<translation lang="en_US">Header</translation>
<translation lang="nl_NL">Koptekst</translation>
@@ -46,20 +42,20 @@
</property>
<property key="headerContent" type="widgets" required="false">
<caption>Header</caption>
- <description/>
+ <description />
</property>
<property key="content" type="widgets" required="false">
<caption>Content</caption>
- <description/>
+ <description />
</property>
<property key="visible" type="expression" defaultValue="true">
<caption>Visible</caption>
- <description/>
- <returnType type="Boolean"/>
+ <description />
+ <returnType type="Boolean" />
</property>
<property key="groupCollapsed" type="enumeration" defaultValue="groupStartExpanded">
<caption>Start as</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="groupStartExpanded">Expanded</enumerationValue>
<enumerationValue key="groupStartCollapsed">Collapsed</enumerationValue>
@@ -68,21 +64,37 @@
</property>
<property key="groupCollapsedDynamic" type="expression" required="false">
<caption>Collapsed expression</caption>
- <description/>
- <returnType type="Boolean"/>
+ <description />
+ <returnType type="Boolean" />
+ </property>
+ <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 caption="Events">
<property key="groupCollapsedAttribute" type="attribute" required="false">
<caption>Collapsed attribute</caption>
- <description/>
+ <description />
<attributeTypes>
- <attributeType name="Boolean"/>
+ <attributeType name="Boolean" />
</attributeTypes>
</property>
<property key="groupOnChange" type="action" required="false">
<caption>On change</caption>
- <description/>
+ <description />
</property>
</propertyGroup>
</properties>
@@ -91,7 +103,7 @@
<propertyGroup caption="Behavior">
<property key="collapsible" type="boolean" defaultValue="true">
<caption>Collapsible</caption>
- <description/>
+ <description />
</property>
<property key="collapseBehavior" type="enumeration" defaultValue="singleExpanded">
<caption>Expanded groups</caption>
@@ -106,7 +118,7 @@
<propertyGroup caption="Visualization">
<property key="icon" type="enumeration" defaultValue="right">
<caption>Show Icon</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="right">Right</enumerationValue>
<enumerationValue key="left">Left</enumerationValue>
@@ -115,11 +127,11 @@
</property>
<property key="iconCollapsed" type="icon" required="false">
<caption>Icon collapsed</caption>
- <description/>
+ <description />
</property>
<property key="iconExpanded" type="icon" required="false">
<caption>Icon expanded</caption>
- <description/>
+ <description />
</property>
</propertyGroup>
</properties>
diff --git a/packages/pluggableWidgets/accordion-native/src/__tests__/Accordion.spec.tsx b/packages/pluggableWidgets/accordion-native/src/__tests__/Accordion.spec.tsx
index f620a3ba2..1b90d841a 100644
--- a/packages/pluggableWidgets/accordion-native/src/__tests__/Accordion.spec.tsx
+++ b/packages/pluggableWidgets/accordion-native/src/__tests__/Accordion.spec.tsx
@@ -11,6 +11,7 @@ const defaultProps = (): Props => ({
style: [],
groups: [
{
+ accessible: "yes",
headerRenderMode: "text",
headerTextRenderMode: "heading1",
headerText: dynamicValue<string>("Header1"),
@@ -23,6 +24,7 @@ const defaultProps = (): Props => ({
groupOnChange: actionValue()
},
{
+ accessible: "yes",
headerRenderMode: "custom",
headerTextRenderMode: "heading1",
headerText: dynamicValue<string>(undefined),
diff --git a/packages/pluggableWidgets/accordion-native/src/__tests__/__snapshots__/Accordion.spec.tsx.snap b/packages/pluggableWidgets/accordion-native/src/__tests__/__snapshots__/Accordion.spec.tsx.snap
index 2e98e9cb1..331c7050f 100644
--- a/packages/pluggableWidgets/accordion-native/src/__tests__/__snapshots__/Accordion.spec.tsx.snap
+++ b/packages/pluggableWidgets/accordion-native/src/__tests__/__snapshots__/Accordion.spec.tsx.snap
@@ -2,6 +2,7 @@
exports[`Accordion in collapsible & single expanded group mode renders correctly 1`] = `
<View
+ accessibilityRole="tablist"
style={
Object {
"backgroundColor": "#FFF",
@@ -20,6 +21,12 @@ exports[`Accordion in collapsible & single expanded group mode renders correctly
}
>
<View
+ accessibilityLabel="Header1"
+ accessibilityState={
+ Object {
+ "expanded": false,
+ }
+ }
accessible={true}
collapsable={false}
focusable={true}
@@ -47,6 +54,7 @@ exports[`Accordion in collapsible & single expanded group mode renders correctly
}
>
<Text
+ accessible={true}
style={
Array [
Object {
@@ -64,6 +72,7 @@ exports[`Accordion in collapsible & single expanded group mode renders correctly
Header1
</Text>
<View
+ accessible={true}
style={
Object {
"height": 16,
@@ -115,6 +124,11 @@ exports[`Accordion in collapsible & single expanded group mode renders correctly
}
>
<View
+ accessibilityState={
+ Object {
+ "expanded": true,
+ }
+ }
accessible={true}
collapsable={false}
focusable={true}
@@ -142,6 +156,7 @@ exports[`Accordion in collapsible & single expanded group mode renders correctly
}
>
<View
+ accessible={true}
style={
Object {
"flex": 1,
@@ -153,6 +168,7 @@ exports[`Accordion in collapsible & single expanded group mode renders correctly
</Text>
</View>
<View
+ accessible={true}
style={
Object {
"height": 16,
diff --git a/packages/pluggableWidgets/accordion-native/src/components/AccordionGroup.tsx b/packages/pluggableWidgets/accordion-native/src/components/AccordionGroup.tsx
index b02da4dc1..d5d9173bf 100644
--- a/packages/pluggableWidgets/accordion-native/src/components/AccordionGroup.tsx
+++ b/packages/pluggableWidgets/accordion-native/src/components/AccordionGroup.tsx
@@ -32,21 +32,32 @@ export function AccordionGroup({
visible,
style
}: AccordionGroupProps): ReactElement | null {
+ const isAccessible = group.accessible === "yes";
return visible ? (
<View style={style.container}>
<Pressable
style={[style.header.container, icon === "left" && { flexDirection: "row-reverse" }]}
onPress={collapsible ? () => onPressGroupHeader(group, index) : null}
+ accessible={isAccessible}
+ accessibilityLabel={
+ group.screenReaderCaption?.value ||
+ (group.headerRenderMode === "text" ? group.headerText.value : undefined)
+ }
+ accessibilityHint={group.screenReaderHint?.value}
+ accessibilityState={{ expanded: isExpanded }}
>
{group.headerRenderMode === "text" ? (
- <Text style={[style.header[group.headerTextRenderMode], { flex: 1 }]}>
+ <Text accessible={isAccessible} style={[style.header[group.headerTextRenderMode], { flex: 1 }]}>
{group.headerText.value}
</Text>
) : (
- <View style={{ flex: 1 }}>{group.headerContent}</View>
+ <View accessible={isAccessible} style={{ flex: 1 }}>
+ {group.headerContent}
+ </View>
)}
{icon !== "no" && collapsible ? (
<GroupIcon
+ accessible={isAccessible}
isExpanded={isExpanded}
iconCollapsed={iconCollapsed}
iconExpanded={iconExpanded}
diff --git a/packages/pluggableWidgets/accordion-native/src/components/GroupIcon.tsx b/packages/pluggableWidgets/accordion-native/src/components/GroupIcon.tsx
index 91efb4390..abd10c862 100644
--- a/packages/pluggableWidgets/accordion-native/src/components/GroupIcon.tsx
+++ b/packages/pluggableWidgets/accordion-native/src/components/GroupIcon.tsx
@@ -16,9 +16,16 @@ interface GroupIconProps {
iconCollapsed: DynamicValue<NativeIcon> | undefined;
iconExpanded: DynamicValue<NativeIcon> | undefined;
style: AccordionIconStyle;
+ accessible: boolean;
}
-export function GroupIcon({ iconCollapsed, iconExpanded, isExpanded, style }: GroupIconProps): ReactElement | null {
+export function GroupIcon({
+ iconCollapsed,
+ iconExpanded,
+ isExpanded,
+ style,
+ accessible
+}: GroupIconProps): ReactElement | null {
const customIconsConfigured = iconCollapsed?.value ?? iconExpanded?.value;
const customIconSource = iconCollapsed?.value || { type: "glyph", iconClass: "glyphicon-chevron-down" };
const customExpandedIconSource = iconExpanded?.value || { type: "glyph", iconClass: "glyphicon-chevron-up" };
@@ -41,11 +48,12 @@ export function GroupIcon({ iconCollapsed, iconExpanded, isExpanded, style }: Gr
}, [isExpanded, animatedValue]);
return customIconsConfigured ? (
- <View style={iconStyles}>
+ <View accessible={accessible} style={iconStyles}>
<Icon icon={source} size={style.size} color={style.color} />
</View>
) : (
<Animated.View
+ accessible={accessible}
style={[
iconStyles,
{
diff --git a/packages/pluggableWidgets/accordion-native/src/package.xml b/packages/pluggableWidgets/accordion-native/src/package.xml
index 17bc83740..ecf3ac423 100644
--- a/packages/pluggableWidgets/accordion-native/src/package.xml
+++ b/packages/pluggableWidgets/accordion-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="Accordion" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="Accordion" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="Accordion.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/accordion-native/typings/AccordionProps.d.ts b/packages/pluggableWidgets/accordion-native/typings/AccordionProps.d.ts
index 893ff1f71..a40d2962c 100644
--- a/packages/pluggableWidgets/accordion-native/typings/AccordionProps.d.ts
+++ b/packages/pluggableWidgets/accordion-native/typings/AccordionProps.d.ts
@@ -12,6 +12,8 @@ export type HeaderTextRenderModeEnum = "heading1" | "heading2" | "heading3" | "h
export type GroupCollapsedEnum = "groupStartExpanded" | "groupStartCollapsed" | "groupStartDynamic";
+export type AccessibleEnum = "yes" | "no";
+
export interface GroupsType {
headerRenderMode: HeaderRenderModeEnum;
headerTextRenderMode: HeaderTextRenderModeEnum;
@@ -21,6 +23,9 @@ export interface GroupsType {
visible: DynamicValue<boolean>;
groupCollapsed: GroupCollapsedEnum;
groupCollapsedDynamic?: DynamicValue<boolean>;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
groupCollapsedAttribute?: EditableValue<boolean>;
groupOnChange?: ActionValue;
}
@@ -38,6 +43,9 @@ export interface GroupsPreviewType {
visible: string;
groupCollapsed: GroupCollapsedEnum;
groupCollapsedDynamic: string;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
groupCollapsedAttribute: string;
groupOnChange: {} | null;
}
diff --git a/packages/pluggableWidgets/activity-indicator-native/CHANGELOG.md b/packages/pluggableWidgets/activity-indicator-native/CHANGELOG.md
index bc3858add..bd72e49ae 100644
--- a/packages/pluggableWidgets/activity-indicator-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/activity-indicator-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.2.0] - 2022-04-07
### Added
diff --git a/packages/pluggableWidgets/activity-indicator-native/package.json b/packages/pluggableWidgets/activity-indicator-native/package.json
index 04c218e07..132c7164e 100644
--- a/packages/pluggableWidgets/activity-indicator-native/package.json
+++ b/packages/pluggableWidgets/activity-indicator-native/package.json
@@ -1,7 +1,7 @@
{
"name": "activity-indicator-native",
"widgetName": "ActivityIndicator",
- "version": "2.2.0",
+ "version": "2.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.editorConfig.ts b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.editorConfig.ts
index 066565891..9f4483b61 100644
--- a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.editorConfig.ts
+++ b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.editorConfig.ts
@@ -1,5 +1,6 @@
import { RowLayoutProps } from "@mendix/piw-utils-internal";
import { ActivityIndicatorPreviewProps } from "../typings/ActivityIndicatorProps";
+import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
import StructurePreviewActivityIndicatorPrimaryLightSVG from "./assets/ActivityIndicator.primary.light.svg";
import StructurePreviewActivityIndicatorPrimaryDarkSVG from "./assets/ActivityIndicator.primary.dark.svg";
@@ -23,3 +24,12 @@ export const getPreview = (_: ActivityIndicatorPreviewProps, isDarkMode: boolean
}
]
});
+
+export function getProperties(values: ActivityIndicatorPreviewProps, defaultProperties: Properties): Properties {
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
+ return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.tsx b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.tsx
index 79576deb3..9cc77a0f1 100644
--- a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.tsx
+++ b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.tsx
@@ -1,24 +1,27 @@
-import { flattenStyles } from "@mendix/piw-native-utils-internal";
-import { Component, createElement } from "react";
+import { createElement, ReactElement } from "react";
import { ActivityIndicator as RNActivityIndicator, View } from "react-native";
+import { flattenStyles } from "@mendix/piw-native-utils-internal";
+
import { ActivityIndicatorProps } from "../typings/ActivityIndicatorProps";
import { ActivityIndicatorStyle, defaultActivityStyle } from "./ui/Styles";
export type Props = ActivityIndicatorProps<ActivityIndicatorStyle>;
-export class ActivityIndicator extends Component<Props> {
- private readonly styles = flattenStyles(defaultActivityStyle, this.props.style);
+export function ActivityIndicator(props: Props): ReactElement {
+ const styles = flattenStyles(defaultActivityStyle, props.style);
- render(): JSX.Element {
- return (
- <View style={this.styles.container}>
- <RNActivityIndicator
- testID={this.props.name}
- size={this.styles.indicator.size}
- color={this.styles.indicator.color}
- />
- </View>
- );
- }
+ return (
+ <View style={styles.container}>
+ <RNActivityIndicator
+ accessible={props.accessible === "yes"}
+ accessibilityLabel={props.screenReaderCaption?.value}
+ accessibilityHint={props.screenReaderHint?.value}
+ accessibilityState={{ busy: true }}
+ testID={props.name}
+ size={styles.indicator.size}
+ color={styles.indicator.color}
+ />
+ </View>
+ );
}
diff --git a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.xml b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.xml
index 9a4aa1a67..b9d975bd9 100644
--- a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.xml
+++ b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.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.activityindicator.ActivityIndicator" supportedPlatform="Native" needsEntityContext="false" 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>Activity indicator</name>
<description>Display a circular loading indicator.</description>
@@ -6,7 +6,27 @@
<studioCategory>Display</studioCategory>
<properties>
<propertyGroup caption="Common">
- <systemProperty key="Name"/>
+ <propertyGroup caption="Common">
+ <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>
+ </propertyGroup>
</propertyGroup>
</properties>
</widget>
diff --git a/packages/pluggableWidgets/activity-indicator-native/src/__tests__/ActivityIndicator.spec.tsx b/packages/pluggableWidgets/activity-indicator-native/src/__tests__/ActivityIndicator.spec.tsx
index 89259c0d4..5a6592f63 100644
--- a/packages/pluggableWidgets/activity-indicator-native/src/__tests__/ActivityIndicator.spec.tsx
+++ b/packages/pluggableWidgets/activity-indicator-native/src/__tests__/ActivityIndicator.spec.tsx
@@ -5,6 +5,7 @@ import { ActivityIndicator, Props } from "../ActivityIndicator";
const defaultProps: Props = {
name: "activity-indicator-test",
+ accessible: "yes",
style: []
};
diff --git a/packages/pluggableWidgets/activity-indicator-native/src/__tests__/__snapshots__/ActivityIndicator.spec.tsx.snap b/packages/pluggableWidgets/activity-indicator-native/src/__tests__/__snapshots__/ActivityIndicator.spec.tsx.snap
index 5febbfc61..49a07ea01 100644
--- a/packages/pluggableWidgets/activity-indicator-native/src/__tests__/__snapshots__/ActivityIndicator.spec.tsx.snap
+++ b/packages/pluggableWidgets/activity-indicator-native/src/__tests__/__snapshots__/ActivityIndicator.spec.tsx.snap
@@ -9,6 +9,12 @@ exports[`ActivityIndicator renders with custom styles 1`] = `
}
>
<ActivityIndicator
+ accessibilityState={
+ Object {
+ "busy": true,
+ }
+ }
+ accessible={true}
animating={true}
color="green"
hidesWhenStopped={true}
@@ -23,6 +29,12 @@ exports[`ActivityIndicator renders with default styles 1`] = `
style={Object {}}
>
<ActivityIndicator
+ accessibilityState={
+ Object {
+ "busy": true,
+ }
+ }
+ accessible={true}
animating={true}
color="gray"
hidesWhenStopped={true}
diff --git a/packages/pluggableWidgets/activity-indicator-native/src/package.xml b/packages/pluggableWidgets/activity-indicator-native/src/package.xml
index 45181c58a..e4f6468d4 100644
--- a/packages/pluggableWidgets/activity-indicator-native/src/package.xml
+++ b/packages/pluggableWidgets/activity-indicator-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="ActivityIndicator" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="ActivityIndicator" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="ActivityIndicator.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/activity-indicator-native/typings/ActivityIndicatorProps.d.ts b/packages/pluggableWidgets/activity-indicator-native/typings/ActivityIndicatorProps.d.ts
index 5c2c727e7..00a809abf 100644
--- a/packages/pluggableWidgets/activity-indicator-native/typings/ActivityIndicatorProps.d.ts
+++ b/packages/pluggableWidgets/activity-indicator-native/typings/ActivityIndicatorProps.d.ts
@@ -4,11 +4,16 @@
* @author Mendix UI Content Team
*/
import { CSSProperties } from "react";
+import { DynamicValue } from "mendix";
+
+export type AccessibleEnum = "yes" | "no";
export interface ActivityIndicatorProps<Style> {
name: string;
style: Style[];
-
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface ActivityIndicatorPreviewProps {
@@ -16,5 +21,7 @@ export interface ActivityIndicatorPreviewProps {
style: string;
styleObject?: CSSProperties;
readOnly: boolean;
-
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/badge-native/CHANGELOG.md b/packages/pluggableWidgets/badge-native/CHANGELOG.md
index 33952bb36..5b7892350 100644
--- a/packages/pluggableWidgets/badge-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/badge-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.2.0] - 2022-02-21
### Added
diff --git a/packages/pluggableWidgets/badge-native/package.json b/packages/pluggableWidgets/badge-native/package.json
index 9a5530cc2..cef8d66ff 100644
--- a/packages/pluggableWidgets/badge-native/package.json
+++ b/packages/pluggableWidgets/badge-native/package.json
@@ -1,7 +1,7 @@
{
"name": "badge-native",
"widgetName": "Badge",
- "version": "2.2.0",
+ "version": "2.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/badge-native/src/Badge.editorConfig.ts b/packages/pluggableWidgets/badge-native/src/Badge.editorConfig.ts
index fa0c07dbd..c68a4a0a9 100644
--- a/packages/pluggableWidgets/badge-native/src/Badge.editorConfig.ts
+++ b/packages/pluggableWidgets/badge-native/src/Badge.editorConfig.ts
@@ -1,5 +1,6 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
import { BadgePreviewProps } from "../typings/BadgeProps";
+import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
import badgeSvgDark from "./assets/Badge.dark.svg";
import badgeSvgLight from "./assets/Badge.light.svg";
@@ -11,3 +12,12 @@ export function getPreview(_: BadgePreviewProps, isDarkMode: boolean): Structure
width: 60
};
}
+
+export function getProperties(values: BadgePreviewProps, defaultProperties: Properties): Properties {
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
+ return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/badge-native/src/Badge.tsx b/packages/pluggableWidgets/badge-native/src/Badge.tsx
index ac1d597c3..02f429734 100644
--- a/packages/pluggableWidgets/badge-native/src/Badge.tsx
+++ b/packages/pluggableWidgets/badge-native/src/Badge.tsx
@@ -20,7 +20,16 @@ export function Badge(props: BadgeProps<BadgeStyle>): ReactElement {
}, [props.caption, styles]);
return (
- <View style={styles.container} testID={props.name}>
+ <View
+ accessible={props.accessible === "yes"}
+ accessibilityLabel={
+ props.screenReaderCaption?.value || (isAvailable(props.caption) ? props.caption.value : undefined)
+ }
+ accessibilityHint={props.screenReaderHint?.value}
+ accessibilityRole={props.onClick ? "button" : "text"}
+ style={styles.container}
+ testID={props.name}
+ >
{props.onClick ? (
<Pressable
onPress={() => executeAction(props.onClick)}
diff --git a/packages/pluggableWidgets/badge-native/src/Badge.xml b/packages/pluggableWidgets/badge-native/src/Badge.xml
index 90effda62..00176f727 100644
--- a/packages/pluggableWidgets/badge-native/src/Badge.xml
+++ b/packages/pluggableWidgets/badge-native/src/Badge.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.badge.Badge" 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>Badge</name>
<description>Display text or a value as a badge.</description>
@@ -9,17 +9,35 @@
<propertyGroup caption="General">
<property key="caption" type="textTemplate">
<caption>Caption</caption>
- <description/>
+ <description />
</property>
</propertyGroup>
<propertyGroup caption="Events">
<property key="onClick" type="action" required="false">
<caption>On click</caption>
- <description/>
+ <description />
</property>
</propertyGroup>
<propertyGroup caption="Common">
- <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>
</propertyGroup>
</propertyGroup>
</properties>
diff --git a/packages/pluggableWidgets/badge-native/src/__tests__/Badge.spec.tsx b/packages/pluggableWidgets/badge-native/src/__tests__/Badge.spec.tsx
index 9b9989ebd..b52050e24 100644
--- a/packages/pluggableWidgets/badge-native/src/__tests__/Badge.spec.tsx
+++ b/packages/pluggableWidgets/badge-native/src/__tests__/Badge.spec.tsx
@@ -12,6 +12,7 @@ jest.mock("react-native/Libraries/Utilities/Platform", () => ({
const defaultProps: Props = {
name: "badge-test",
+ accessible: "yes",
style: [],
caption: dynamicValue<string>()
};
diff --git a/packages/pluggableWidgets/badge-native/src/__tests__/__snapshots__/Badge.spec.tsx.snap b/packages/pluggableWidgets/badge-native/src/__tests__/__snapshots__/Badge.spec.tsx.snap
index f7be1dd47..b6069420d 100644
--- a/packages/pluggableWidgets/badge-native/src/__tests__/__snapshots__/Badge.spec.tsx.snap
+++ b/packages/pluggableWidgets/badge-native/src/__tests__/__snapshots__/Badge.spec.tsx.snap
@@ -2,6 +2,9 @@
exports[` 1`] = `
<View
+ accessibilityLabel="Caption"
+ accessibilityRole="text"
+ accessible={true}
style={
Object {
"alignSelf": "baseline",
@@ -31,6 +34,8 @@ exports[` 1`] = `
exports[`Badge renders with custom styles 1`] = `
<View
+ accessibilityRole="text"
+ accessible={true}
style={
Object {
"alignSelf": "baseline",
@@ -61,6 +66,8 @@ exports[`Badge renders with custom styles 1`] = `
exports[`Badge renders with default styles 1`] = `
<View
+ accessibilityRole="text"
+ accessible={true}
style={
Object {
"alignSelf": "baseline",
@@ -90,6 +97,8 @@ exports[`Badge renders with default styles 1`] = `
exports[`Badge with on click action Android renders touchables 1`] = `
<View
+ accessibilityRole="button"
+ accessible={true}
style={
Object {
"alignSelf": "baseline",
@@ -134,6 +143,8 @@ exports[`Badge with on click action Android renders touchables 1`] = `
exports[`Badge with on click action iOS renders touchables 1`] = `
<View
+ accessibilityRole="button"
+ accessible={true}
style={
Object {
"alignSelf": "baseline",
diff --git a/packages/pluggableWidgets/badge-native/src/package.xml b/packages/pluggableWidgets/badge-native/src/package.xml
index bde4c119e..a34a6dbe2 100644
--- a/packages/pluggableWidgets/badge-native/src/package.xml
+++ b/packages/pluggableWidgets/badge-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="Badge" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="Badge" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="Badge.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/badge-native/typings/BadgeProps.d.ts b/packages/pluggableWidgets/badge-native/typings/BadgeProps.d.ts
index 443131f48..d489424a2 100644
--- a/packages/pluggableWidgets/badge-native/typings/BadgeProps.d.ts
+++ b/packages/pluggableWidgets/badge-native/typings/BadgeProps.d.ts
@@ -6,11 +6,16 @@
import { CSSProperties } from "react";
import { ActionValue, DynamicValue } from "mendix";
+export type AccessibleEnum = "yes" | "no";
+
export interface BadgeProps<Style> {
name: string;
style: Style[];
caption: DynamicValue<string>;
onClick?: ActionValue;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface BadgePreviewProps {
@@ -20,4 +25,7 @@ export interface BadgePreviewProps {
readOnly: boolean;
caption: string;
onClick: {} | null;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/bar-chart-native/CHANGELOG.md b/packages/pluggableWidgets/bar-chart-native/CHANGELOG.md
index 6726f878f..7fbc9ada5 100644
--- a/packages/pluggableWidgets/bar-chart-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/bar-chart-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.2.1] - 2022-6-16
### Fixed
diff --git a/packages/pluggableWidgets/bar-chart-native/package.json b/packages/pluggableWidgets/bar-chart-native/package.json
index 24a92ce11..2415ffbbe 100644
--- a/packages/pluggableWidgets/bar-chart-native/package.json
+++ b/packages/pluggableWidgets/bar-chart-native/package.json
@@ -1,7 +1,7 @@
{
"name": "bar-chart-native",
"widgetName": "BarChart",
- "version": "2.2.1",
+ "version": "2.3.0",
"license": "Apache-2.0",
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
"repository": {
diff --git a/packages/pluggableWidgets/bar-chart-native/src/BarChart.editorConfig.ts b/packages/pluggableWidgets/bar-chart-native/src/BarChart.editorConfig.ts
index 8e2a731bd..cf6a7a730 100644
--- a/packages/pluggableWidgets/bar-chart-native/src/BarChart.editorConfig.ts
+++ b/packages/pluggableWidgets/bar-chart-native/src/BarChart.editorConfig.ts
@@ -1,5 +1,5 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
-import { hideNestedPropertiesIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
+import { hideNestedPropertiesIn, hidePropertyIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
import barChartGroupedSvgDark from "./assets/BarChart.Grouped.dark.svg";
import barChartGroupedSvgLight from "./assets/BarChart.Grouped.light.svg";
@@ -72,6 +72,11 @@ export function getProperties(values: BarChartPreviewProps, defaultProperties: P
}
});
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
return defaultProperties;
}
diff --git a/packages/pluggableWidgets/bar-chart-native/src/BarChart.tsx b/packages/pluggableWidgets/bar-chart-native/src/BarChart.tsx
index ea99b5f98..14d0a139d 100644
--- a/packages/pluggableWidgets/bar-chart-native/src/BarChart.tsx
+++ b/packages/pluggableWidgets/bar-chart-native/src/BarChart.tsx
@@ -7,7 +7,18 @@ import { BarChartStyle, defaultBarChartStyle } from "./ui/Styles";
import { useSeries } from "./utils/SeriesLoader";
export function BarChart(props: BarChartProps<BarChartStyle>): ReactElement | null {
- const { name, barSeries, style, xAxisLabel, yAxisLabel, showLabels, ...rest } = props;
+ const {
+ name,
+ barSeries,
+ style,
+ xAxisLabel,
+ yAxisLabel,
+ showLabels,
+ accessible,
+ screenReaderCaption,
+ screenReaderHint,
+ ...rest
+ } = props;
const customStyles = style.filter(o => o != null);
@@ -22,6 +33,9 @@ export function BarChart(props: BarChartProps<BarChartStyle>): ReactElement | nu
return (
<BarChartComponent
name={name}
+ accessible={accessible === "yes"}
+ screenReaderCaption={screenReaderCaption}
+ screenReaderHint={screenReaderHint}
series={series}
style={styles}
xAxisLabel={xAxisLabel?.value}
diff --git a/packages/pluggableWidgets/bar-chart-native/src/BarChart.xml b/packages/pluggableWidgets/bar-chart-native/src/BarChart.xml
index 286bbdac2..5855b8491 100644
--- a/packages/pluggableWidgets/bar-chart-native/src/BarChart.xml
+++ b/packages/pluggableWidgets/bar-chart-native/src/BarChart.xml
@@ -159,6 +159,24 @@
<systemProperty key="Name" />
<systemProperty key="Visibility" />
</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>
+ </propertyGroup>
</propertyGroup>
</properties>
</widget>
diff --git a/packages/pluggableWidgets/bar-chart-native/src/components/BarChart.tsx b/packages/pluggableWidgets/bar-chart-native/src/components/BarChart.tsx
index 67ed88c03..ce31ec827 100644
--- a/packages/pluggableWidgets/bar-chart-native/src/components/BarChart.tsx
+++ b/packages/pluggableWidgets/bar-chart-native/src/components/BarChart.tsx
@@ -9,6 +9,8 @@ import { SortOrderEnum } from "../../typings/BarChartProps";
import { Legend } from "./Legend";
import { aggregateGridPadding, mapToAxisStyle, mapToGridStyle, mapToBarStyles } from "../utils/StyleUtils";
+import { DynamicValue } from "mendix";
+
export interface BarChartProps {
name: string;
series: BarChartSeries[];
@@ -20,6 +22,9 @@ export interface BarChartProps {
xAxisLabel?: string;
yAxisLabel?: string;
warningPrefix?: string;
+ accessible: boolean;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface BarChartSeries {
@@ -48,6 +53,9 @@ export interface BarDataPoint<X extends number | Date | string, Y extends number
export function BarChart({
name,
+ accessible,
+ screenReaderCaption,
+ screenReaderHint,
presentation,
series,
showLabels,
@@ -201,7 +209,13 @@ export function BarChart({
);
return (
- <View style={style.container} testID={name}>
+ <View
+ accessible={accessible}
+ accessibilityLabel={screenReaderCaption?.value}
+ accessibilityHint={screenReaderHint?.value}
+ style={style.container}
+ testID={name}
+ >
{dataTypesResult instanceof Error ? (
<Text style={style.errorMessage}>{dataTypesResult.message}</Text>
) : (
diff --git a/packages/pluggableWidgets/bar-chart-native/src/package.xml b/packages/pluggableWidgets/bar-chart-native/src/package.xml
index 2cea2cbf0..899be60e8 100644
--- a/packages/pluggableWidgets/bar-chart-native/src/package.xml
+++ b/packages/pluggableWidgets/bar-chart-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="BarChart" version="2.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="BarChart" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="BarChart.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/bar-chart-native/typings/BarChartProps.d.ts b/packages/pluggableWidgets/bar-chart-native/typings/BarChartProps.d.ts
index 11af89777..aaf31cf4a 100644
--- a/packages/pluggableWidgets/bar-chart-native/typings/BarChartProps.d.ts
+++ b/packages/pluggableWidgets/bar-chart-native/typings/BarChartProps.d.ts
@@ -28,6 +28,8 @@ export interface BarSeriesType {
export type SortOrderEnum = "ascending" | "descending";
+export type AccessibleEnum = "yes" | "no";
+
export interface BarSeriesPreviewType {
dataSet: DataSetEnum;
staticDataSource: {} | { type: string } | null;
@@ -53,6 +55,9 @@ export interface BarChartProps<Style> {
showLegend: boolean;
xAxisLabel?: DynamicValue<string>;
yAxisLabel?: DynamicValue<string>;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface BarChartPreviewProps {
@@ -67,4 +72,7 @@ export interface BarChartPreviewProps {
showLegend: boolean;
xAxisLabel: string;
yAxisLabel: string;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/barcode-scanner-native/CHANGELOG.md b/packages/pluggableWidgets/barcode-scanner-native/CHANGELOG.md
index bfe3e1af6..ae9676e95 100644
--- a/packages/pluggableWidgets/barcode-scanner-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/barcode-scanner-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [3.2.0] - 2022-02-21
### Added
diff --git a/packages/pluggableWidgets/barcode-scanner-native/package.json b/packages/pluggableWidgets/barcode-scanner-native/package.json
index 192bb210a..265deb20f 100644
--- a/packages/pluggableWidgets/barcode-scanner-native/package.json
+++ b/packages/pluggableWidgets/barcode-scanner-native/package.json
@@ -1,7 +1,7 @@
{
"name": "barcode-scanner-native",
"widgetName": "BarcodeScanner",
- "version": "3.2.0",
+ "version": "3.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/barcode-scanner-native/src/BarcodeScanner.editorConfig.ts b/packages/pluggableWidgets/barcode-scanner-native/src/BarcodeScanner.editorConfig.ts
index 277018eb9..bed85ceac 100644
--- a/packages/pluggableWidgets/barcode-scanner-native/src/BarcodeScanner.editorConfig.ts
+++ b/packages/pluggableWidgets/barcode-scanner-native/src/BarcodeScanner.editorConfig.ts
@@ -1,4 +1,5 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
+import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
import barcodeScannerSvgDark from "./assets/BarcodeScanner.dark.svg";
import barcodeScannerSvgLight from "./assets/BarcodeScanner.light.svg";
@@ -13,3 +14,12 @@ export function getPreview(_: BarcodeScannerPreviewProps, isDarkMode: boolean):
width: 100
};
}
+
+export function getProperties(values: BarcodeScannerPreviewProps, defaultProperties: Properties): Properties {
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
+ return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/barcode-scanner-native/src/BarcodeScanner.tsx b/packages/pluggableWidgets/barcode-scanner-native/src/BarcodeScanner.tsx
index e15c808be..3dabe6248 100644
--- a/packages/pluggableWidgets/barcode-scanner-native/src/BarcodeScanner.tsx
+++ b/packages/pluggableWidgets/barcode-scanner-native/src/BarcodeScanner.tsx
@@ -19,6 +19,9 @@ export class BarcodeScanner extends Component<Props> {
return (
<View style={this.styles.container}>
<RNCamera
+ accessible={this.props.accessible === "yes"}
+ accessibilityLabel={this.props.screenReaderCaption?.value}
+ accessibilityHint={this.props.screenReaderHint?.value}
testID={this.props.name}
style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
captureAudio={false}
diff --git a/packages/pluggableWidgets/barcode-scanner-native/src/BarcodeScanner.xml b/packages/pluggableWidgets/barcode-scanner-native/src/BarcodeScanner.xml
index b8f87cf56..04ba01497 100644
--- a/packages/pluggableWidgets/barcode-scanner-native/src/BarcodeScanner.xml
+++ b/packages/pluggableWidgets/barcode-scanner-native/src/BarcodeScanner.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.barcodescanner.BarcodeScanner" 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>Barcode scanner</name>
<description>Scan barcode and QR code values.</description>
@@ -11,7 +11,7 @@
<caption>Barcode</caption>
<description>The attribute that will receive the scanned barcode value.</description>
<attributeTypes>
- <attributeType name="String"/>
+ <attributeType name="String" />
</attributeTypes>
</property>
</propertyGroup>
@@ -28,11 +28,29 @@
<propertyGroup caption="Events">
<property key="onDetect" type="action" required="false">
<caption>On detect</caption>
- <description/>
+ <description />
</property>
</propertyGroup>
<propertyGroup caption="Common">
- <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>
</propertyGroup>
</propertyGroup>
</properties>
diff --git a/packages/pluggableWidgets/barcode-scanner-native/src/__tests__/BarcodeScanner.spec.tsx b/packages/pluggableWidgets/barcode-scanner-native/src/__tests__/BarcodeScanner.spec.tsx
index 4b9f99149..7d60da4f3 100644
--- a/packages/pluggableWidgets/barcode-scanner-native/src/__tests__/BarcodeScanner.spec.tsx
+++ b/packages/pluggableWidgets/barcode-scanner-native/src/__tests__/BarcodeScanner.spec.tsx
@@ -14,6 +14,7 @@ describe("BarcodeScanner", () => {
beforeEach(() => {
defaultProps = {
+ accessible: "yes",
showAnimatedLine: false,
showMask: false,
name: "barcode-scanner-test",
diff --git a/packages/pluggableWidgets/barcode-scanner-native/src/package.xml b/packages/pluggableWidgets/barcode-scanner-native/src/package.xml
index cf93335c5..1cc7566c2 100644
--- a/packages/pluggableWidgets/barcode-scanner-native/src/package.xml
+++ b/packages/pluggableWidgets/barcode-scanner-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="BarcodeScanner" version="3.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="BarcodeScanner" version="3.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="BarcodeScanner.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/barcode-scanner-native/typings/BarcodeScannerProps.d.ts b/packages/pluggableWidgets/barcode-scanner-native/typings/BarcodeScannerProps.d.ts
index 704a87999..330d5a987 100644
--- a/packages/pluggableWidgets/barcode-scanner-native/typings/BarcodeScannerProps.d.ts
+++ b/packages/pluggableWidgets/barcode-scanner-native/typings/BarcodeScannerProps.d.ts
@@ -4,7 +4,9 @@
* @author Mendix UI Content Team
*/
import { CSSProperties } from "react";
-import { ActionValue, EditableValue } from "mendix";
+import { ActionValue, DynamicValue, EditableValue } from "mendix";
+
+export type AccessibleEnum = "yes" | "no";
export interface BarcodeScannerProps<Style> {
name: string;
@@ -13,6 +15,9 @@ export interface BarcodeScannerProps<Style> {
showMask: boolean;
showAnimatedLine: boolean;
onDetect?: ActionValue;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface BarcodeScannerPreviewProps {
@@ -24,4 +29,7 @@ export interface BarcodeScannerPreviewProps {
showMask: boolean;
showAnimatedLine: boolean;
onDetect: {} | null;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/bottom-sheet-native/CHANGELOG.md b/packages/pluggableWidgets/bottom-sheet-native/CHANGELOG.md
index da94d2aa6..2960d7448 100644
--- a/packages/pluggableWidgets/bottom-sheet-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/bottom-sheet-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [3.2.1] - 2022-9-20
### Changed
diff --git a/packages/pluggableWidgets/bottom-sheet-native/package.json b/packages/pluggableWidgets/bottom-sheet-native/package.json
index dafc1fab7..60234e01c 100644
--- a/packages/pluggableWidgets/bottom-sheet-native/package.json
+++ b/packages/pluggableWidgets/bottom-sheet-native/package.json
@@ -1,7 +1,7 @@
{
"name": "bottom-sheet-native",
"widgetName": "BottomSheet",
- "version": "3.2.1",
+ "version": "3.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
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/__tests__/BottomSheet.spec.tsx b/packages/pluggableWidgets/bottom-sheet-native/src/__tests__/BottomSheet.spec.tsx
index afcd47573..06b606fd2 100644
--- a/packages/pluggableWidgets/bottom-sheet-native/src/__tests__/BottomSheet.spec.tsx
+++ b/packages/pluggableWidgets/bottom-sheet-native/src/__tests__/BottomSheet.spec.tsx
@@ -23,14 +23,17 @@ const defaultProps: BottomSheetProps<BottomSheetStyle> = {
nativeImplementation: true,
type: "modal",
modalRendering: "basic",
+ accessible: "yes",
itemsBasic: [
{
caption: "Item 1",
- styleClass: "defaultStyle"
+ styleClass: "defaultStyle",
+ modalAccessible: "yes"
},
{
caption: "Item 2",
- styleClass: "defaultStyle"
+ styleClass: "defaultStyle",
+ modalAccessible: "yes"
}
],
showFullscreenContent: false,
diff --git a/packages/pluggableWidgets/bottom-sheet-native/src/__tests__/__snapshots__/BottomSheet.spec.tsx.snap b/packages/pluggableWidgets/bottom-sheet-native/src/__tests__/__snapshots__/BottomSheet.spec.tsx.snap
index 0793a95e3..9ea1eeca4 100644
--- a/packages/pluggableWidgets/bottom-sheet-native/src/__tests__/__snapshots__/BottomSheet.spec.tsx.snap
+++ b/packages/pluggableWidgets/bottom-sheet-native/src/__tests__/__snapshots__/BottomSheet.spec.tsx.snap
@@ -84,6 +84,9 @@ exports[`Bottom sheet renders a custom bottom action sheet for ios (Basic modal)
}
>
<Text
+ accessibilityLabel="Item 1"
+ accessibilityRole="button"
+ accessible={true}
style={
Object {
"color": "red",
@@ -118,6 +121,9 @@ exports[`Bottom sheet renders a custom bottom action sheet for ios (Basic modal)
}
>
<Text
+ accessibilityLabel="Item 2"
+ accessibilityRole="button"
+ accessible={true}
style={
Object {
"color": "red",
@@ -174,6 +180,12 @@ exports[`Bottom sheet renders a expanding 1`] = `
pointerEvents="box-none"
>
<View
+ accessibilityState={
+ Object {
+ "expanded": false,
+ }
+ }
+ accessible={true}
onLayout={[Function]}
pointerEvents="box-none"
style={Object {}}
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/src/package.xml b/packages/pluggableWidgets/bottom-sheet-native/src/package.xml
index 85cf11f44..e863f164f 100644
--- a/packages/pluggableWidgets/bottom-sheet-native/src/package.xml
+++ b/packages/pluggableWidgets/bottom-sheet-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="BottomSheet" version="3.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="BottomSheet" version="3.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="BottomSheet.xml" />
</widgetFiles>
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/CHANGELOG.md b/packages/pluggableWidgets/carousel-native/CHANGELOG.md
index 81842d590..32636d9e2 100644
--- a/packages/pluggableWidgets/carousel-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/carousel-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.2.3] - 2022-10-10
### Fixed
diff --git a/packages/pluggableWidgets/carousel-native/package.json b/packages/pluggableWidgets/carousel-native/package.json
index 8b9c2374a..66501cb87 100644
--- a/packages/pluggableWidgets/carousel-native/package.json
+++ b/packages/pluggableWidgets/carousel-native/package.json
@@ -1,7 +1,7 @@
{
"name": "carousel-native",
"widgetName": "Carousel",
- "version": "2.2.3",
+ "version": "2.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
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/src/__tests__/Carousel.spec.tsx b/packages/pluggableWidgets/carousel-native/src/__tests__/Carousel.spec.tsx
index cdbdbc891..2b9fb189b 100644
--- a/packages/pluggableWidgets/carousel-native/src/__tests__/Carousel.spec.tsx
+++ b/packages/pluggableWidgets/carousel-native/src/__tests__/Carousel.spec.tsx
@@ -12,6 +12,7 @@ describe("Carousel", () => {
beforeEach(() => {
defaultProps = {
name: "carousel",
+ accessible: "yes",
contentSource: listValueBuilder.simple(),
content: buildWidgetValue(
<View>
diff --git a/packages/pluggableWidgets/carousel-native/src/package.xml b/packages/pluggableWidgets/carousel-native/src/package.xml
index 1a0a8e20d..4e0fd6520 100644
--- a/packages/pluggableWidgets/carousel-native/src/package.xml
+++ b/packages/pluggableWidgets/carousel-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="Carousel" version="2.2.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="Carousel" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="Carousel.xml" />
</widgetFiles>
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/CHANGELOG.md b/packages/pluggableWidgets/color-picker-native/CHANGELOG.md
index 7a4d84e5d..8501ef71f 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
+
+- Added accessibility.
+
## [1.2.0] - 2022-02-21
### Added
diff --git a/packages/pluggableWidgets/color-picker-native/package.json b/packages/pluggableWidgets/color-picker-native/package.json
index 7892df8d5..9aef26de8 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": "1.2.0",
+ "version": "1.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
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/__tests__/ColorPicker.spec.tsx b/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx
index 5f15af02a..e1c67a04d 100644
--- a/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx
+++ b/packages/pluggableWidgets/color-picker-native/src/__tests__/ColorPicker.spec.tsx
@@ -12,6 +12,7 @@ describe("Color Picker", () => {
beforeEach(() => {
defaultProps = {
name: "color-picker-test",
+ accessible: "yes",
style: [],
format: "hex",
color: new EditableValueBuilder<string>().withValue("#ff0000").build(),
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 a770a10df..df04eec89 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
@@ -6,6 +6,7 @@ exports[`Color Picker renders 1`] = `
testID="color-picker-test"
>
<View
+ accessible={true}
style={
Array [
Object {
@@ -20,8 +21,32 @@ exports[`Color Picker renders 1`] = `
testID="color-picker-test$preview"
/>
<View
+ accessibilityActions={
+ Array [
+ Object {
+ "name": "increment",
+ },
+ Object {
+ "name": "decrement",
+ },
+ ]
+ }
+ accessibilityRole="adjustable"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ }
+ }
+ accessibilityValue={
+ Object {
+ "max": 359,
+ "min": 0,
+ "now": 0,
+ }
+ }
accessible={true}
focusable={false}
+ onAccessibilityAction={[Function]}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
@@ -904,8 +929,30 @@ exports[`Color Picker renders 1`] = `
</View>
</View>
<View
+ accessibilityActions={
+ Array [
+ Object {
+ "name": "increment",
+ },
+ Object {
+ "name": "decrement",
+ },
+ ]
+ }
+ accessibilityRole="adjustable"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ }
+ }
+ accessibilityValue={
+ Object {
+ "text": "100%",
+ }
+ }
accessible={true}
focusable={false}
+ onAccessibilityAction={[Function]}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
@@ -1788,8 +1835,30 @@ exports[`Color Picker renders 1`] = `
</View>
</View>
<View
+ accessibilityActions={
+ Array [
+ Object {
+ "name": "increment",
+ },
+ Object {
+ "name": "decrement",
+ },
+ ]
+ }
+ accessibilityRole="adjustable"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ }
+ }
+ accessibilityValue={
+ Object {
+ "text": "50%",
+ }
+ }
accessible={true}
focusable={false}
+ onAccessibilityAction={[Function]}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
@@ -2680,6 +2749,7 @@ exports[`Color Picker renders with alpha slider 1`] = `
testID="color-picker-test"
>
<View
+ accessible={true}
style={
Array [
Object {
@@ -2694,8 +2764,32 @@ exports[`Color Picker renders with alpha slider 1`] = `
testID="color-picker-test$preview"
/>
<View
+ accessibilityActions={
+ Array [
+ Object {
+ "name": "increment",
+ },
+ Object {
+ "name": "decrement",
+ },
+ ]
+ }
+ accessibilityRole="adjustable"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ }
+ }
+ accessibilityValue={
+ Object {
+ "max": 359,
+ "min": 0,
+ "now": 0,
+ }
+ }
accessible={true}
focusable={false}
+ onAccessibilityAction={[Function]}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
@@ -3578,8 +3672,30 @@ exports[`Color Picker renders with alpha slider 1`] = `
</View>
</View>
<View
+ accessibilityActions={
+ Array [
+ Object {
+ "name": "increment",
+ },
+ Object {
+ "name": "decrement",
+ },
+ ]
+ }
+ accessibilityRole="adjustable"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ }
+ }
+ accessibilityValue={
+ Object {
+ "text": "100%",
+ }
+ }
accessible={true}
focusable={false}
+ onAccessibilityAction={[Function]}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
@@ -4462,8 +4578,30 @@ exports[`Color Picker renders with alpha slider 1`] = `
</View>
</View>
<View
+ accessibilityActions={
+ Array [
+ Object {
+ "name": "increment",
+ },
+ Object {
+ "name": "decrement",
+ },
+ ]
+ }
+ accessibilityRole="adjustable"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ }
+ }
+ accessibilityValue={
+ Object {
+ "text": "50%",
+ }
+ }
accessible={true}
focusable={false}
+ onAccessibilityAction={[Function]}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
@@ -5346,8 +5484,30 @@ exports[`Color Picker renders with alpha slider 1`] = `
</View>
</View>
<View
+ accessibilityActions={
+ Array [
+ Object {
+ "name": "increment",
+ },
+ Object {
+ "name": "decrement",
+ },
+ ]
+ }
+ accessibilityRole="adjustable"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ }
+ }
+ accessibilityValue={
+ Object {
+ "text": "100%",
+ }
+ }
accessible={true}
focusable={false}
+ onAccessibilityAction={[Function]}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
@@ -6238,6 +6398,7 @@ exports[`Color Picker renders with custom style 1`] = `
testID="color-picker-test"
>
<View
+ accessible={true}
style={
Array [
Object {
@@ -6253,8 +6414,32 @@ exports[`Color Picker renders with custom style 1`] = `
testID="color-picker-test$preview"
/>
<View
+ accessibilityActions={
+ Array [
+ Object {
+ "name": "increment",
+ },
+ Object {
+ "name": "decrement",
+ },
+ ]
+ }
+ accessibilityRole="adjustable"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ }
+ }
+ accessibilityValue={
+ Object {
+ "max": 359,
+ "min": 0,
+ "now": 0,
+ }
+ }
accessible={true}
focusable={false}
+ onAccessibilityAction={[Function]}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
@@ -7137,8 +7322,30 @@ exports[`Color Picker renders with custom style 1`] = `
</View>
</View>
<View
+ accessibilityActions={
+ Array [
+ Object {
+ "name": "increment",
+ },
+ Object {
+ "name": "decrement",
+ },
+ ]
+ }
+ accessibilityRole="adjustable"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ }
+ }
+ accessibilityValue={
+ Object {
+ "text": "100%",
+ }
+ }
accessible={true}
focusable={false}
+ onAccessibilityAction={[Function]}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
@@ -8021,8 +8228,30 @@ exports[`Color Picker renders with custom style 1`] = `
</View>
</View>
<View
+ accessibilityActions={
+ Array [
+ Object {
+ "name": "increment",
+ },
+ Object {
+ "name": "decrement",
+ },
+ ]
+ }
+ accessibilityRole="adjustable"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ }
+ }
+ accessibilityValue={
+ Object {
+ "text": "50%",
+ }
+ }
accessible={true}
focusable={false}
+ onAccessibilityAction={[Function]}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
diff --git a/packages/pluggableWidgets/color-picker-native/src/components/PickerSlider.tsx b/packages/pluggableWidgets/color-picker-native/src/components/PickerSlider.tsx
index 38c331528..f777ab747 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,67 @@ 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;
+ 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/src/package.xml b/packages/pluggableWidgets/color-picker-native/src/package.xml
index c48fc8642..0330ede15 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="1.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="ColorPicker" version="1.3.0" 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 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/column-chart-native/CHANGELOG.md b/packages/pluggableWidgets/column-chart-native/CHANGELOG.md
index 1a7f5a08d..92cf4d8cc 100644
--- a/packages/pluggableWidgets/column-chart-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/column-chart-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [1.0.0] - 2022-6-16
### Added
diff --git a/packages/pluggableWidgets/column-chart-native/package.json b/packages/pluggableWidgets/column-chart-native/package.json
index f0c1ea47c..3f1c9bd41 100644
--- a/packages/pluggableWidgets/column-chart-native/package.json
+++ b/packages/pluggableWidgets/column-chart-native/package.json
@@ -1,7 +1,7 @@
{
"name": "column-chart-native",
"widgetName": "ColumnChart",
- "version": "1.0.0",
+ "version": "1.1.0",
"license": "Apache-2.0",
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
"repository": {
diff --git a/packages/pluggableWidgets/column-chart-native/src/ColumnChart.editorConfig.ts b/packages/pluggableWidgets/column-chart-native/src/ColumnChart.editorConfig.ts
index c6845609c..dba62a5d9 100644
--- a/packages/pluggableWidgets/column-chart-native/src/ColumnChart.editorConfig.ts
+++ b/packages/pluggableWidgets/column-chart-native/src/ColumnChart.editorConfig.ts
@@ -1,5 +1,5 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
-import { hideNestedPropertiesIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
+import { hideNestedPropertiesIn, hidePropertyIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
import { ColumnChartPreviewProps } from "../typings/ColumnChartProps";
import columnChartGroupedSvgDark from "./assets/ColumnChart.Grouped.dark.svg";
@@ -71,6 +71,11 @@ export function getProperties(values: ColumnChartPreviewProps, defaultProperties
}
});
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
return defaultProperties;
}
diff --git a/packages/pluggableWidgets/column-chart-native/src/ColumnChart.tsx b/packages/pluggableWidgets/column-chart-native/src/ColumnChart.tsx
index 5290d1ae9..4293980ae 100644
--- a/packages/pluggableWidgets/column-chart-native/src/ColumnChart.tsx
+++ b/packages/pluggableWidgets/column-chart-native/src/ColumnChart.tsx
@@ -7,7 +7,18 @@ import { ColumnChartStyle, defaultColumnChartStyle } from "./ui/Styles";
import { useSeries } from "./utils/SeriesLoader";
export function ColumnChart(props: ColumnChartProps<ColumnChartStyle>): ReactElement | null {
- const { name, columnSeries, style, xAxisLabel, yAxisLabel, showLabels, ...rest } = props;
+ const {
+ name,
+ columnSeries,
+ style,
+ xAxisLabel,
+ yAxisLabel,
+ showLabels,
+ accessible,
+ screenReaderCaption,
+ screenReaderHint,
+ ...rest
+ } = props;
const customStyles = style.filter(o => o != null);
@@ -22,6 +33,9 @@ export function ColumnChart(props: ColumnChartProps<ColumnChartStyle>): ReactEle
return (
<ColumnChartComponent
name={name}
+ accessible={accessible === "yes"}
+ screenReaderCaption={screenReaderCaption}
+ screenReaderHint={screenReaderHint}
series={series}
style={styles}
xAxisLabel={xAxisLabel?.value}
diff --git a/packages/pluggableWidgets/column-chart-native/src/ColumnChart.xml b/packages/pluggableWidgets/column-chart-native/src/ColumnChart.xml
index 5bf916f43..543c4261f 100644
--- a/packages/pluggableWidgets/column-chart-native/src/ColumnChart.xml
+++ b/packages/pluggableWidgets/column-chart-native/src/ColumnChart.xml
@@ -159,6 +159,25 @@
<systemProperty key="Name" />
<systemProperty key="Visibility" />
</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>
+ </propertyGroup>
</propertyGroup>
</properties>
</widget>
diff --git a/packages/pluggableWidgets/column-chart-native/src/components/ColumnChart.tsx b/packages/pluggableWidgets/column-chart-native/src/components/ColumnChart.tsx
index 5346912a3..eb3b1c236 100644
--- a/packages/pluggableWidgets/column-chart-native/src/components/ColumnChart.tsx
+++ b/packages/pluggableWidgets/column-chart-native/src/components/ColumnChart.tsx
@@ -9,6 +9,8 @@ import { SortOrderEnum } from "../../typings/ColumnChartProps";
import { Legend } from "./Legend";
import { aggregateGridPadding, mapToAxisStyle, mapToGridStyle, mapToColumnStyles } from "../utils/StyleUtils";
+import { DynamicValue } from "mendix";
+
export interface ColumnChartProps {
name: string;
series: ColumnChartSeries[];
@@ -20,6 +22,9 @@ export interface ColumnChartProps {
xAxisLabel?: string;
yAxisLabel?: string;
warningPrefix?: string;
+ accessible: boolean;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface ColumnChartSeries {
@@ -56,7 +61,10 @@ export function ColumnChart({
showLegend,
sortOrder,
style,
- warningPrefix
+ warningPrefix,
+ accessible,
+ screenReaderCaption,
+ screenReaderHint
}: ColumnChartProps): ReactElement | null {
const dataTypesResult = useMemo(() => getDataTypes(series), [series]);
const sortedSeries = useMemo(() => {
@@ -159,7 +167,13 @@ export function ColumnChart({
);
return (
- <View style={style.container} testID={name}>
+ <View
+ accessible={accessible}
+ accessibilityLabel={screenReaderCaption?.value}
+ accessibilityHint={screenReaderHint?.value}
+ style={style.container}
+ testID={name}
+ >
{dataTypesResult instanceof Error ? (
<Text style={style.errorMessage}>{dataTypesResult.message}</Text>
) : (
diff --git a/packages/pluggableWidgets/column-chart-native/src/package.xml b/packages/pluggableWidgets/column-chart-native/src/package.xml
index 8400e620c..159d9bf0e 100644
--- a/packages/pluggableWidgets/column-chart-native/src/package.xml
+++ b/packages/pluggableWidgets/column-chart-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="ColumnChart" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="ColumnChart" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="ColumnChart.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/column-chart-native/typings/ColumnChartProps.d.ts b/packages/pluggableWidgets/column-chart-native/typings/ColumnChartProps.d.ts
index 0677a9b7a..e8b605b73 100644
--- a/packages/pluggableWidgets/column-chart-native/typings/ColumnChartProps.d.ts
+++ b/packages/pluggableWidgets/column-chart-native/typings/ColumnChartProps.d.ts
@@ -28,6 +28,8 @@ export interface ColumnSeriesType {
export type SortOrderEnum = "ascending" | "descending";
+export type AccessibleEnum = "yes" | "no";
+
export interface ColumnSeriesPreviewType {
dataSet: DataSetEnum;
staticDataSource: {} | { type: string } | null;
@@ -53,6 +55,9 @@ export interface ColumnChartProps<Style> {
showLegend: boolean;
xAxisLabel?: DynamicValue<string>;
yAxisLabel?: DynamicValue<string>;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface ColumnChartPreviewProps {
@@ -67,4 +72,7 @@ export interface ColumnChartPreviewProps {
showLegend: boolean;
xAxisLabel: string;
yAxisLabel: string;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/feedback-native/CHANGELOG.md b/packages/pluggableWidgets/feedback-native/CHANGELOG.md
index 1fef9fc57..be4ebf139 100644
--- a/packages/pluggableWidgets/feedback-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/feedback-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [3.2.2] - 2022-10-5
### Fixed
diff --git a/packages/pluggableWidgets/feedback-native/package.json b/packages/pluggableWidgets/feedback-native/package.json
index 4556965f0..c242173e5 100644
--- a/packages/pluggableWidgets/feedback-native/package.json
+++ b/packages/pluggableWidgets/feedback-native/package.json
@@ -1,7 +1,7 @@
{
"name": "feedback-native",
"widgetName": "Feedback",
- "version": "3.2.2",
+ "version": "3.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
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/src/__tests__/Feedback.spec.tsx b/packages/pluggableWidgets/feedback-native/src/__tests__/Feedback.spec.tsx
index d4e4c2448..125ea546e 100644
--- a/packages/pluggableWidgets/feedback-native/src/__tests__/Feedback.spec.tsx
+++ b/packages/pluggableWidgets/feedback-native/src/__tests__/Feedback.spec.tsx
@@ -16,6 +16,7 @@ describe("Feedback", () => {
beforeEach(() => {
defaultProps = {
name: "feedback-test",
+ accessible: "yes",
style: [],
sprintrapp: "sprintr-app-id",
allowScreenshot: true,
diff --git a/packages/pluggableWidgets/feedback-native/src/__tests__/__snapshots__/Feedback.spec.tsx.snap b/packages/pluggableWidgets/feedback-native/src/__tests__/__snapshots__/Feedback.spec.tsx.snap
index cea9edad8..30488e70d 100644
--- a/packages/pluggableWidgets/feedback-native/src/__tests__/__snapshots__/Feedback.spec.tsx.snap
+++ b/packages/pluggableWidgets/feedback-native/src/__tests__/__snapshots__/Feedback.spec.tsx.snap
@@ -3,6 +3,7 @@
exports[`Feedback renders 1`] = `
Array [
<View
+ accessible={true}
style={
Object {
"marginTop": 567,
diff --git a/packages/pluggableWidgets/feedback-native/src/package.xml b/packages/pluggableWidgets/feedback-native/src/package.xml
index 8af2d3501..651a37598 100644
--- a/packages/pluggableWidgets/feedback-native/src/package.xml
+++ b/packages/pluggableWidgets/feedback-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="Feedback" version="3.2.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="Feedback" version="3.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="Feedback.xml" />
</widgetFiles>
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;
}
diff --git a/packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md b/packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md
index c74e3f2f0..4129cfbca 100644
--- a/packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/floating-action-button-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [3.1.0] - 2022-01-24
### Added
diff --git a/packages/pluggableWidgets/floating-action-button-native/package.json b/packages/pluggableWidgets/floating-action-button-native/package.json
index 565e532b4..9beaf514c 100644
--- a/packages/pluggableWidgets/floating-action-button-native/package.json
+++ b/packages/pluggableWidgets/floating-action-button-native/package.json
@@ -1,7 +1,7 @@
{
"name": "floating-action-button-native",
"widgetName": "FloatingActionButton",
- "version": "3.1.0",
+ "version": "3.2.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.editorConfig.ts b/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.editorConfig.ts
index 8b8a1e113..102b24c82 100644
--- a/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.editorConfig.ts
+++ b/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.editorConfig.ts
@@ -1,4 +1,5 @@
import { ImageProps, ContainerProps, StructurePreviewProps } from "@mendix/piw-utils-internal";
+import { Properties, hidePropertyIn } from "@mendix/pluggable-widgets-tools";
import { FloatingActionButtonPreviewProps } from "../typings/FloatingActionButtonProps";
import StructurePreviewFloatingActionButtonPrimarySVG from "./assets/StructurePreviewFloatingActionButtonPrimary.svg";
import StructurePreviewFloatingActionButtonPrimaryDarkSVG from "./assets/StructurePreviewFloatingActionButtonPrimaryDark.svg";
@@ -33,3 +34,10 @@ export const getPreview = (
: [rowLayoutContainer, rowLayoutImage]
};
};
+
+export function getProperties(values: FloatingActionButtonPreviewProps, defaultProperties: Properties): Properties {
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ }
+ return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.tsx b/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.tsx
index 89fd4032a..b9936e37d 100644
--- a/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.tsx
+++ b/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.tsx
@@ -30,6 +30,8 @@ export class FloatingActionButton extends Component<FloatingActionButtonProps<Fl
return (
<ActionButton
+ accessible={this.props.accessible === "yes"}
+ accessibilityLabel={this.props.screenReaderCaption?.value}
size={this.styles.button.size}
style={this.styles.container}
shadowStyle={buttonStyle}
@@ -77,6 +79,7 @@ export class FloatingActionButton extends Component<FloatingActionButtonProps<Fl
return (
<ActionButton.Item
testID={`${this.props.name}$button${index}`}
+ accessibilityLabel={button.buttonScreenReaderCaption?.value}
key={`button${index}`}
size={this.styles.secondaryButton.size}
title={button.caption && button.caption.value}
diff --git a/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.xml b/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.xml
index 2eca2e899..474f99029 100644
--- a/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.xml
+++ b/packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.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.floatingactionbutton.FloatingActionButton" supportedPlatform="Native" needsEntityContext="false" 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>Floating action button</name>
<description>Display a circular floating icon button.</description>
@@ -9,7 +9,7 @@
<propertyGroup caption="Button">
<property key="icon" type="icon" required="false">
<caption>Icon</caption>
- <description/>
+ <description />
</property>
<property key="iconActive" type="icon" required="false">
<caption>Secondary icon</caption>
@@ -19,7 +19,7 @@
<propertyGroup caption="Position">
<property key="horizontalPosition" type="enumeration" defaultValue="right">
<caption>Horizontal</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="left">Left</enumerationValue>
<enumerationValue key="center">Center</enumerationValue>
@@ -28,7 +28,7 @@
</property>
<property key="verticalPosition" type="enumeration" defaultValue="bottom">
<caption>Vertical</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="top">Top</enumerationValue>
<enumerationValue key="bottom">Bottom</enumerationValue>
@@ -42,7 +42,21 @@
</property>
</propertyGroup>
<propertyGroup caption="Common">
- <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>
</propertyGroup>
</propertyGroup>
<propertyGroup caption="Secondary buttons">
@@ -53,15 +67,27 @@
<propertyGroup caption="Button">
<property key="icon" type="icon">
<caption>Icon</caption>
- <description/>
+ <description />
</property>
<property key="caption" type="textTemplate" required="false">
<caption>Caption</caption>
- <description/>
+ <description />
</property>
<property key="onClick" type="action">
<caption>On click</caption>
- <description/>
+ <description />
+ </property>
+ <property key="buttonAccessible" type="enumeration" defaultValue="yes">
+ <caption>Accessible</caption>
+ <description />
+ <enumerationValues>
+ <enumerationValue key="yes">Yes</enumerationValue>
+ <enumerationValue key="no">No</enumerationValue>
+ </enumerationValues>
+ </property>
+ <property key="buttonScreenReaderCaption" type="textTemplate" required="false">
+ <caption>Screen reader caption</caption>
+ <description />
</property>
</propertyGroup>
</properties>
diff --git a/packages/pluggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx b/packages/pluggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx
index c690271ec..0f086c777 100644
--- a/packages/pluggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx
+++ b/packages/pluggableWidgets/floating-action-button-native/src/__tests__/FloatingActionButton.spec.tsx
@@ -1,4 +1,4 @@
-import { FloatingActionButtonProps } from "../../typings/FloatingActionButtonProps";
+import { FloatingActionButtonProps, SecondaryButtonsType } from "../../typings/FloatingActionButtonProps";
import { FloatingActionButtonStyle } from "../ui/styles";
import { fireEvent, render, waitForElementToBeRemoved } from "@testing-library/react-native";
import { createElement } from "react";
@@ -9,14 +9,15 @@ import { Icon } from "mendix/components/native/Icon";
describe("FloatingActionButton", () => {
let defaultProps: FloatingActionButtonProps<FloatingActionButtonStyle>;
- const secondaryButtons = [
+ const secondaryButtons: SecondaryButtonsType[] = [
{
icon: dynamicValue({
type: "glyph",
iconClass: "fa-glyph1"
} as NativeIcon),
caption: dynamicValue("caption1"),
- onClick: actionValue(true, false)
+ onClick: actionValue(true, false),
+ buttonAccessible: "yes"
},
{
icon: dynamicValue({
@@ -24,7 +25,8 @@ describe("FloatingActionButton", () => {
iconClass: "fa-glyph2"
} as NativeIcon),
caption: dynamicValue("caption2"),
- onClick: actionValue(true, false)
+ onClick: actionValue(true, false),
+ buttonAccessible: "yes"
},
{
icon: dynamicValue({
@@ -32,13 +34,15 @@ describe("FloatingActionButton", () => {
iconClass: "fa-glyph3"
} as NativeIcon),
caption: dynamicValue("caption3"),
- onClick: actionValue(true, false)
+ onClick: actionValue(true, false),
+ buttonAccessible: "yes"
}
];
beforeEach(() => {
defaultProps = {
name: "FloatingAction",
+ accessible: "yes",
style: [],
horizontalPosition: "right",
verticalPosition: "bottom",
@@ -94,7 +98,7 @@ describe("FloatingActionButton", () => {
fireEvent(getByTestId("FloatingAction"), "onPress");
fireEvent(getByTestId("FloatingAction$button1"), "onPress");
- expect(secondaryButtons[1].onClick.execute).toHaveBeenCalledTimes(1);
+ expect(secondaryButtons[1].onClick?.execute).toHaveBeenCalledTimes(1);
});
it("should have custom icons on primary button", async () => {
@@ -142,7 +146,7 @@ describe("FloatingActionButton", () => {
);
fireEvent(getByTestId("FloatingAction"), "onPress");
- await findByText(secondaryButtons[2].caption.value as string);
+ await findByText(secondaryButtons[2].caption?.value as string);
});
describe("vertical position", () => {
diff --git a/packages/pluggableWidgets/floating-action-button-native/src/package.xml b/packages/pluggableWidgets/floating-action-button-native/src/package.xml
index 229453733..8e5a12442 100644
--- a/packages/pluggableWidgets/floating-action-button-native/src/package.xml
+++ b/packages/pluggableWidgets/floating-action-button-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="FloatingActionButton" version="3.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="FloatingActionButton" version="3.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="FloatingActionButton.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/floating-action-button-native/typings/FloatingActionButtonProps.d.ts b/packages/pluggableWidgets/floating-action-button-native/typings/FloatingActionButtonProps.d.ts
index c2c295bd5..edb3731d3 100644
--- a/packages/pluggableWidgets/floating-action-button-native/typings/FloatingActionButtonProps.d.ts
+++ b/packages/pluggableWidgets/floating-action-button-native/typings/FloatingActionButtonProps.d.ts
@@ -10,16 +10,24 @@ export type HorizontalPositionEnum = "left" | "center" | "right";
export type VerticalPositionEnum = "top" | "bottom";
+export type AccessibleEnum = "yes" | "no";
+
+export type ButtonAccessibleEnum = "yes" | "no";
+
export interface SecondaryButtonsType {
icon: DynamicValue<NativeIcon>;
caption?: DynamicValue<string>;
onClick?: ActionValue;
+ buttonAccessible: ButtonAccessibleEnum;
+ buttonScreenReaderCaption?: DynamicValue<string>;
}
export interface SecondaryButtonsPreviewType {
icon: { type: "glyph"; iconClass: string; } | { type: "image"; imageUrl: string; } | null;
caption: string;
onClick: {} | null;
+ buttonAccessible: ButtonAccessibleEnum;
+ buttonScreenReaderCaption: string;
}
export interface FloatingActionButtonProps<Style> {
@@ -30,6 +38,8 @@ export interface FloatingActionButtonProps<Style> {
horizontalPosition: HorizontalPositionEnum;
verticalPosition: VerticalPositionEnum;
onClick?: ActionValue;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
secondaryButtons: SecondaryButtonsType[];
}
@@ -43,5 +53,7 @@ export interface FloatingActionButtonPreviewProps {
horizontalPosition: HorizontalPositionEnum;
verticalPosition: VerticalPositionEnum;
onClick: {} | null;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
secondaryButtons: SecondaryButtonsPreviewType[];
}
diff --git a/packages/pluggableWidgets/gallery-native/CHANGELOG.md b/packages/pluggableWidgets/gallery-native/CHANGELOG.md
index 3db49adde..2f83db6cd 100644
--- a/packages/pluggableWidgets/gallery-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/gallery-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [1.0.0] - 2022-10-26
### Added
diff --git a/packages/pluggableWidgets/gallery-native/package.json b/packages/pluggableWidgets/gallery-native/package.json
index a9b2144e1..de0254701 100644
--- a/packages/pluggableWidgets/gallery-native/package.json
+++ b/packages/pluggableWidgets/gallery-native/package.json
@@ -1,7 +1,7 @@
{
"name": "gallery-native",
"widgetName": "Gallery",
- "version": "1.0.0",
+ "version": "1.1.0",
"description": "A flexible gallery widget that renders columns, rows and layouts.",
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
"license": "Apache-2.0",
diff --git a/packages/pluggableWidgets/gallery-native/src/Gallery.editorConfig.ts b/packages/pluggableWidgets/gallery-native/src/Gallery.editorConfig.ts
index 908751bcb..adaade3d5 100644
--- a/packages/pluggableWidgets/gallery-native/src/Gallery.editorConfig.ts
+++ b/packages/pluggableWidgets/gallery-native/src/Gallery.editorConfig.ts
@@ -17,6 +17,11 @@ export function getProperties(values: GalleryPreviewProps, defaultProperties: Pr
hidePropertyIn(defaultProperties, values, "filtersPlaceholder");
}
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
return defaultProperties;
}
diff --git a/packages/pluggableWidgets/gallery-native/src/Gallery.tsx b/packages/pluggableWidgets/gallery-native/src/Gallery.tsx
index acbfa909c..314260031 100644
--- a/packages/pluggableWidgets/gallery-native/src/Gallery.tsx
+++ b/packages/pluggableWidgets/gallery-native/src/Gallery.tsx
@@ -104,6 +104,9 @@ export const Gallery = (props: GalleryProps<GalleryStyle>): ReactElement => {
return (
<GalleryComponent
+ accessible={props.accessible === "yes"}
+ screenReaderCaption={props.screenReaderCaption}
+ screenReaderHint={props.screenReaderHint}
emptyPlaceholder={props.emptyPlaceholder}
hasMoreItems={props.datasource.hasMoreItems ?? false}
itemRenderer={itemRenderer}
diff --git a/packages/pluggableWidgets/gallery-native/src/Gallery.xml b/packages/pluggableWidgets/gallery-native/src/Gallery.xml
index 2f149df77..159730946 100644
--- a/packages/pluggableWidgets/gallery-native/src/Gallery.xml
+++ b/packages/pluggableWidgets/gallery-native/src/Gallery.xml
@@ -71,6 +71,24 @@
<description />
</property>
</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>
<propertyGroup caption="Filtering">
<propertyGroup caption="Filtering">
diff --git a/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx b/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx
index 42329e3ce..791bfda19 100644
--- a/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx
+++ b/packages/pluggableWidgets/gallery-native/src/components/Gallery.tsx
@@ -25,6 +25,9 @@ export interface GalleryProps<T extends ObjectItem> {
scrollDirection: ScrollDirectionEnum;
style: GalleryStyle;
tabletColumns: number;
+ accessible: boolean;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElement => {
@@ -114,6 +117,10 @@ export const Gallery = <T extends ObjectItem>(props: GalleryProps<T>): ReactElem
<View testID={`${props.name}`} style={props.style.container}>
{props.filters ? <View>{props.filters}</View> : null}
<FlatList
+ accessible={props.accessible}
+ accessibilityLabel={props.screenReaderCaption?.value}
+ accessibilityHint={props.screenReaderHint?.value}
+ accessibilityState={{ busy: props.pullDownIsExecuting }}
{...(isScrollDirectionVertical && props.pullDown ? { onRefresh: props.pullDown } : {})}
{...(isScrollDirectionVertical ? { numColumns } : {})}
ListFooterComponent={loadMoreButton}
diff --git a/packages/pluggableWidgets/gallery-native/src/components/__tests__/Gallery.spec.tsx b/packages/pluggableWidgets/gallery-native/src/components/__tests__/Gallery.spec.tsx
index 13688f433..72da7f5ed 100644
--- a/packages/pluggableWidgets/gallery-native/src/components/__tests__/Gallery.spec.tsx
+++ b/packages/pluggableWidgets/gallery-native/src/components/__tests__/Gallery.spec.tsx
@@ -15,6 +15,7 @@ const itemWrapperFunction =
wrapper(item.id, onClick);
const defaultProps: GalleryProps<ObjectItem> = {
+ accessible: true,
hasMoreItems: true,
itemRenderer: itemWrapperFunction({}),
items: [{ id: "11" as GUID }, { id: "22" as GUID }, { id: "33" as GUID }],
diff --git a/packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap b/packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap
index 5211ff08f..b2b4d49f6 100644
--- a/packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap
+++ b/packages/pluggableWidgets/gallery-native/src/components/__tests__/__snapshots__/Gallery.spec.tsx.snap
@@ -13,6 +13,12 @@ exports[`Gallery rendering rendering with load more button it shouldn't render t
"marginTop": 8,
}
}
+ accessibilityState={
+ Object {
+ "busy": undefined,
+ }
+ }
+ accessible={true}
data={
Array [
Object {
@@ -163,6 +169,12 @@ exports[`Gallery rendering rendering with load more button renders correctly 1`]
"marginTop": 8,
}
}
+ accessibilityState={
+ Object {
+ "busy": undefined,
+ }
+ }
+ accessible={true}
data={
Array [
Object {
@@ -335,6 +347,12 @@ exports[`Gallery rendering rendering with load more button renders correctly wit
"marginTop": 8,
}
}
+ accessibilityState={
+ Object {
+ "busy": undefined,
+ }
+ }
+ accessible={true}
data={
Array [
Object {
@@ -507,6 +525,12 @@ exports[`Gallery rendering renders correctly 1`] = `
"marginTop": 8,
}
}
+ accessibilityState={
+ Object {
+ "busy": undefined,
+ }
+ }
+ accessible={true}
data={
Array [
Object {
@@ -657,6 +681,12 @@ exports[`Gallery rendering renders correctly horizontal 1`] = `
"marginStart": 8,
}
}
+ accessibilityState={
+ Object {
+ "busy": undefined,
+ }
+ }
+ accessible={true}
data={
Array [
Object {
@@ -805,6 +835,12 @@ exports[`Gallery rendering renders correctly with empty list and custom placehol
"marginTop": 8,
}
}
+ accessibilityState={
+ Object {
+ "busy": false,
+ }
+ }
+ accessible={true}
data={Array []}
disableVirtualization={false}
getItem={[Function]}
@@ -870,6 +906,12 @@ exports[`Gallery rendering renders correctly with filter 1`] = `
"marginTop": 8,
}
}
+ accessibilityState={
+ Object {
+ "busy": undefined,
+ }
+ }
+ accessible={true}
data={
Array [
Object {
diff --git a/packages/pluggableWidgets/gallery-native/src/package.xml b/packages/pluggableWidgets/gallery-native/src/package.xml
index 1f6db5881..24f8b56d5 100644
--- a/packages/pluggableWidgets/gallery-native/src/package.xml
+++ b/packages/pluggableWidgets/gallery-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="Gallery" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="Gallery" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="Gallery.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/gallery-native/typings/GalleryProps.d.ts b/packages/pluggableWidgets/gallery-native/typings/GalleryProps.d.ts
index 2583cda33..9f10324ed 100644
--- a/packages/pluggableWidgets/gallery-native/typings/GalleryProps.d.ts
+++ b/packages/pluggableWidgets/gallery-native/typings/GalleryProps.d.ts
@@ -11,6 +11,8 @@ export type ScrollDirectionEnum = "vertical" | "horizontal";
export type PaginationEnum = "virtualScrolling" | "buttons";
+export type AccessibleEnum = "yes" | "no";
+
export interface FilterListType {
filter: ListAttributeValue<string | Big | boolean | Date>;
}
@@ -33,6 +35,9 @@ export interface GalleryProps<Style> {
emptyPlaceholder?: ReactNode;
onClick?: ListActionValue;
pullDown?: ActionValue;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
filterList: FilterListType[];
filtersPlaceholder?: ReactNode;
}
@@ -53,6 +58,9 @@ export interface GalleryPreviewProps {
emptyPlaceholder: { widgetCount: number; renderer: ComponentType<{ caption?: string }> };
onClick: {} | null;
pullDown: {} | null;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
filterList: FilterListPreviewType[];
filtersPlaceholder: { widgetCount: number; renderer: ComponentType<{ caption?: string }> };
}
diff --git a/packages/pluggableWidgets/gallery-text-filter-native/CHANGELOG.md b/packages/pluggableWidgets/gallery-text-filter-native/CHANGELOG.md
index dc6c12295..3f3db5548 100644
--- a/packages/pluggableWidgets/gallery-text-filter-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/gallery-text-filter-native/CHANGELOG.md
@@ -5,3 +5,7 @@ All notable changes to this widget will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [Unreleased]
+
+### Added
+
+- Added accessibility.
diff --git a/packages/pluggableWidgets/gallery-text-filter-native/package.json b/packages/pluggableWidgets/gallery-text-filter-native/package.json
index 4322f2d68..307ac450a 100644
--- a/packages/pluggableWidgets/gallery-text-filter-native/package.json
+++ b/packages/pluggableWidgets/gallery-text-filter-native/package.json
@@ -1,7 +1,7 @@
{
"name": "gallery-text-filter-native",
"widgetName": "GalleryTextFilter",
- "version": "1.0.0",
+ "version": "1.1.0",
"license": "Apache-2.0",
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
"repository": {
diff --git a/packages/pluggableWidgets/gallery-text-filter-native/src/GalleryTextFilter.editorConfig.ts b/packages/pluggableWidgets/gallery-text-filter-native/src/GalleryTextFilter.editorConfig.ts
index c213575c1..0a889116b 100644
--- a/packages/pluggableWidgets/gallery-text-filter-native/src/GalleryTextFilter.editorConfig.ts
+++ b/packages/pluggableWidgets/gallery-text-filter-native/src/GalleryTextFilter.editorConfig.ts
@@ -1,6 +1,16 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
+import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
import { GalleryTextFilterPreviewProps } from "../typings/GalleryTextFilterProps";
+export function getProperties(values: GalleryTextFilterPreviewProps, defaultProperties: Properties): Properties {
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
+ return defaultProperties;
+}
+
export function getPreview(values: GalleryTextFilterPreviewProps, isDark: boolean): StructurePreviewProps {
const style: { borderColor: string; backgroundColor: string; textColor: string } = {
dark: {
diff --git a/packages/pluggableWidgets/gallery-text-filter-native/src/GalleryTextFilter.tsx b/packages/pluggableWidgets/gallery-text-filter-native/src/GalleryTextFilter.tsx
index a8dd7bc86..c6655830d 100644
--- a/packages/pluggableWidgets/gallery-text-filter-native/src/GalleryTextFilter.tsx
+++ b/packages/pluggableWidgets/gallery-text-filter-native/src/GalleryTextFilter.tsx
@@ -70,6 +70,9 @@ export function GalleryTextFilter(props: GalleryTextFilterProps<GalleryTextFilte
return (
<FilterComponent
name={props.name}
+ accessible={props.accessible === "yes"}
+ screenReaderCaption={props.screenReaderCaption}
+ screenReaderHint={props.screenReaderHint}
delay={props.delay}
styles={styles}
placeholder={props.placeholder?.value}
diff --git a/packages/pluggableWidgets/gallery-text-filter-native/src/GalleryTextFilter.xml b/packages/pluggableWidgets/gallery-text-filter-native/src/GalleryTextFilter.xml
index 969d4e420..cdf83b914 100644
--- a/packages/pluggableWidgets/gallery-text-filter-native/src/GalleryTextFilter.xml
+++ b/packages/pluggableWidgets/gallery-text-filter-native/src/GalleryTextFilter.xml
@@ -60,6 +60,24 @@
<description>Action to be triggered when the value or filter changes.</description>
</property>
</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>
+ </propertyGroup>
</propertyGroup>
</properties>
</widget>
diff --git a/packages/pluggableWidgets/gallery-text-filter-native/src/components/FilterComponent.tsx b/packages/pluggableWidgets/gallery-text-filter-native/src/components/FilterComponent.tsx
index 0ad58a266..c94638d31 100644
--- a/packages/pluggableWidgets/gallery-text-filter-native/src/components/FilterComponent.tsx
+++ b/packages/pluggableWidgets/gallery-text-filter-native/src/components/FilterComponent.tsx
@@ -3,6 +3,7 @@ import { View, TextInput, TouchableOpacity, ViewStyle } from "react-native";
import Svg, { Path } from "react-native-svg";
import { debounce } from "@mendix/piw-utils-internal";
import { extractStyles } from "@mendix/pluggable-widgets-tools";
+import { DynamicValue } from "mendix";
import { GalleryTextFilterStyle, InputStyleProps } from "../ui/Styles";
@@ -13,6 +14,9 @@ export interface FilterComponentProps {
updateFilters?: (value: string) => void;
value?: string;
name: string;
+ accessible: boolean;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
const textInputPropsKeys: Array<keyof InputStyleProps> = [
@@ -81,6 +85,9 @@ export default function FilterComponent(props: FilterComponentProps): ReactEleme
<View testID={`${props.name}-text-filter`} style={textInputContainerStyle}>
<TextInput
testID={`${props.name}-text-input`}
+ accessible={props.accessible}
+ accessibilityLabel={props.screenReaderCaption?.value}
+ accessibilityHint={props.screenReaderHint?.value}
value={valueInput}
placeholder={props.placeholder}
ref={inputRef}
diff --git a/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/FilterComponent.spec.tsx b/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/FilterComponent.spec.tsx
index 721594f62..c371ce257 100644
--- a/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/FilterComponent.spec.tsx
+++ b/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/FilterComponent.spec.tsx
@@ -4,6 +4,7 @@ import FilterComponent, { FilterComponentProps } from "../FilterComponent";
import { defaultGalleryTextFilterStyle } from "../../ui/Styles";
const defaultProps: FilterComponentProps = {
+ accessible: true,
delay: 500,
name: "test",
styles: defaultGalleryTextFilterStyle
diff --git a/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/GalleryTextFilter.spec.tsx b/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/GalleryTextFilter.spec.tsx
index 9bec75238..7f8765493 100644
--- a/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/GalleryTextFilter.spec.tsx
+++ b/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/GalleryTextFilter.spec.tsx
@@ -13,6 +13,7 @@ jest.useFakeTimers();
const commonProps: Props = {
name: "filter-test",
+ accessible: "yes",
defaultFilter: "equal" as const,
delay: 1000,
style: []
diff --git a/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/__snapshots__/FilterComponent.spec.tsx.snap b/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/__snapshots__/FilterComponent.spec.tsx.snap
index 6890b239d..c5bd16ade 100644
--- a/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/__snapshots__/FilterComponent.spec.tsx.snap
+++ b/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/__snapshots__/FilterComponent.spec.tsx.snap
@@ -15,6 +15,7 @@ exports[`Filter component renders correctly 1`] = `
testID="test-text-filter"
>
<TextInput
+ accessible={true}
allowFontScaling={true}
onBlur={[Function]}
onChangeText={[Function]}
diff --git a/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/__snapshots__/GalleryTextFilter.spec.tsx.snap b/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/__snapshots__/GalleryTextFilter.spec.tsx.snap
index 3c403d839..1f5cc9e7f 100644
--- a/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/__snapshots__/GalleryTextFilter.spec.tsx.snap
+++ b/packages/pluggableWidgets/gallery-text-filter-native/src/components/__tests__/__snapshots__/GalleryTextFilter.spec.tsx.snap
@@ -15,6 +15,7 @@ exports[`Text Filter with multiple attributes renders correctly 1`] = `
testID="filter-test-text-filter"
>
<TextInput
+ accessible={true}
allowFontScaling={true}
onBlur={[Function]}
onChangeText={[Function]}
@@ -52,6 +53,7 @@ exports[`Text Filter with single attribute renders correctly 1`] = `
testID="filter-test-text-filter"
>
<TextInput
+ accessible={true}
allowFontScaling={true}
onBlur={[Function]}
onChangeText={[Function]}
diff --git a/packages/pluggableWidgets/gallery-text-filter-native/src/package.xml b/packages/pluggableWidgets/gallery-text-filter-native/src/package.xml
index fc121144c..c2556e153 100644
--- a/packages/pluggableWidgets/gallery-text-filter-native/src/package.xml
+++ b/packages/pluggableWidgets/gallery-text-filter-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="GalleryTextFilter" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="GalleryTextFilter" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="GalleryTextFilter.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/gallery-text-filter-native/typings/GalleryTextFilterProps.d.ts b/packages/pluggableWidgets/gallery-text-filter-native/typings/GalleryTextFilterProps.d.ts
index d2d62f4d9..391255e22 100644
--- a/packages/pluggableWidgets/gallery-text-filter-native/typings/GalleryTextFilterProps.d.ts
+++ b/packages/pluggableWidgets/gallery-text-filter-native/typings/GalleryTextFilterProps.d.ts
@@ -8,6 +8,8 @@ import { ActionValue, DynamicValue, EditableValue } from "mendix";
export type DefaultFilterEnum = "contains" | "startsWith" | "endsWith" | "greater" | "greaterEqual" | "equal" | "notEqual" | "smaller" | "smallerEqual" | "empty" | "notEmpty";
+export type AccessibleEnum = "yes" | "no";
+
export interface GalleryTextFilterProps<Style> {
name: string;
style: Style[];
@@ -17,6 +19,9 @@ export interface GalleryTextFilterProps<Style> {
delay: number;
valueAttribute?: EditableValue<string>;
onChange?: ActionValue;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface GalleryTextFilterPreviewProps {
@@ -30,4 +35,7 @@ export interface GalleryTextFilterPreviewProps {
delay: number | null;
valueAttribute: string;
onChange: {} | null;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/image-native/CHANGELOG.md b/packages/pluggableWidgets/image-native/CHANGELOG.md
index 0be79834d..6b52df2da 100644
--- a/packages/pluggableWidgets/image-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/image-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [1.0.2] - 2022-9-20
### Changed
diff --git a/packages/pluggableWidgets/image-native/package.json b/packages/pluggableWidgets/image-native/package.json
index 3b9ebb80c..677e481f7 100644
--- a/packages/pluggableWidgets/image-native/package.json
+++ b/packages/pluggableWidgets/image-native/package.json
@@ -1,7 +1,7 @@
{
"name": "image-native",
"widgetName": "Image",
- "version": "1.0.2",
+ "version": "1.1.0",
"description": "Display an image and enlarge it on click",
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
"license": "Apache-2.0",
diff --git a/packages/pluggableWidgets/image-native/src/Image.editorConfig.ts b/packages/pluggableWidgets/image-native/src/Image.editorConfig.ts
index 2ece58151..acea5895b 100644
--- a/packages/pluggableWidgets/image-native/src/Image.editorConfig.ts
+++ b/packages/pluggableWidgets/image-native/src/Image.editorConfig.ts
@@ -61,6 +61,11 @@ export function getProperties(values: ImagePreviewProps, defaultProperties: Prop
hidePropertyIn(defaultProperties, values, "customHeight");
}
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
return defaultProperties;
}
@@ -125,6 +130,13 @@ export function getPreview(values: ImagePreviewProps, isDarkMode: boolean): Stru
export function check(values: ImagePreviewProps): Problem[] {
const errors: Problem[] = [];
+ if (!values.isBackgroundImage && values.accessible === "yes" && !values.screenReaderCaption) {
+ errors.push({
+ property: "screenReaderCaption",
+ message: "Screen reader caption cannot be empty."
+ });
+ }
+
if (values.datasource === "image" && !values.imageObject) {
errors.push({
property: "imageObject",
diff --git a/packages/pluggableWidgets/image-native/src/Image.tsx b/packages/pluggableWidgets/image-native/src/Image.tsx
index f46cbffb6..006f02255 100644
--- a/packages/pluggableWidgets/image-native/src/Image.tsx
+++ b/packages/pluggableWidgets/image-native/src/Image.tsx
@@ -52,6 +52,9 @@ export const Image: FunctionComponent<ImageProps<Style>> = props => {
return !props.isBackgroundImage ? (
<ImageViewer
name={props.name}
+ accessible={props.accessible === "yes"}
+ screenReaderCaption={props.screenReaderCaption}
+ screenReaderHint={props.screenReaderHint}
source={source}
onClick={onClick}
onClickType={props.onClickType}
@@ -65,6 +68,9 @@ export const Image: FunctionComponent<ImageProps<Style>> = props => {
) : (
<BackgroundImage
name={props.name}
+ accessible={props.accessible === "yes"}
+ screenReaderCaption={props.screenReaderCaption}
+ screenReaderHint={props.screenReaderHint}
source={source}
initialDimensions={initialDimensions}
resizeMode={props.resizeMode}
diff --git a/packages/pluggableWidgets/image-native/src/Image.xml b/packages/pluggableWidgets/image-native/src/Image.xml
index 3354f0a8b..9af379e04 100644
--- a/packages/pluggableWidgets/image-native/src/Image.xml
+++ b/packages/pluggableWidgets/image-native/src/Image.xml
@@ -9,7 +9,7 @@
<propertyGroup caption="Data source">
<property key="datasource" type="enumeration" defaultValue="image">
<caption>Data source</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="image">Image</enumerationValue>
<enumerationValue key="imageUrl">Image URL</enumerationValue>
@@ -18,11 +18,11 @@
</property>
<property key="imageObject" type="image" required="false">
<caption>Image</caption>
- <description/>
+ <description />
</property>
<property key="defaultImageDynamic" type="image" required="false">
<caption>Default image</caption>
- <description/>
+ <description />
</property>
<property key="imageUrl" type="textTemplate" required="false">
<caption>Image URL</caption>
@@ -52,13 +52,13 @@
</property>
<property key="opacity" type="integer" defaultValue="100">
<caption>Opacity</caption>
- <description/>
+ <description />
</property>
</propertyGroup>
<propertyGroup caption="Dimensions">
<property key="widthUnit" type="enumeration" defaultValue="auto">
<caption>Width unit</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="auto">Auto</enumerationValue>
<enumerationValue key="points">Points</enumerationValue>
@@ -70,7 +70,7 @@
</property>
<property key="heightUnit" type="enumeration" defaultValue="auto">
<caption>Height unit</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="auto">Auto</enumerationValue>
<enumerationValue key="points">Points</enumerationValue>
@@ -82,14 +82,32 @@
</property>
<property key="iconSize" type="integer" defaultValue="16">
<caption>Size</caption>
- <description/>
+ <description />
+ </property>
+ </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>
<propertyGroup caption="Events">
<property key="onClickType" type="enumeration" defaultValue="action">
<caption>On click type</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="action">Action</enumerationValue>
<enumerationValue key="enlarge">Enlarge</enumerationValue>
@@ -97,12 +115,12 @@
</property>
<property key="onClick" type="action" required="false">
<caption>On click</caption>
- <description/>
+ <description />
</property>
</propertyGroup>
<propertyGroup caption="Common">
- <systemProperty key="Name"/>
- <systemProperty key="Visibility"/>
+ <systemProperty key="Name" />
+ <systemProperty key="Visibility" />
</propertyGroup>
</properties>
</widget>
diff --git a/packages/pluggableWidgets/image-native/src/components/BackgroundImage.tsx b/packages/pluggableWidgets/image-native/src/components/BackgroundImage.tsx
index f5664184d..1b4a9700d 100644
--- a/packages/pluggableWidgets/image-native/src/components/BackgroundImage.tsx
+++ b/packages/pluggableWidgets/image-native/src/components/BackgroundImage.tsx
@@ -5,6 +5,7 @@ import { ResizeModeEnum } from "../../typings/ImageProps";
import { CustomImageObjectProps, onLayoutSetDimensions } from "../utils/imageUtils";
import { DimensionsType, ImageIconSVG } from "./ImageIconSVG";
import { DefaultImageStyle } from "../ui/Styles.js";
+import { DynamicValue } from "mendix";
export interface BackgroundImageProps {
name?: string;
@@ -14,6 +15,9 @@ export interface BackgroundImageProps {
resizeMode: ResizeModeEnum;
opacity: number;
styles: DefaultImageStyle;
+ accessible: boolean;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export const BackgroundImage: FunctionComponent<BackgroundImageProps> = props => {
diff --git a/packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx b/packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx
index ac8b79127..af72b5776 100644
--- a/packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx
+++ b/packages/pluggableWidgets/image-native/src/components/ImageComponents.tsx
@@ -6,8 +6,15 @@ import { OnClickTypeEnum } from "../../typings/ImageProps";
import { CustomImageObjectProps, onLayoutSetDimensions } from "../utils/imageUtils";
import { DimensionsType, ImageIconSVG } from "./ImageIconSVG";
import { DefaultImageStyle } from "../ui/Styles.js";
+import { DynamicValue } from "mendix";
-interface ImageViewerBaseProps {
+interface AccessibilityProps {
+ accessible: boolean;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
+}
+
+interface ImageViewerBaseProps extends AccessibilityProps {
name?: string;
source: CustomImageObjectProps;
customWidth?: number;
@@ -38,6 +45,9 @@ interface GetImageDimensionsComponentProps extends ImageViewerBaseProps {
export const ImageViewer: FunctionComponent<ImageViewerProps> = props => {
const [enlarged, setEnlarged] = useState(false);
const {
+ accessible,
+ screenReaderCaption,
+ screenReaderHint,
source,
initialDimensions,
setInitialDimensions,
@@ -54,6 +64,9 @@ export const ImageViewer: FunctionComponent<ImageViewerProps> = props => {
<Fragment>
<ImageSmall
name={name}
+ accessible={accessible}
+ screenReaderCaption={screenReaderCaption}
+ screenReaderHint={screenReaderHint}
source={source}
customWidth={customWidth}
customHeight={customHeight}
@@ -64,12 +77,18 @@ export const ImageViewer: FunctionComponent<ImageViewerProps> = props => {
/>
<GetImageDimensionsComponent
name={name}
+ accessible={accessible}
+ screenReaderCaption={screenReaderCaption}
+ screenReaderHint={screenReaderHint}
source={source}
initialDimensions={initialDimensions}
setInitialDimensions={setInitialDimensions}
/>
<ImageEnlarged
name={name}
+ accessible={accessible}
+ screenReaderCaption={screenReaderCaption}
+ screenReaderHint={screenReaderHint}
visible={enlarged}
setEnlarged={setEnlarged}
source={source}
@@ -81,7 +100,8 @@ export const ImageViewer: FunctionComponent<ImageViewerProps> = props => {
};
export const GetImageDimensionsComponent: FunctionComponent<GetImageDimensionsComponentProps> = props => {
- const { source, initialDimensions, setInitialDimensions, name } = props;
+ const { source, initialDimensions, setInitialDimensions, name, accessible, screenReaderCaption, screenReaderHint } =
+ props;
const onLayoutSetInitialDimensions = useCallback(
({ nativeEvent: { layout } }: LayoutChangeEvent) => {
@@ -113,6 +133,10 @@ export const GetImageDimensionsComponent: FunctionComponent<GetImageDimensionsCo
pointerEvents={source.image === "this/is/a/fake/path.svg" ? "auto" : "none"}
>
<SvgUri
+ accessible={accessible}
+ accessibilityLabel={screenReaderCaption?.value}
+ accessibilityHint={screenReaderHint?.value}
+ accessibilityRole="image"
testID={`${name}$SvgUriTemporary`}
uri={source.image as string}
onLayout={onLayoutSetInitialDimensions}
@@ -125,7 +149,19 @@ export const GetImageDimensionsComponent: FunctionComponent<GetImageDimensionsCo
};
export const ImageSmall: FunctionComponent<ImageSmallProps> = props => {
- const { source, initialDimensions, customWidth, customHeight, iconSize, onClick, styles, name } = props;
+ const {
+ source,
+ initialDimensions,
+ customWidth,
+ customHeight,
+ iconSize,
+ onClick,
+ styles,
+ name,
+ accessible,
+ screenReaderCaption,
+ screenReaderHint
+ } = props;
const [dimensions, setDimensions] = useState<DimensionsType>();
const [svgProps] = extractStyles(styles.image as ImageStyle, ["width", "height"]);
const dimensionsNotSet =
@@ -145,6 +181,10 @@ export const ImageSmall: FunctionComponent<ImageSmallProps> = props => {
return source.type === "icon" || (initialDimensions?.width && initialDimensions?.height) ? (
<Pressable
+ accessible={accessible}
+ accessibilityLabel={screenReaderCaption?.value}
+ accessibilityHint={screenReaderHint?.value}
+ accessibilityRole="image"
testID={`${name}$ImageSmallPressable`}
onPress={onClick}
onLayout={dimensionsNotSet ? onLayoutSetDimensionsCallback : undefined}
@@ -170,7 +210,17 @@ export const ImageSmall: FunctionComponent<ImageSmallProps> = props => {
export const ImageEnlarged: FunctionComponent<ImageEnlargedProps> = props => {
const [dimensions, setDimensions] = useState<DimensionsType>();
- const { visible, setEnlarged, source, initialDimensions, styles, name } = props;
+ const {
+ visible,
+ setEnlarged,
+ source,
+ initialDimensions,
+ styles,
+ name,
+ accessible,
+ screenReaderCaption,
+ screenReaderHint
+ } = props;
const [svgProps] = extractStyles(styles.image as ImageStyle, ["width", "height"]);
const onLayoutSetDimensionsCallback = useCallback(
({ nativeEvent: { layout } }: LayoutChangeEvent) => {
@@ -181,6 +231,10 @@ export const ImageEnlarged: FunctionComponent<ImageEnlargedProps> = props => {
return visible && initialDimensions?.width && initialDimensions?.height ? (
<Modal
+ accessible={accessible}
+ accessibilityLabel={screenReaderCaption?.value}
+ accessibilityHint={screenReaderHint?.value}
+ accessibilityRole="image"
visible={visible}
onRequestClose={() => setEnlarged(false)}
onDismiss={() => setEnlarged(false)}
diff --git a/packages/pluggableWidgets/image-native/src/components/__tests__/Image.spec.tsx b/packages/pluggableWidgets/image-native/src/components/__tests__/Image.spec.tsx
index b267fc52f..6c7894a18 100644
--- a/packages/pluggableWidgets/image-native/src/components/__tests__/Image.spec.tsx
+++ b/packages/pluggableWidgets/image-native/src/components/__tests__/Image.spec.tsx
@@ -45,6 +45,7 @@ describe("Widget", () => {
beforeEach(() => {
imageProps = {
name: "Image1",
+ accessible: "yes",
style: [],
datasource: "image",
imageObject: dynamicValue<number>(1),
diff --git a/packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap b/packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap
index 01c5e8007..4e072e023 100644
--- a/packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap
+++ b/packages/pluggableWidgets/image-native/src/components/__tests__/__snapshots__/Image.spec.tsx.snap
@@ -2,6 +2,7 @@
exports[`Widget Dynamic Image SVG renders the structure 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -191,6 +192,7 @@ exports[`Widget Dynamic Image SVG renders the structure as a background image wi
exports[`Widget Dynamic Image SVG renders the structure inside a modal 1`] = `
Array [
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -271,6 +273,8 @@ Array [
</RNSVGSvgView>
</View>,
<Modal
+ accessibilityRole="image"
+ accessible={true}
animationType="fade"
hardwareAccelerated={false}
onDismiss={[Function]}
@@ -394,6 +398,7 @@ Array [
exports[`Widget Dynamic Image SVG renders the structure with custom height 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -477,6 +482,7 @@ exports[`Widget Dynamic Image SVG renders the structure with custom height 1`] =
exports[`Widget Dynamic Image SVG renders the structure with custom width 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -560,6 +566,7 @@ exports[`Widget Dynamic Image SVG renders the structure with custom width 1`] =
exports[`Widget Dynamic Image renders the structure 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -874,6 +881,7 @@ exports[`Widget Dynamic Image renders the structure as a background image with a
exports[`Widget Dynamic Image renders the structure inside a modal 1`] = `
Array [
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -947,6 +955,8 @@ Array [
</View>
</View>,
<Modal
+ accessibilityRole="image"
+ accessible={true}
animationType="fade"
hardwareAccelerated={false}
onDismiss={[Function]}
@@ -1060,6 +1070,7 @@ Array [
exports[`Widget Dynamic Image renders the structure with custom height 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -1133,6 +1144,7 @@ exports[`Widget Dynamic Image renders the structure with custom height 1`] = `
exports[`Widget Dynamic Image renders the structure with custom width 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -1206,6 +1218,7 @@ exports[`Widget Dynamic Image renders the structure with custom width 1`] = `
exports[`Widget Icon type: icon/glyph renders the structure with an icon and default color 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -1259,6 +1272,7 @@ exports[`Widget Icon type: icon/glyph renders the structure with an icon and def
exports[`Widget Icon type: image/staticImage renders the structure 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -1333,6 +1347,7 @@ exports[`Widget Icon type: image/staticImage renders the structure 1`] = `
exports[`Widget Icon type: image/staticImage renders the structure inside a modal 1`] = `
Array [
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -1403,6 +1418,8 @@ Array [
</View>
</View>,
<Modal
+ accessibilityRole="image"
+ accessible={true}
animationType="fade"
hardwareAccelerated={false}
onDismiss={[Function]}
@@ -1516,6 +1533,7 @@ Array [
exports[`Widget Icon type: image/staticImage sets the correct styles 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -1590,6 +1608,7 @@ exports[`Widget Icon type: image/staticImage sets the correct styles 1`] = `
exports[`Widget Static Image SVG renders the structure 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -1960,6 +1979,7 @@ exports[`Widget Static Image SVG renders the structure as a background image wit
exports[`Widget Static Image SVG renders the structure inside a modal 1`] = `
Array [
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -2048,6 +2068,8 @@ Array [
</RNSVGSvgView>
</View>,
<Modal
+ accessibilityRole="image"
+ accessible={true}
animationType="fade"
hardwareAccelerated={false}
onDismiss={[Function]}
@@ -2175,6 +2197,7 @@ Array [
exports[`Widget Static Image SVG renders the structure with custom height 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -2262,6 +2285,7 @@ exports[`Widget Static Image SVG renders the structure with custom height 1`] =
exports[`Widget Static Image SVG renders the structure with custom width 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -2349,6 +2373,7 @@ exports[`Widget Static Image SVG renders the structure with custom width 1`] = `
exports[`Widget Static Image renders the structure 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -2663,6 +2688,7 @@ exports[`Widget Static Image renders the structure as a background image with a
exports[`Widget Static Image renders the structure inside a modal 1`] = `
Array [
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -2736,6 +2762,8 @@ Array [
</View>
</View>,
<Modal
+ accessibilityRole="image"
+ accessible={true}
animationType="fade"
hardwareAccelerated={false}
onDismiss={[Function]}
@@ -2849,6 +2877,7 @@ Array [
exports[`Widget Static Image renders the structure with custom height 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
@@ -2922,6 +2951,7 @@ exports[`Widget Static Image renders the structure with custom height 1`] = `
exports[`Widget Static Image renders the structure with custom width 1`] = `
<View
+ accessibilityRole="image"
accessible={true}
collapsable={false}
focusable={true}
diff --git a/packages/pluggableWidgets/image-native/src/package.xml b/packages/pluggableWidgets/image-native/src/package.xml
index ae2d7723a..7dc32a525 100644
--- a/packages/pluggableWidgets/image-native/src/package.xml
+++ b/packages/pluggableWidgets/image-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="Image" version="1.0.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="Image" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="Image.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/image-native/typings/ImageProps.d.ts b/packages/pluggableWidgets/image-native/typings/ImageProps.d.ts
index 8801f7725..721b4efa3 100644
--- a/packages/pluggableWidgets/image-native/typings/ImageProps.d.ts
+++ b/packages/pluggableWidgets/image-native/typings/ImageProps.d.ts
@@ -14,6 +14,8 @@ export type WidthUnitEnum = "auto" | "points";
export type HeightUnitEnum = "auto" | "points";
+export type AccessibleEnum = "yes" | "no";
+
export type OnClickTypeEnum = "action" | "enlarge";
export interface ImageProps<Style> {
@@ -33,6 +35,9 @@ export interface ImageProps<Style> {
heightUnit: HeightUnitEnum;
customHeight: number;
iconSize: number;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
onClickType: OnClickTypeEnum;
onClick?: ActionValue;
}
@@ -56,6 +61,9 @@ export interface ImagePreviewProps {
heightUnit: HeightUnitEnum;
customHeight: number | null;
iconSize: number | null;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
onClickType: OnClickTypeEnum;
onClick: {} | null;
}
diff --git a/packages/pluggableWidgets/line-chart-native/CHANGELOG.md b/packages/pluggableWidgets/line-chart-native/CHANGELOG.md
index e07f275a6..62b66899d 100644
--- a/packages/pluggableWidgets/line-chart-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/line-chart-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.2.0] - 2022-04-07
### Added
diff --git a/packages/pluggableWidgets/line-chart-native/package.json b/packages/pluggableWidgets/line-chart-native/package.json
index 7baa3be43..16bd46a73 100644
--- a/packages/pluggableWidgets/line-chart-native/package.json
+++ b/packages/pluggableWidgets/line-chart-native/package.json
@@ -1,7 +1,7 @@
{
"name": "line-chart-native",
"widgetName": "LineChart",
- "version": "2.2.0",
+ "version": "2.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/line-chart-native/src/LineChart.editorConfig.ts b/packages/pluggableWidgets/line-chart-native/src/LineChart.editorConfig.ts
index 5183fcd6e..406c3e4e7 100644
--- a/packages/pluggableWidgets/line-chart-native/src/LineChart.editorConfig.ts
+++ b/packages/pluggableWidgets/line-chart-native/src/LineChart.editorConfig.ts
@@ -1,5 +1,5 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
-import { hideNestedPropertiesIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
+import { hideNestedPropertiesIn, hidePropertyIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
import lineChartSvgDark from "./assets/LineChart.dark.svg";
import lineChartSvgLight from "./assets/LineChart.light.svg";
@@ -64,6 +64,12 @@ export function getProperties(values: LineChartPreviewProps, defaultProperties:
]);
}
});
+
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
return defaultProperties;
}
diff --git a/packages/pluggableWidgets/line-chart-native/src/LineChart.tsx b/packages/pluggableWidgets/line-chart-native/src/LineChart.tsx
index 4e6f1cc79..62ca56f15 100644
--- a/packages/pluggableWidgets/line-chart-native/src/LineChart.tsx
+++ b/packages/pluggableWidgets/line-chart-native/src/LineChart.tsx
@@ -7,7 +7,17 @@ import { LineChartStyle, defaultLineChartStyle } from "./ui/Styles";
import { useSeries } from "./utils/SeriesLoader";
export function LineChart(props: LineChartProps<LineChartStyle>): ReactElement | null {
- const { name, lines, showLegend, style, xAxisLabel, yAxisLabel } = props;
+ const {
+ name,
+ lines,
+ showLegend,
+ style,
+ xAxisLabel,
+ yAxisLabel,
+ accessible,
+ screenReaderCaption,
+ screenReaderHint
+ } = props;
const customStyles = style.filter(o => o != null);
const styles = all<LineChartStyle>([defaultLineChartStyle, ...customStyles]);
@@ -25,6 +35,9 @@ export function LineChart(props: LineChartProps<LineChartStyle>): ReactElement |
return (
<LineChartComponent
name={name}
+ accessible={accessible === "yes"}
+ screenReaderCaption={screenReaderCaption}
+ screenReaderHint={screenReaderHint}
lines={chartLines}
style={styles}
showLegend={showLegend}
diff --git a/packages/pluggableWidgets/line-chart-native/src/LineChart.xml b/packages/pluggableWidgets/line-chart-native/src/LineChart.xml
index 281bfc74c..da3bac189 100644
--- a/packages/pluggableWidgets/line-chart-native/src/LineChart.xml
+++ b/packages/pluggableWidgets/line-chart-native/src/LineChart.xml
@@ -14,7 +14,7 @@
<propertyGroup caption="General">
<property key="dataSet" type="enumeration" defaultValue="static">
<caption>Data set</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="static">Static</enumerationValue>
<enumerationValue key="dynamic">Dynamic</enumerationValue>
@@ -152,9 +152,28 @@
</property>
</propertyGroup>
<propertyGroup caption="Common">
- <systemProperty key="Name"/>
+ <systemProperty key="Name" />
<systemProperty key="Visibility" />
</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>
+ </propertyGroup>
</propertyGroup>
</properties>
</widget>
diff --git a/packages/pluggableWidgets/line-chart-native/src/components/LineChart.tsx b/packages/pluggableWidgets/line-chart-native/src/components/LineChart.tsx
index 0252e25be..8a88ccf2d 100644
--- a/packages/pluggableWidgets/line-chart-native/src/components/LineChart.tsx
+++ b/packages/pluggableWidgets/line-chart-native/src/components/LineChart.tsx
@@ -15,6 +15,8 @@ import {
aggregateGridPadding
} from "../utils/StyleUtils";
+import { DynamicValue } from "mendix";
+
export interface LineChartProps {
name: string;
lines: LineChartSeries[];
@@ -23,6 +25,9 @@ export interface LineChartProps {
xAxisLabel?: string;
yAxisLabel?: string;
warningPrefix?: string;
+ accessible: boolean;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface LineChartSeries {
@@ -47,7 +52,17 @@ export interface LineChartDataPoint<X extends number | Date, Y extends number |
}
export function LineChart(props: LineChartProps): ReactElement | null {
- const { lines, showLegend, style, warningPrefix, xAxisLabel, yAxisLabel } = props;
+ const {
+ lines,
+ showLegend,
+ style,
+ warningPrefix,
+ xAxisLabel,
+ yAxisLabel,
+ accessible,
+ screenReaderCaption,
+ screenReaderHint
+ } = props;
const warningMessagePrefix = useMemo(() => (warningPrefix ? warningPrefix + "i" : "I"), [warningPrefix]);
@@ -188,7 +203,13 @@ export function LineChart(props: LineChartProps): ReactElement | null {
);
return (
- <View style={style.container} testID={props.name}>
+ <View
+ accessible={accessible}
+ accessibilityLabel={screenReaderCaption?.value}
+ accessibilityHint={screenReaderHint?.value}
+ style={style.container}
+ testID={props.name}
+ >
{dataTypesResult instanceof Error ? (
<Text style={style.errorMessage}>{dataTypesResult.message}</Text>
) : (
diff --git a/packages/pluggableWidgets/line-chart-native/src/package.xml b/packages/pluggableWidgets/line-chart-native/src/package.xml
index 4733dffa3..a1f514989 100644
--- a/packages/pluggableWidgets/line-chart-native/src/package.xml
+++ b/packages/pluggableWidgets/line-chart-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="LineChart" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="LineChart" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="LineChart.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/line-chart-native/typings/LineChartProps.d.ts b/packages/pluggableWidgets/line-chart-native/typings/LineChartProps.d.ts
index 2eff45bbc..4147b326d 100644
--- a/packages/pluggableWidgets/line-chart-native/typings/LineChartProps.d.ts
+++ b/packages/pluggableWidgets/line-chart-native/typings/LineChartProps.d.ts
@@ -33,6 +33,8 @@ export interface LinesType {
dynamicCustomLineStyle?: ListAttributeValue<string>;
}
+export type AccessibleEnum = "yes" | "no";
+
export interface LinesPreviewType {
dataSet: DataSetEnum;
staticDataSource: {} | { type: string } | null;
@@ -58,6 +60,9 @@ export interface LineChartProps<Style> {
showLegend: boolean;
xAxisLabel?: DynamicValue<string>;
yAxisLabel?: DynamicValue<string>;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface LineChartPreviewProps {
@@ -69,4 +74,7 @@ export interface LineChartPreviewProps {
showLegend: boolean;
xAxisLabel: string;
yAxisLabel: string;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/pie-doughnut-chart-native/CHANGELOG.md b/packages/pluggableWidgets/pie-doughnut-chart-native/CHANGELOG.md
index 3382c8ae1..238030a45 100644
--- a/packages/pluggableWidgets/pie-doughnut-chart-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/pie-doughnut-chart-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [1.1.1] - 2022-9-20
### Changed
diff --git a/packages/pluggableWidgets/pie-doughnut-chart-native/package.json b/packages/pluggableWidgets/pie-doughnut-chart-native/package.json
index 0e5a1b6a2..5bf9c72ba 100644
--- a/packages/pluggableWidgets/pie-doughnut-chart-native/package.json
+++ b/packages/pluggableWidgets/pie-doughnut-chart-native/package.json
@@ -1,7 +1,7 @@
{
"name": "pie-doughnut-chart-native",
"widgetName": "PieDoughnutChart",
- "version": "1.1.1",
+ "version": "1.2.0",
"license": "Apache-2.0",
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
"repository": {
diff --git a/packages/pluggableWidgets/pie-doughnut-chart-native/src/PieDoughnutChart.tsx b/packages/pluggableWidgets/pie-doughnut-chart-native/src/PieDoughnutChart.tsx
index 5ff2243c6..5d638022b 100644
--- a/packages/pluggableWidgets/pie-doughnut-chart-native/src/PieDoughnutChart.tsx
+++ b/packages/pluggableWidgets/pie-doughnut-chart-native/src/PieDoughnutChart.tsx
@@ -7,7 +7,7 @@ import { ChartStyle, defaultStyle } from "./ui/Styles";
import { useSeries } from "./utils/SeriesLoader";
export function PieDoughnutChart(props: PieDoughnutChartProps<ChartStyle>): ReactElement | null {
- const { series: chartSeries, style, name, sortOrder, ...rest } = props;
+ const { series: chartSeries, style, name, sortOrder, accessible, ...rest } = props;
const series = useSeries(chartSeries, name);
if (!series) {
@@ -17,6 +17,7 @@ export function PieDoughnutChart(props: PieDoughnutChartProps<ChartStyle>): Reac
return (
<PieDoughnutChartComponent
name={name}
+ accessible={accessible === "yes"}
series={series
.flatMap(_series => _series.slices)
.sort((a, b) => (sortOrder === "ascending" ? a.y - b.y : b.y - a.y))}
diff --git a/packages/pluggableWidgets/pie-doughnut-chart-native/src/PieDoughnutChart.xml b/packages/pluggableWidgets/pie-doughnut-chart-native/src/PieDoughnutChart.xml
index 731dde6fd..862e85dce 100644
--- a/packages/pluggableWidgets/pie-doughnut-chart-native/src/PieDoughnutChart.xml
+++ b/packages/pluggableWidgets/pie-doughnut-chart-native/src/PieDoughnutChart.xml
@@ -1,8 +1,5 @@
<?xml version="1.0" encoding="utf-8" ?>
-<widget id="com.mendix.widget.native.piedoughnutchart.PieDoughnutChart" supportedPlatform="Native" 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">
+<widget id="com.mendix.widget.native.piedoughnutchart.PieDoughnutChart" supportedPlatform="Native" 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>Pie Doughnut Chart</name>
<description>Render a series of data in a Pie or Doughnut chart.</description>
<studioProCategory>Charts</studioProCategory>
@@ -12,7 +9,7 @@
<propertyGroup caption="Presentation">
<property key="presentation" type="enumeration" defaultValue="pie">
<caption>Presentation</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="pie">Pie</enumerationValue>
<enumerationValue key="doughnut">Doughnut</enumerationValue>
@@ -29,34 +26,31 @@
<caption>Data source</caption>
<description>Data points for individual series.</description>
</property>
- <property key="XAttribute" type="attribute"
- dataSource="dataSource">
+ <property key="XAttribute" type="attribute" dataSource="dataSource">
<caption>X attribute</caption>
- <description/>
+ <description />
<attributeTypes>
- <attributeType name="DateTime"/>
- <attributeType name="String"/>
- <attributeType name="Enum"/>
+ <attributeType name="DateTime" />
+ <attributeType name="String" />
+ <attributeType name="Enum" />
</attributeTypes>
</property>
- <property key="YAttribute" type="attribute"
- dataSource="dataSource">
+ <property key="YAttribute" type="attribute" dataSource="dataSource">
<caption>Y attribute</caption>
- <description/>
+ <description />
<attributeTypes>
- <attributeType name="Decimal"/>
- <attributeType name="Integer"/>
- <attributeType name="Long"/>
+ <attributeType name="Decimal" />
+ <attributeType name="Integer" />
+ <attributeType name="Long" />
</attributeTypes>
</property>
<property key="sliceStylingKey" type="attribute" dataSource="dataSource" required="false">
<caption>Dynamic styling key</caption>
<description>Configure which attribute is used as the key that matches with styling defined in Atlas.</description>
<attributeTypes>
- <attributeType name="String"/>
- <attributeType name="Enum"/>
+ <attributeType name="String" />
+ <attributeType name="Enum" />
</attributeTypes>
-
</property>
</propertyGroup>
</properties>
@@ -73,12 +67,30 @@
<propertyGroup caption="Chart settings">
<property key="showLabels" type="boolean" defaultValue="true">
<caption>Show labels</caption>
- <description/>
+ <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="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>
</propertyGroup>
</propertyGroup>
</properties>
diff --git a/packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/PieDoughnutChart.spec.tsx b/packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/PieDoughnutChart.spec.tsx
index 902cf750f..e9f5c3b6d 100644
--- a/packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/PieDoughnutChart.spec.tsx
+++ b/packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/PieDoughnutChart.spec.tsx
@@ -342,6 +342,7 @@ function createProps(opts: Partial<PieDoughnutChartProps<ChartStyle>> = {}): Pie
return {
name: "PieDoughnutTestWidget",
+ accessible: "yes",
showLabels,
sortOrder,
presentation,
diff --git a/packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/__snapshots__/PieDoughnutChart.spec.tsx.snap b/packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/__snapshots__/PieDoughnutChart.spec.tsx.snap
index e668b6592..a8903d3c8 100644
--- a/packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/__snapshots__/PieDoughnutChart.spec.tsx.snap
+++ b/packages/pluggableWidgets/pie-doughnut-chart-native/src/__tests__/__snapshots__/PieDoughnutChart.spec.tsx.snap
@@ -2,6 +2,7 @@
exports[`PieDoughnutChart configuration basic static props 1`] = `
<View
+ accessible={true}
style={
Object {
"flex": 1,
diff --git a/packages/pluggableWidgets/pie-doughnut-chart-native/src/components/PieDoughnutChart.tsx b/packages/pluggableWidgets/pie-doughnut-chart-native/src/components/PieDoughnutChart.tsx
index 0a5a84cd8..13f18d915 100644
--- a/packages/pluggableWidgets/pie-doughnut-chart-native/src/components/PieDoughnutChart.tsx
+++ b/packages/pluggableWidgets/pie-doughnut-chart-native/src/components/PieDoughnutChart.tsx
@@ -3,7 +3,7 @@ import { VictoryPie } from "victory-native";
import { VictoryStyleObject, CallbackArgs, BlockProps } from "victory-core";
import { ChartStyle, SlicesStyle } from "../ui/Styles";
-import { Option } from "mendix";
+import { Option, DynamicValue } from "mendix";
import { LayoutChangeEvent, View } from "react-native";
const DEFAULT_INNER_RADIUS_RATIO = 12;
@@ -16,6 +16,9 @@ export interface ChartProps {
style: ChartStyle;
presentation: string;
showLabels: boolean;
+ accessible: boolean;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export type DataPoints = Array<Slice<string, number>>;
@@ -26,7 +29,16 @@ export interface Slice<X extends string, Y extends number> {
stylingKey: Option<string>;
}
-export function PieDoughnutChart({ name, presentation, series, style, showLabels }: ChartProps): ReactElement | null {
+export function PieDoughnutChart({
+ name,
+ presentation,
+ series,
+ style,
+ showLabels,
+ accessible,
+ screenReaderCaption,
+ screenReaderHint
+}: ChartProps): ReactElement | null {
// due to the nature of the chart type, we only reply on the width, as the chart is always a square
const [chartDimensions, setChartDimensions] = useState<{ width: number }>();
// Chart user-styling may be missing for certain slices. A palette is passed, any missing colours
@@ -61,7 +73,13 @@ export function PieDoughnutChart({ name, presentation, series, style, showLabels
);
return (
- <View style={{ ...style.container }} testID={name}>
+ <View
+ accessible={accessible}
+ accessibilityLabel={screenReaderCaption?.value}
+ accessibilityHint={screenReaderHint?.value}
+ style={{ ...style.container }}
+ testID={name}
+ >
<View
onLayout={updateChartDimensions}
style={{ justifyContent: "center", alignItems: "center" }}
diff --git a/packages/pluggableWidgets/pie-doughnut-chart-native/src/package.xml b/packages/pluggableWidgets/pie-doughnut-chart-native/src/package.xml
index 50c920569..bdcb63b37 100644
--- a/packages/pluggableWidgets/pie-doughnut-chart-native/src/package.xml
+++ b/packages/pluggableWidgets/pie-doughnut-chart-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="PieDoughnutChart" version="1.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="PieDoughnutChart" version="1.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="PieDoughnutChart.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/pie-doughnut-chart-native/typings/PieDoughnutChartProps.d.ts b/packages/pluggableWidgets/pie-doughnut-chart-native/typings/PieDoughnutChartProps.d.ts
index 8b40f5e9e..1c9733b2d 100644
--- a/packages/pluggableWidgets/pie-doughnut-chart-native/typings/PieDoughnutChartProps.d.ts
+++ b/packages/pluggableWidgets/pie-doughnut-chart-native/typings/PieDoughnutChartProps.d.ts
@@ -4,7 +4,7 @@
* @author Mendix UI Content Team
*/
import { CSSProperties } from "react";
-import { ListValue, ListAttributeValue } from "mendix";
+import { DynamicValue, ListValue, ListAttributeValue } from "mendix";
import { Big } from "big.js";
export type PresentationEnum = "pie" | "doughnut";
@@ -18,6 +18,8 @@ export interface SeriesType {
export type SortOrderEnum = "ascending" | "descending";
+export type AccessibleEnum = "yes" | "no";
+
export interface SeriesPreviewType {
dataSource: {} | { type: string } | null;
XAttribute: string;
@@ -32,6 +34,9 @@ export interface PieDoughnutChartProps<Style> {
series: SeriesType[];
sortOrder: SortOrderEnum;
showLabels: boolean;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface PieDoughnutChartPreviewProps {
@@ -43,4 +48,7 @@ export interface PieDoughnutChartPreviewProps {
series: SeriesPreviewType[];
sortOrder: SortOrderEnum;
showLabels: boolean;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/popup-menu-native/CHANGELOG.md b/packages/pluggableWidgets/popup-menu-native/CHANGELOG.md
index feac30880..91d6f7cb1 100644
--- a/packages/pluggableWidgets/popup-menu-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/popup-menu-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.2.0] - 2022-04-07
### Added
diff --git a/packages/pluggableWidgets/popup-menu-native/package.json b/packages/pluggableWidgets/popup-menu-native/package.json
index 252e86c39..b6749da18 100644
--- a/packages/pluggableWidgets/popup-menu-native/package.json
+++ b/packages/pluggableWidgets/popup-menu-native/package.json
@@ -1,7 +1,7 @@
{
"name": "popup-menu-native",
"widgetName": "PopupMenu",
- "version": "2.2.0",
+ "version": "2.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/popup-menu-native/src/PopupMenu.editorConfig.ts b/packages/pluggableWidgets/popup-menu-native/src/PopupMenu.editorConfig.ts
index 84579e3ea..81251fb8e 100644
--- a/packages/pluggableWidgets/popup-menu-native/src/PopupMenu.editorConfig.ts
+++ b/packages/pluggableWidgets/popup-menu-native/src/PopupMenu.editorConfig.ts
@@ -1,7 +1,7 @@
import { StructurePreviewProps, DropZoneProps, ContainerProps, RowLayoutProps } from "@mendix/piw-utils-internal";
import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
-import { BasicItemsPreviewType, PopupMenuPreviewProps } from "../typings/PopupMenuProps";
+import { BasicItemsPreviewType, CustomItemsPreviewType, PopupMenuPreviewProps } from "../typings/PopupMenuProps";
export function getPreview(values: PopupMenuPreviewProps, isDarkMode: boolean): StructurePreviewProps {
return {
@@ -101,9 +101,19 @@ export function getProperties(values: PopupMenuPreviewProps, defaultProperties:
hidePropertyIn(defaultProperties, values, "basicItems", index, "action");
hidePropertyIn(defaultProperties, values, "basicItems", index, "styleClass");
}
+ if (item.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "basicItems", index, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "basicItems", index, "screenReaderHint");
+ }
});
} else {
hidePropertyIn(defaultProperties, values, "basicItems");
+ values.customItems.forEach((item: CustomItemsPreviewType, index: number) => {
+ if (item.customItemAccessible === "no") {
+ hidePropertyIn(defaultProperties, values, "customItems", index, "customItemScreenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "customItems", index, "customItemScreenReaderHint");
+ }
+ });
}
return defaultProperties;
}
diff --git a/packages/pluggableWidgets/popup-menu-native/src/PopupMenu.tsx b/packages/pluggableWidgets/popup-menu-native/src/PopupMenu.tsx
index 241be4c20..399a81f39 100644
--- a/packages/pluggableWidgets/popup-menu-native/src/PopupMenu.tsx
+++ b/packages/pluggableWidgets/popup-menu-native/src/PopupMenu.tsx
@@ -46,23 +46,34 @@ export function PopupMenu(props: PopupMenuProps<PopupMenuStyle>): ReactElement {
return item.itemType === "divider" ? (
<MenuDivider key={index} color={styles.basic?.dividerColor} />
) : (
- <MenuItem
- key={index}
- onPress={() => handlePress(item.action)}
- textStyle={itemStyle}
- ellipsizeMode={styles.basic?.itemStyle?.ellipsizeMode as any}
- style={styles.basic?.container as any}
- {...getRippleColor(styles.basic?.itemStyle?.rippleColor)}
- testID={`${props.name}_basic-item`}
+ <View
+ accessible={item.accessible === "yes"}
+ accessibilityLabel={item.screenReaderCaption?.value || item.caption}
+ accessibilityHint={item.screenReaderHint?.value}
+ accessibilityRole="menuitem"
>
- {item.caption}
- </MenuItem>
+ <MenuItem
+ key={index}
+ onPress={() => handlePress(item.action)}
+ textStyle={itemStyle}
+ ellipsizeMode={styles.basic?.itemStyle?.ellipsizeMode as any}
+ style={styles.basic?.container as any}
+ {...getRippleColor(styles.basic?.itemStyle?.rippleColor)}
+ testID={`${props.name}_basic-item`}
+ >
+ {item.caption}
+ </MenuItem>
+ </View>
);
});
} else {
menuOptions = props.customItems.map((item, index) => (
<TouchableItem
key={index}
+ accessible={item.customItemAccessible === "yes"}
+ accessibilityLabel={item.customItemScreenReaderCaption?.value}
+ accessibilityHint={item.customItemScreenReaderHint?.value}
+ accessibilityRole="menuitem"
style={styles.custom?.container}
onPress={() => handlePress(item.action)}
{...getRippleColor(styles.custom?.itemStyle?.rippleColor)}
diff --git a/packages/pluggableWidgets/popup-menu-native/src/PopupMenu.xml b/packages/pluggableWidgets/popup-menu-native/src/PopupMenu.xml
index 8d27bb69d..976d1ab18 100644
--- a/packages/pluggableWidgets/popup-menu-native/src/PopupMenu.xml
+++ b/packages/pluggableWidgets/popup-menu-native/src/PopupMenu.xml
@@ -1,8 +1,5 @@
<?xml version="1.0" encoding="utf-8" ?>
-<widget id="com.mendix.widget.native.popupmenu.PopupMenu" pluginWidget="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.popupmenu.PopupMenu" pluginWidget="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>Pop-up menu</name>
<description>Displays a set of pre-defined items within pop up menu</description>
<studioProCategory>Menus & navigation</studioProCategory>
@@ -22,7 +19,7 @@
</enumerationValues>
</property>
<property key="basicItems" type="object" isList="true" required="false">
- <caption>Items </caption>
+ <caption>Items</caption>
<description />
<properties>
<property key="itemType" type="enumeration" defaultValue="item">
@@ -55,6 +52,25 @@
<enumerationValue key="customStyle">Custom</enumerationValue>
</enumerationValues>
</property>
+ <property key="accessible" 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="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>
</property>
<property key="customItems" type="object" isList="true" required="false">
@@ -71,9 +87,27 @@
<category>General</category>
<description />
</property>
+ <property key="customItemAccessible" 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="customItemScreenReaderCaption" type="textTemplate" required="false">
+ <caption>Screen reader caption</caption>
+ <category>General</category>
+ <description />
+ </property>
+ <property key="customItemScreenReaderHint" type="textTemplate" required="false">
+ <caption>Screen reader hint</caption>
+ <category>General</category>
+ <description />
+ </property>
</properties>
</property>
</propertyGroup>
-
</properties>
</widget>
diff --git a/packages/pluggableWidgets/popup-menu-native/src/__tests__/PopupMenu.spec.tsx b/packages/pluggableWidgets/popup-menu-native/src/__tests__/PopupMenu.spec.tsx
index 8aa43934f..a42427bbe 100644
--- a/packages/pluggableWidgets/popup-menu-native/src/__tests__/PopupMenu.spec.tsx
+++ b/packages/pluggableWidgets/popup-menu-native/src/__tests__/PopupMenu.spec.tsx
@@ -24,10 +24,21 @@ describe("Popup menu", () => {
style: [],
menuTriggerer: <Text>Menu Triggerer</Text>,
basicItems: [
- { itemType: "item", action: dummyActionValue, caption: "yolo", styleClass: "defaultStyle" },
- { itemType: "divider", styleClass: "defaultStyle", caption: "" }
+ {
+ accessible: "yes",
+ itemType: "item",
+ action: dummyActionValue,
+ caption: "yolo",
+ styleClass: "defaultStyle"
+ },
+ {
+ accessible: "yes",
+ itemType: "divider",
+ styleClass: "defaultStyle",
+ caption: ""
+ }
],
- customItems: [{ content: <Text>Yolo</Text>, action: dummyActionValue }]
+ customItems: [{ customItemAccessible: "yes", content: <Text>Yolo</Text>, action: dummyActionValue }]
};
basicItemTestId = `${defaultProps.name}_basic-item`;
diff --git a/packages/pluggableWidgets/popup-menu-native/src/__tests__/__snapshots__/PopupMenu.spec.tsx.snap b/packages/pluggableWidgets/popup-menu-native/src/__tests__/__snapshots__/PopupMenu.spec.tsx.snap
index 24952d1a8..68991745e 100644
--- a/packages/pluggableWidgets/popup-menu-native/src/__tests__/__snapshots__/PopupMenu.spec.tsx.snap
+++ b/packages/pluggableWidgets/popup-menu-native/src/__tests__/__snapshots__/PopupMenu.spec.tsx.snap
@@ -104,48 +104,54 @@ exports[`Popup menu renders 1`] = `
}
>
<View
+ accessibilityLabel="yolo"
+ accessibilityRole="menuitem"
accessible={true}
- focusable={true}
- onClick={[Function]}
- onResponderGrant={[Function]}
- onResponderMove={[Function]}
- onResponderRelease={[Function]}
- onResponderTerminate={[Function]}
- onResponderTerminationRequest={[Function]}
- onStartShouldSetResponder={[Function]}
- testID="popup-menu_basic-item"
>
<View
- style={
- Array [
- Object {
- "height": 48,
- "justifyContent": "center",
- "maxWidth": 248,
- "minWidth": 124,
- },
- undefined,
- ]
- }
+ accessible={true}
+ focusable={true}
+ onClick={[Function]}
+ onResponderGrant={[Function]}
+ onResponderMove={[Function]}
+ onResponderRelease={[Function]}
+ onResponderTerminate={[Function]}
+ onResponderTerminationRequest={[Function]}
+ onStartShouldSetResponder={[Function]}
+ testID="popup-menu_basic-item"
>
- <Text
- ellipsizeMode="clip"
- numberOfLines={1}
+ <View
style={
Array [
Object {
- "fontSize": 14,
- "fontWeight": "400",
- "paddingHorizontal": 16,
- "textAlign": "left",
+ "height": 48,
+ "justifyContent": "center",
+ "maxWidth": 248,
+ "minWidth": 124,
},
- false,
undefined,
]
}
>
- yolo
- </Text>
+ <Text
+ ellipsizeMode="clip"
+ numberOfLines={1}
+ style={
+ Array [
+ Object {
+ "fontSize": 14,
+ "fontWeight": "400",
+ "paddingHorizontal": 16,
+ "textAlign": "left",
+ },
+ false,
+ undefined,
+ ]
+ }
+ >
+ yolo
+ </Text>
+ </View>
</View>
</View>
<View
diff --git a/packages/pluggableWidgets/popup-menu-native/src/package.xml b/packages/pluggableWidgets/popup-menu-native/src/package.xml
index 1558166d2..8080793d4 100644
--- a/packages/pluggableWidgets/popup-menu-native/src/package.xml
+++ b/packages/pluggableWidgets/popup-menu-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="PopupMenu" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="PopupMenu" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="PopupMenu.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/popup-menu-native/typings/PopupMenuProps.d.ts b/packages/pluggableWidgets/popup-menu-native/typings/PopupMenuProps.d.ts
index 13e27a41d..048838ec7 100644
--- a/packages/pluggableWidgets/popup-menu-native/typings/PopupMenuProps.d.ts
+++ b/packages/pluggableWidgets/popup-menu-native/typings/PopupMenuProps.d.ts
@@ -4,7 +4,7 @@
* @author Mendix UI Content Team
*/
import { ComponentType, CSSProperties, ReactNode } from "react";
-import { ActionValue } from "mendix";
+import { ActionValue, DynamicValue } from "mendix";
export type RenderModeEnum = "basic" | "custom";
@@ -12,16 +12,26 @@ export type ItemTypeEnum = "item" | "divider";
export type StyleClassEnum = "defaultStyle" | "primaryStyle" | "dangerStyle" | "customStyle";
+export type AccessibleEnum = "yes" | "no";
+
export interface BasicItemsType {
itemType: ItemTypeEnum;
caption: string;
action?: ActionValue;
styleClass: StyleClassEnum;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
+export type CustomItemAccessibleEnum = "yes" | "no";
+
export interface CustomItemsType {
content: ReactNode;
action?: ActionValue;
+ customItemAccessible: CustomItemAccessibleEnum;
+ customItemScreenReaderCaption?: DynamicValue<string>;
+ customItemScreenReaderHint?: DynamicValue<string>;
}
export interface BasicItemsPreviewType {
@@ -29,11 +39,17 @@ export interface BasicItemsPreviewType {
caption: string;
action: {} | null;
styleClass: StyleClassEnum;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
export interface CustomItemsPreviewType {
content: { widgetCount: number; renderer: ComponentType<{ caption?: string }> };
action: {} | null;
+ customItemAccessible: CustomItemAccessibleEnum;
+ customItemScreenReaderCaption: string;
+ customItemScreenReaderHint: string;
}
export interface PopupMenuProps<Style> {
diff --git a/packages/pluggableWidgets/progress-bar-native/CHANGELOG.md b/packages/pluggableWidgets/progress-bar-native/CHANGELOG.md
index 498320dc6..588db45ea 100644
--- a/packages/pluggableWidgets/progress-bar-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/progress-bar-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [4.2.0] - 2022-02-21
### Added
diff --git a/packages/pluggableWidgets/progress-bar-native/package.json b/packages/pluggableWidgets/progress-bar-native/package.json
index 8cbd9dfac..efe722cd6 100644
--- a/packages/pluggableWidgets/progress-bar-native/package.json
+++ b/packages/pluggableWidgets/progress-bar-native/package.json
@@ -1,7 +1,7 @@
{
"name": "progress-bar-native",
"widgetName": "ProgressBar",
- "version": "4.2.0",
+ "version": "4.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/progress-bar-native/src/ProgressBar.editorConfig.ts b/packages/pluggableWidgets/progress-bar-native/src/ProgressBar.editorConfig.ts
index b6ed42b4f..305e4c2d9 100644
--- a/packages/pluggableWidgets/progress-bar-native/src/ProgressBar.editorConfig.ts
+++ b/packages/pluggableWidgets/progress-bar-native/src/ProgressBar.editorConfig.ts
@@ -1,4 +1,5 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
+import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
import { ProgressBarPreviewProps } from "../typings/ProgressBarProps";
import progressBarSvgLight from "./assets/ProgressBar.light.svg";
@@ -13,3 +14,12 @@ export function getPreview(_: ProgressBarPreviewProps, isDarkMode: boolean): Str
width: 301
};
}
+
+export function getProperties(values: ProgressBarPreviewProps, defaultProperties: Properties): Properties {
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
+ return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/progress-bar-native/src/ProgressBar.tsx b/packages/pluggableWidgets/progress-bar-native/src/ProgressBar.tsx
index 7a8e886cc..545b1fd5a 100644
--- a/packages/pluggableWidgets/progress-bar-native/src/ProgressBar.tsx
+++ b/packages/pluggableWidgets/progress-bar-native/src/ProgressBar.tsx
@@ -54,7 +54,18 @@ export function ProgressBar(props: ProgressBarProps<ProgressBarStyle>): JSX.Elem
const progress = calculateProgress();
return (
- <View style={styles.container}>
+ <View
+ accessible={props.accessible === "yes"}
+ accessibilityLabel={props.screenReaderCaption?.value}
+ accessibilityHint={props.screenReaderHint?.value}
+ accessibilityValue={{
+ min: Number(props.minimumValue.value),
+ max: Number(props.maximumValue.value),
+ now: Number(props.progressValue.value)
+ }}
+ accessibilityRole="progressbar"
+ style={styles.container}
+ >
<Bar
testID={props.name}
height={Number(styles.bar.height)}
diff --git a/packages/pluggableWidgets/progress-bar-native/src/ProgressBar.xml b/packages/pluggableWidgets/progress-bar-native/src/ProgressBar.xml
index f654efb3f..1166ae068 100644
--- a/packages/pluggableWidgets/progress-bar-native/src/ProgressBar.xml
+++ b/packages/pluggableWidgets/progress-bar-native/src/ProgressBar.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.progressbar.ProgressBar" 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>Progress bar</name>
<description>Display progress in a horizontal bar.</description>
@@ -10,21 +10,39 @@
<property key="progressValue" type="expression" defaultValue="0">
<caption>Current value</caption>
<description>The current progress value.</description>
- <returnType type="Decimal"/>
+ <returnType type="Decimal" />
</property>
<property key="minimumValue" type="expression" defaultValue="0">
<caption>Minimum value</caption>
<description>The lowest possible progress value. If current value is lower than this value, progress will be still minimum value</description>
- <returnType type="Decimal"/>
+ <returnType type="Decimal" />
</property>
<property key="maximumValue" type="expression" defaultValue="100">
<caption>Maximum value</caption>
<description>The highest possible progress value. If current value is higher than this value, progress will be still maximum value</description>
- <returnType type="Decimal"/>
+ <returnType type="Decimal" />
</property>
</propertyGroup>
<propertyGroup caption="Common">
- <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>
</propertyGroup>
</propertyGroup>
</properties>
diff --git a/packages/pluggableWidgets/progress-bar-native/src/__tests__/ProgressBar.spec.tsx b/packages/pluggableWidgets/progress-bar-native/src/__tests__/ProgressBar.spec.tsx
index 49ecf6814..9dcd9ab52 100644
--- a/packages/pluggableWidgets/progress-bar-native/src/__tests__/ProgressBar.spec.tsx
+++ b/packages/pluggableWidgets/progress-bar-native/src/__tests__/ProgressBar.spec.tsx
@@ -51,6 +51,7 @@ describe("ProgressBar", () => {
function createProps(progressValue?: number, minimumValue?: number, maximumValue?: number): Props {
return {
name: "progress-bar-test",
+ accessible: "yes",
style: [],
progressValue: dynamicValue(progressValue != null ? new Big(progressValue) : undefined),
minimumValue: dynamicValue(minimumValue != null ? new Big(minimumValue) : undefined),
diff --git a/packages/pluggableWidgets/progress-bar-native/src/__tests__/__snapshots__/ProgressBar.spec.tsx.snap b/packages/pluggableWidgets/progress-bar-native/src/__tests__/__snapshots__/ProgressBar.spec.tsx.snap
index 9382cdd31..597551962 100644
--- a/packages/pluggableWidgets/progress-bar-native/src/__tests__/__snapshots__/ProgressBar.spec.tsx.snap
+++ b/packages/pluggableWidgets/progress-bar-native/src/__tests__/__snapshots__/ProgressBar.spec.tsx.snap
@@ -2,6 +2,15 @@
exports[`ProgressBar renders 1`] = `
<View
+ accessibilityRole="progressbar"
+ accessibilityValue={
+ Object {
+ "max": 100,
+ "min": 0,
+ "now": 50,
+ }
+ }
+ accessible={true}
style={Object {}}
>
<View
diff --git a/packages/pluggableWidgets/progress-bar-native/src/package.xml b/packages/pluggableWidgets/progress-bar-native/src/package.xml
index 67a8d77ac..48a04d8c7 100644
--- a/packages/pluggableWidgets/progress-bar-native/src/package.xml
+++ b/packages/pluggableWidgets/progress-bar-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="ProgressBar" version="4.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="ProgressBar" version="4.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="ProgressBar.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/progress-bar-native/typings/ProgressBarProps.d.ts b/packages/pluggableWidgets/progress-bar-native/typings/ProgressBarProps.d.ts
index ecd69109d..9e5c7b7c2 100644
--- a/packages/pluggableWidgets/progress-bar-native/typings/ProgressBarProps.d.ts
+++ b/packages/pluggableWidgets/progress-bar-native/typings/ProgressBarProps.d.ts
@@ -7,12 +7,17 @@ import { CSSProperties } from "react";
import { DynamicValue } from "mendix";
import { Big } from "big.js";
+export type AccessibleEnum = "yes" | "no";
+
export interface ProgressBarProps<Style> {
name: string;
style: Style[];
progressValue: DynamicValue<Big>;
minimumValue: DynamicValue<Big>;
maximumValue: DynamicValue<Big>;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface ProgressBarPreviewProps {
@@ -23,4 +28,7 @@ export interface ProgressBarPreviewProps {
progressValue: string;
minimumValue: string;
maximumValue: string;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/progress-circle-native/CHANGELOG.md b/packages/pluggableWidgets/progress-circle-native/CHANGELOG.md
index dc1faef83..cd815b19b 100644
--- a/packages/pluggableWidgets/progress-circle-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/progress-circle-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [3.1.0] - 2022-01-24
### Added
diff --git a/packages/pluggableWidgets/progress-circle-native/package.json b/packages/pluggableWidgets/progress-circle-native/package.json
index cd906d291..ff024aa4c 100644
--- a/packages/pluggableWidgets/progress-circle-native/package.json
+++ b/packages/pluggableWidgets/progress-circle-native/package.json
@@ -1,7 +1,7 @@
{
"name": "progress-circle-native",
"widgetName": "ProgressCircle",
- "version": "3.1.0",
+ "version": "3.2.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.editorConfig.ts b/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.editorConfig.ts
index 3be9a9444..71b8e0d1d 100644
--- a/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.editorConfig.ts
+++ b/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.editorConfig.ts
@@ -1,4 +1,6 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
+import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
+
import StructurePreviewSvg from "./assets/structure-preview.svg";
import StructurePreviewSvgDark from "./assets/structure-preview-dark.svg";
import { ProgressCirclePreviewProps } from "../typings/ProgressCircleProps";
@@ -13,3 +15,12 @@ export function getPreview(_: ProgressCirclePreviewProps, isDarkMode: boolean):
width: 175
};
}
+
+export function getProperties(values: ProgressCirclePreviewProps, defaultProperties: Properties): Properties {
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
+ return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.tsx b/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.tsx
index b1a6b5892..471bd7958 100644
--- a/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.tsx
+++ b/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.tsx
@@ -17,7 +17,18 @@ export class ProgressCircle extends Component<Props> {
const showsText = this.props.circleText !== "none";
return (
- <View style={this.styles.container}>
+ <View
+ accessible={this.props.accessible === "yes"}
+ accessibilityLabel={this.props.screenReaderCaption?.value}
+ accessibilityHint={this.props.screenReaderHint?.value}
+ accessibilityValue={{
+ min: Number(this.props.minimumValue.value),
+ max: Number(this.props.maximumValue.value),
+ now: Number(this.props.progressValue.value)
+ }}
+ accessibilityRole="progressbar"
+ style={this.styles.container}
+ >
<Circle
testID={this.props.name}
progress={progress}
diff --git a/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.xml b/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.xml
index 9a8b3fae4..5e4df3498 100644
--- a/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.xml
+++ b/packages/pluggableWidgets/progress-circle-native/src/ProgressCircle.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.progresscircle.ProgressCircle" 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>Progress circle</name>
<description>Display progress in a circle with enclosed text.</description>
@@ -10,23 +10,23 @@
<property key="progressValue" type="expression" defaultValue="0">
<caption>Current value</caption>
<description>The current progress value.</description>
- <returnType type="Decimal"/>
+ <returnType type="Decimal" />
</property>
<property key="minimumValue" type="expression" defaultValue="0">
<caption>Minimum value</caption>
<description>The lowest possible progress value.</description>
- <returnType type="Decimal"/>
+ <returnType type="Decimal" />
</property>
<property key="maximumValue" type="expression" defaultValue="100">
<caption>Maximum value</caption>
<description>The highest possible progress value.</description>
- <returnType type="Decimal"/>
+ <returnType type="Decimal" />
</property>
</propertyGroup>
<propertyGroup caption="Circle">
<property key="circleText" type="enumeration" defaultValue="percentage">
<caption>Text</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="percentage">Percentage</enumerationValue>
<enumerationValue key="customText">Custom</enumerationValue>
@@ -35,11 +35,29 @@
</property>
<property key="customText" type="textTemplate" required="false">
<caption>Custom text</caption>
- <description/>
+ <description />
</property>
</propertyGroup>
<propertyGroup caption="Common">
- <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>
</propertyGroup>
</propertyGroup>
</properties>
diff --git a/packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx b/packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx
index c6518f982..6f0dfc4d6 100644
--- a/packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx
+++ b/packages/pluggableWidgets/progress-circle-native/src/__tests__/ProgressCircle.spec.tsx
@@ -85,6 +85,7 @@ No current value provided.`
function createProps(progressValue?: number, minimumValue?: number, maximumValue?: number): Props {
return {
name: "progress-circle-test",
+ accessible: "yes",
style: [],
circleText: "percentage",
progressValue: dynamicValue(progressValue != null ? new Big(progressValue) : undefined),
diff --git a/packages/pluggableWidgets/progress-circle-native/src/__tests__/__snapshots__/ProgressCircle.spec.tsx.snap b/packages/pluggableWidgets/progress-circle-native/src/__tests__/__snapshots__/ProgressCircle.spec.tsx.snap
index 0b8bd5dd5..1105138ff 100644
--- a/packages/pluggableWidgets/progress-circle-native/src/__tests__/__snapshots__/ProgressCircle.spec.tsx.snap
+++ b/packages/pluggableWidgets/progress-circle-native/src/__tests__/__snapshots__/ProgressCircle.spec.tsx.snap
@@ -2,6 +2,15 @@
exports[`ProgressCircle renders 1`] = `
<View
+ accessibilityRole="progressbar"
+ accessibilityValue={
+ Object {
+ "max": 100,
+ "min": 0,
+ "now": 50,
+ }
+ }
+ accessible={true}
style={Object {}}
>
<View
diff --git a/packages/pluggableWidgets/progress-circle-native/src/package.xml b/packages/pluggableWidgets/progress-circle-native/src/package.xml
index 0967269e2..c79a8bb72 100644
--- a/packages/pluggableWidgets/progress-circle-native/src/package.xml
+++ b/packages/pluggableWidgets/progress-circle-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="ProgressCircle" version="3.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="ProgressCircle" version="3.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="ProgressCircle.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/progress-circle-native/typings/ProgressCircleProps.d.ts b/packages/pluggableWidgets/progress-circle-native/typings/ProgressCircleProps.d.ts
index ec748ce71..7764178bd 100644
--- a/packages/pluggableWidgets/progress-circle-native/typings/ProgressCircleProps.d.ts
+++ b/packages/pluggableWidgets/progress-circle-native/typings/ProgressCircleProps.d.ts
@@ -9,6 +9,8 @@ import { Big } from "big.js";
export type CircleTextEnum = "percentage" | "customText" | "none";
+export type AccessibleEnum = "yes" | "no";
+
export interface ProgressCircleProps<Style> {
name: string;
style: Style[];
@@ -17,6 +19,9 @@ export interface ProgressCircleProps<Style> {
maximumValue: DynamicValue<Big>;
circleText: CircleTextEnum;
customText?: DynamicValue<string>;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface ProgressCirclePreviewProps {
@@ -29,4 +34,7 @@ export interface ProgressCirclePreviewProps {
maximumValue: string;
circleText: CircleTextEnum;
customText: string;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/qr-code-native/CHANGELOG.md b/packages/pluggableWidgets/qr-code-native/CHANGELOG.md
index e9fa9a10f..b097cf412 100644
--- a/packages/pluggableWidgets/qr-code-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/qr-code-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [3.1.1] - 2022-03-28
### Added
diff --git a/packages/pluggableWidgets/qr-code-native/package.json b/packages/pluggableWidgets/qr-code-native/package.json
index 4926ca6d2..5f82fe437 100644
--- a/packages/pluggableWidgets/qr-code-native/package.json
+++ b/packages/pluggableWidgets/qr-code-native/package.json
@@ -1,7 +1,7 @@
{
"name": "qr-code-native",
"widgetName": "QRCode",
- "version": "3.1.1",
+ "version": "3.2.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/qr-code-native/src/QRCode.editorConfig.ts b/packages/pluggableWidgets/qr-code-native/src/QRCode.editorConfig.ts
index a1f0408e5..604a29eef 100644
--- a/packages/pluggableWidgets/qr-code-native/src/QRCode.editorConfig.ts
+++ b/packages/pluggableWidgets/qr-code-native/src/QRCode.editorConfig.ts
@@ -1,4 +1,6 @@
import { RowLayoutProps } from "@mendix/piw-utils-internal";
+import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
+
import StructurePreviewQRCodeSVG from "./assets/StructurePreviewQRCode.svg";
import StructurePreviewQRCodeDarkSVG from "./assets/StructurePreviewQRCodeDark.svg";
import { QRCodePreviewProps } from "../typings/QRCodeProps";
@@ -22,3 +24,12 @@ export const getPreview = (_: QRCodePreviewProps, isDarkMode: boolean): RowLayou
}
]
});
+
+export function getProperties(values: QRCodePreviewProps, defaultProperties: Properties): Properties {
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
+ return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/qr-code-native/src/QRCode.tsx b/packages/pluggableWidgets/qr-code-native/src/QRCode.tsx
index 588fcd6fe..370d17215 100644
--- a/packages/pluggableWidgets/qr-code-native/src/QRCode.tsx
+++ b/packages/pluggableWidgets/qr-code-native/src/QRCode.tsx
@@ -13,7 +13,13 @@ export class QRCode extends Component<Props> {
render(): JSX.Element {
return (
- <View style={this.styles.container} testID={this.props.name}>
+ <View
+ accessible={this.props.accessible === "yes"}
+ accessibilityLabel={this.props.screenReaderCaption?.value}
+ accessibilityHint={this.props.screenReaderHint?.value}
+ style={this.styles.container}
+ testID={this.props.name}
+ >
{this.props.value.value ? (
<RNQRCode
value={this.props.value.value}
diff --git a/packages/pluggableWidgets/qr-code-native/src/QRCode.xml b/packages/pluggableWidgets/qr-code-native/src/QRCode.xml
index 3181ba788..b3b5ce50d 100644
--- a/packages/pluggableWidgets/qr-code-native/src/QRCode.xml
+++ b/packages/pluggableWidgets/qr-code-native/src/QRCode.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.qrcode.QRCode" 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>QR code</name>
<description>Display a QR code based on a value.</description>
@@ -13,7 +13,25 @@
</property>
</propertyGroup>
<propertyGroup caption="Common">
- <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>
</propertyGroup>
</propertyGroup>
</properties>
diff --git a/packages/pluggableWidgets/qr-code-native/src/__tests__/QRCode.spec.tsx b/packages/pluggableWidgets/qr-code-native/src/__tests__/QRCode.spec.tsx
index 75d6565e9..939c95e07 100644
--- a/packages/pluggableWidgets/qr-code-native/src/__tests__/QRCode.spec.tsx
+++ b/packages/pluggableWidgets/qr-code-native/src/__tests__/QRCode.spec.tsx
@@ -10,6 +10,7 @@ describe("QRCode", () => {
beforeEach(() => {
defaultProps = {
name: "qr-code-test",
+ accessible: "yes",
style: [],
value: dynamicValue("Hello, world!")
};
diff --git a/packages/pluggableWidgets/qr-code-native/src/__tests__/__snapshots__/QRCode.spec.tsx.snap b/packages/pluggableWidgets/qr-code-native/src/__tests__/__snapshots__/QRCode.spec.tsx.snap
index 8005419ec..960ed17f2 100644
--- a/packages/pluggableWidgets/qr-code-native/src/__tests__/__snapshots__/QRCode.spec.tsx.snap
+++ b/packages/pluggableWidgets/qr-code-native/src/__tests__/__snapshots__/QRCode.spec.tsx.snap
@@ -2,6 +2,7 @@
exports[`QRCode renders a qr code 1`] = `
<View
+ accessible={true}
style={Object {}}
testID="qr-code-test"
>
@@ -85,6 +86,7 @@ exports[`QRCode renders a qr code 1`] = `
exports[`QRCode renders an empty container when there is no value 1`] = `
<View
+ accessible={true}
style={Object {}}
testID="qr-code-test"
/>
diff --git a/packages/pluggableWidgets/qr-code-native/src/package.xml b/packages/pluggableWidgets/qr-code-native/src/package.xml
index 2913958b1..19d4279bd 100644
--- a/packages/pluggableWidgets/qr-code-native/src/package.xml
+++ b/packages/pluggableWidgets/qr-code-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="QRCode" version="3.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="QRCode" version="3.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="QRCode.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/qr-code-native/typings/QRCodeProps.d.ts b/packages/pluggableWidgets/qr-code-native/typings/QRCodeProps.d.ts
index ba21bb155..d702a27d8 100644
--- a/packages/pluggableWidgets/qr-code-native/typings/QRCodeProps.d.ts
+++ b/packages/pluggableWidgets/qr-code-native/typings/QRCodeProps.d.ts
@@ -6,10 +6,15 @@
import { CSSProperties } from "react";
import { DynamicValue } from "mendix";
+export type AccessibleEnum = "yes" | "no";
+
export interface QRCodeProps<Style> {
name: string;
style: Style[];
value: DynamicValue<string>;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface QRCodePreviewProps {
@@ -18,4 +23,7 @@ export interface QRCodePreviewProps {
styleObject?: CSSProperties;
readOnly: boolean;
value: string;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/radio-buttons-native/CHANGELOG.md b/packages/pluggableWidgets/radio-buttons-native/CHANGELOG.md
index d07908655..1ce0c42c6 100644
--- a/packages/pluggableWidgets/radio-buttons-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/radio-buttons-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [1.0.0] - 2022-01-24
### Added
diff --git a/packages/pluggableWidgets/radio-buttons-native/package.json b/packages/pluggableWidgets/radio-buttons-native/package.json
index 43541218c..80fc02073 100644
--- a/packages/pluggableWidgets/radio-buttons-native/package.json
+++ b/packages/pluggableWidgets/radio-buttons-native/package.json
@@ -1,7 +1,7 @@
{
"name": "radio-buttons-native",
"widgetName": "RadioButtons",
- "version": "1.0.0",
+ "version": "1.1.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/radio-buttons-native/src/RadioButtons.editorConfig.ts b/packages/pluggableWidgets/radio-buttons-native/src/RadioButtons.editorConfig.ts
index e4df88477..9c304dcff 100644
--- a/packages/pluggableWidgets/radio-buttons-native/src/RadioButtons.editorConfig.ts
+++ b/packages/pluggableWidgets/radio-buttons-native/src/RadioButtons.editorConfig.ts
@@ -1,5 +1,5 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
-import { Properties, hidePropertiesIn } from "@mendix/pluggable-widgets-tools";
+import { Properties, hidePropertiesIn, hidePropertyIn } from "@mendix/pluggable-widgets-tools";
import { RadioButtonsPreviewProps } from "../typings/RadioButtonsProps";
import darkRadioIcon from "./assets/radioButton_dark.svg";
@@ -133,5 +133,9 @@ export function getProperties(values: RadioButtonsPreviewProps, defaultPropertie
if (!values.showLabel) {
hidePropertiesIn(defaultProperties, values, ["label"]);
}
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
return defaultProperties;
}
diff --git a/packages/pluggableWidgets/radio-buttons-native/src/RadioButtons.tsx b/packages/pluggableWidgets/radio-buttons-native/src/RadioButtons.tsx
index 36d347587..0abc11cdf 100644
--- a/packages/pluggableWidgets/radio-buttons-native/src/RadioButtons.tsx
+++ b/packages/pluggableWidgets/radio-buttons-native/src/RadioButtons.tsx
@@ -17,7 +17,9 @@ export function RadioButtons({
onChange,
name,
label,
- showLabel
+ showLabel,
+ accessible,
+ screenReaderHint
}: props): ReactElement {
const styles = mergeNativeStyles(defaultRadioButtonsStyle, style);
const onSelect = useCallback(
@@ -32,11 +34,12 @@ export function RadioButtons({
);
return (
- <View testID={name} style={styles.container}>
+ <View accessibilityHint={screenReaderHint?.value} testID={name} style={styles.container}>
{showLabel && <Text style={styles.labelTextStyle}>{label?.value}</Text>}
<View style={orientation === "horizontal" && styles.containerHorizontal}>
{universe?.map(name => (
<RadioButton
+ accessible={accessible === "yes"}
key={name}
active={value === name}
onSelect={onSelect}
diff --git a/packages/pluggableWidgets/radio-buttons-native/src/RadioButtons.xml b/packages/pluggableWidgets/radio-buttons-native/src/RadioButtons.xml
index 4483c90c6..e77c4b07d 100644
--- a/packages/pluggableWidgets/radio-buttons-native/src/RadioButtons.xml
+++ b/packages/pluggableWidgets/radio-buttons-native/src/RadioButtons.xml
@@ -1,6 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<widget xmlns="http://www.mendix.com/widget/1.0/"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="com.mendix.widget.native.radiobuttons.RadioButtons" pluginWidget="true" needsEntityContext="true" offlineCapable="true" supportedPlatform="Native" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
+<?xml version="1.0" encoding="UTF-8" ?>
+<widget xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="com.mendix.widget.native.radiobuttons.RadioButtons" pluginWidget="true" needsEntityContext="true" offlineCapable="true" supportedPlatform="Native" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
<name>Radio Buttons</name>
<description />
<studioProCategory>Input elements</studioProCategory>
@@ -11,7 +10,7 @@
<propertyGroup caption="General">
<property key="orientation" type="enumeration" defaultValue="vertical">
<caption>Orientation</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="vertical">Vertical</enumerationValue>
<enumerationValue key="horizontal">Horizontal</enumerationValue>
@@ -46,6 +45,24 @@
<propertyGroup caption="Common">
<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>
+ </propertyGroup>
</propertyGroup>
<propertyGroup caption="Events">
<propertyGroup caption="Events">
@@ -56,4 +73,4 @@
</propertyGroup>
</propertyGroup>
</properties>
-</widget>
\ No newline at end of file
+</widget>
diff --git a/packages/pluggableWidgets/radio-buttons-native/src/__tests__/RadioButtons.spec.tsx b/packages/pluggableWidgets/radio-buttons-native/src/__tests__/RadioButtons.spec.tsx
index 0a1adde72..099a22ed9 100644
--- a/packages/pluggableWidgets/radio-buttons-native/src/__tests__/RadioButtons.spec.tsx
+++ b/packages/pluggableWidgets/radio-buttons-native/src/__tests__/RadioButtons.spec.tsx
@@ -18,6 +18,7 @@ describe("Radio buttons", () => {
.withValue(enumValues[0])
.build(),
name: "radio-buttons-test",
+ accessible: "yes",
orientation: "vertical",
style: [],
onChange: actionValue(),
diff --git a/packages/pluggableWidgets/radio-buttons-native/src/__tests__/__snapshots__/RadioButtons.spec.tsx.snap b/packages/pluggableWidgets/radio-buttons-native/src/__tests__/__snapshots__/RadioButtons.spec.tsx.snap
index d5d434b67..5171ebf78 100644
--- a/packages/pluggableWidgets/radio-buttons-native/src/__tests__/__snapshots__/RadioButtons.spec.tsx.snap
+++ b/packages/pluggableWidgets/radio-buttons-native/src/__tests__/__snapshots__/RadioButtons.spec.tsx.snap
@@ -9,6 +9,14 @@ exports[`Radio buttons render correctly with show label false 1`] = `
style={false}
>
<View
+ accessibilityLabel="Formatted firstItem"
+ accessibilityRole="radio"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ "selected": true,
+ }
+ }
accessible={true}
collapsable={false}
focusable={true}
@@ -75,6 +83,14 @@ exports[`Radio buttons render correctly with show label false 1`] = `
</Text>
</View>
<View
+ accessibilityLabel="Formatted secondItem"
+ accessibilityRole="radio"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ "selected": false,
+ }
+ }
accessible={true}
collapsable={false}
focusable={true}
@@ -152,6 +168,14 @@ exports[`Radio buttons render correctly without label 1`] = `
style={false}
>
<View
+ accessibilityLabel="Formatted firstItem"
+ accessibilityRole="radio"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ "selected": true,
+ }
+ }
accessible={true}
collapsable={false}
focusable={true}
@@ -218,6 +242,14 @@ exports[`Radio buttons render correctly without label 1`] = `
</Text>
</View>
<View
+ accessibilityLabel="Formatted secondItem"
+ accessibilityRole="radio"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ "selected": false,
+ }
+ }
accessible={true}
collapsable={false}
focusable={true}
@@ -297,6 +329,14 @@ exports[`Radio buttons render disabled radio buttons correctly 1`] = `
style={false}
>
<View
+ accessibilityLabel="Formatted firstItem"
+ accessibilityRole="radio"
+ accessibilityState={
+ Object {
+ "disabled": true,
+ "selected": false,
+ }
+ }
accessible={true}
collapsable={false}
focusable={true}
@@ -354,6 +394,14 @@ exports[`Radio buttons render disabled radio buttons correctly 1`] = `
</Text>
</View>
<View
+ accessibilityLabel="Formatted secondItem"
+ accessibilityRole="radio"
+ accessibilityState={
+ Object {
+ "disabled": true,
+ "selected": false,
+ }
+ }
accessible={true}
collapsable={false}
focusable={true}
@@ -441,6 +489,14 @@ exports[`Radio buttons render horizontal radio buttons correctly 1`] = `
}
>
<View
+ accessibilityLabel="Formatted firstItem"
+ accessibilityRole="radio"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ "selected": true,
+ }
+ }
accessible={true}
collapsable={false}
focusable={true}
@@ -510,6 +566,14 @@ exports[`Radio buttons render horizontal radio buttons correctly 1`] = `
</Text>
</View>
<View
+ accessibilityLabel="Formatted secondItem"
+ accessibilityRole="radio"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ "selected": false,
+ }
+ }
accessible={true}
collapsable={false}
focusable={true}
@@ -592,6 +656,14 @@ exports[`Radio buttons render vertical radio buttons correctly 1`] = `
style={false}
>
<View
+ accessibilityLabel="Formatted firstItem"
+ accessibilityRole="radio"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ "selected": true,
+ }
+ }
accessible={true}
collapsable={false}
focusable={true}
@@ -658,6 +730,14 @@ exports[`Radio buttons render vertical radio buttons correctly 1`] = `
</Text>
</View>
<View
+ accessibilityLabel="Formatted secondItem"
+ accessibilityRole="radio"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ "selected": false,
+ }
+ }
accessible={true}
collapsable={false}
focusable={true}
diff --git a/packages/pluggableWidgets/radio-buttons-native/src/components/RadioButton.tsx b/packages/pluggableWidgets/radio-buttons-native/src/components/RadioButton.tsx
index a8fde8410..acb5a24ca 100644
--- a/packages/pluggableWidgets/radio-buttons-native/src/components/RadioButton.tsx
+++ b/packages/pluggableWidgets/radio-buttons-native/src/components/RadioButton.tsx
@@ -11,6 +11,7 @@ export interface RadioButtonProps {
name: string;
disabled: boolean;
orientation: OrientationEnum;
+ accessible: boolean;
}
export function RadioButton({
@@ -20,10 +21,15 @@ export function RadioButton({
styles,
name,
disabled,
- orientation
+ orientation,
+ accessible
}: RadioButtonProps): ReactElement {
return (
<Pressable
+ accessible={accessible}
+ accessibilityLabel={title}
+ accessibilityRole="radio"
+ accessibilityState={{ disabled, selected: active }}
style={[
styles.radioButtonItemContainerStyle,
orientation === "horizontal" && styles.radioButtonItemContainerHorizontalStyle,
diff --git a/packages/pluggableWidgets/radio-buttons-native/src/package.xml b/packages/pluggableWidgets/radio-buttons-native/src/package.xml
index ca8dcd8c0..940acdb1f 100644
--- a/packages/pluggableWidgets/radio-buttons-native/src/package.xml
+++ b/packages/pluggableWidgets/radio-buttons-native/src/package.xml
@@ -1,11 +1,11 @@
<?xml version="1.0" encoding="utf-8" ?>
<package xmlns="http://www.mendix.com/package/1.0/">
- <clientModule name="RadioButtons" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="RadioButtons" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
- <widgetFile path="RadioButtons.xml"/>
+ <widgetFile path="RadioButtons.xml" />
</widgetFiles>
<files>
- <file path="com/mendix/widget/native/radiobuttons"/>
+ <file path="com/mendix/widget/native/radiobuttons" />
</files>
</clientModule>
</package>
diff --git a/packages/pluggableWidgets/radio-buttons-native/typings/RadioButtonsProps.d.ts b/packages/pluggableWidgets/radio-buttons-native/typings/RadioButtonsProps.d.ts
index f2ffa1f90..c3f7de749 100644
--- a/packages/pluggableWidgets/radio-buttons-native/typings/RadioButtonsProps.d.ts
+++ b/packages/pluggableWidgets/radio-buttons-native/typings/RadioButtonsProps.d.ts
@@ -8,6 +8,8 @@ import { ActionValue, DynamicValue, EditableValue } from "mendix";
export type OrientationEnum = "vertical" | "horizontal";
+export type AccessibleEnum = "yes" | "no";
+
export interface RadioButtonsProps<Style> {
name: string;
style: Style[];
@@ -15,6 +17,9 @@ export interface RadioButtonsProps<Style> {
enum: EditableValue<string>;
showLabel: boolean;
label?: DynamicValue<string>;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
onChange?: ActionValue;
}
@@ -27,5 +32,8 @@ export interface RadioButtonsPreviewProps {
enum: string;
showLabel: boolean;
label: string;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
onChange: {} | null;
}
diff --git a/packages/pluggableWidgets/range-slider-native/CHANGELOG.md b/packages/pluggableWidgets/range-slider-native/CHANGELOG.md
index 1892ed327..c379cfe55 100644
--- a/packages/pluggableWidgets/range-slider-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/range-slider-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.2.1] - 2022-04-07
### Changed
diff --git a/packages/pluggableWidgets/range-slider-native/package.json b/packages/pluggableWidgets/range-slider-native/package.json
index 0c4472f47..05e588654 100644
--- a/packages/pluggableWidgets/range-slider-native/package.json
+++ b/packages/pluggableWidgets/range-slider-native/package.json
@@ -1,7 +1,7 @@
{
"name": "range-slider-native",
"widgetName": "RangeSlider",
- "version": "2.2.1",
+ "version": "2.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/range-slider-native/src/Marker.tsx b/packages/pluggableWidgets/range-slider-native/src/Marker.tsx
index 2eb27b80a..740e9dc93 100644
--- a/packages/pluggableWidgets/range-slider-native/src/Marker.tsx
+++ b/packages/pluggableWidgets/range-slider-native/src/Marker.tsx
@@ -4,7 +4,7 @@ import { Platform, StyleSheet, TouchableHighlight, View } from "react-native";
export function Marker(props: MarkerProps & { testID: string }): ReactElement {
return (
- <TouchableHighlight testID={props.testID}>
+ <TouchableHighlight accessibilityLabel="Test" testID={props.testID}>
<View
style={
props.enabled
diff --git a/packages/pluggableWidgets/range-slider-native/src/RangeSlider.tsx b/packages/pluggableWidgets/range-slider-native/src/RangeSlider.tsx
index 2cca2417a..8287badb0 100644
--- a/packages/pluggableWidgets/range-slider-native/src/RangeSlider.tsx
+++ b/packages/pluggableWidgets/range-slider-native/src/RangeSlider.tsx
@@ -79,7 +79,15 @@ export function RangeSlider(props: Props): ReactElement {
);
return (
- <View onLayout={onLayout} style={styles.container} testID={props.name}>
+ <View
+ accessibilityLabel={props.screenReaderCaption?.value}
+ accessibilityHint={props.screenReaderHint?.value}
+ accessibilityRole="adjustable"
+ accessibilityValue={{ min: toNumber(props.minimumValue), max: toNumber(props.minimumValue) }}
+ onLayout={onLayout}
+ style={styles.container}
+ testID={props.name}
+ >
<MultiSlider
values={lowerValue != null && upperValue != null ? [lowerValue, upperValue] : undefined}
min={validProps ? toNumber(props.minimumValue) : undefined}
diff --git a/packages/pluggableWidgets/range-slider-native/src/RangeSlider.xml b/packages/pluggableWidgets/range-slider-native/src/RangeSlider.xml
index 57f475886..677b13f56 100644
--- a/packages/pluggableWidgets/range-slider-native/src/RangeSlider.xml
+++ b/packages/pluggableWidgets/range-slider-native/src/RangeSlider.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.rangeslider.RangeSlider" 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>Range slider</name>
<description>Change a range of values using a slider.</description>
@@ -6,30 +6,48 @@
<studioCategory>Input elements</studioCategory>
<properties>
<propertyGroup caption="General">
+ <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>
+ </propertyGroup>
<propertyGroup caption="Data source selected range">
<property key="lowerValueAttribute" type="attribute">
<caption>Lower value attribute</caption>
<description>The selected lower bound value on the slider.</description>
<attributeTypes>
- <attributeType name="Integer"/>
- <attributeType name="Long"/>
- <attributeType name="Decimal"/>
+ <attributeType name="Integer" />
+ <attributeType name="Long" />
+ <attributeType name="Decimal" />
</attributeTypes>
</property>
<property key="upperValueAttribute" type="attribute">
<caption>Upper value attribute</caption>
<description>The selected upper bound value on the slider.</description>
<attributeTypes>
- <attributeType name="Integer"/>
- <attributeType name="Long"/>
- <attributeType name="Decimal"/>
+ <attributeType name="Integer" />
+ <attributeType name="Long" />
+ <attributeType name="Decimal" />
</attributeTypes>
</property>
</propertyGroup>
<propertyGroup caption="Editability">
<property key="editable" type="enumeration" defaultValue="default">
<caption>Editable</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="default">Default</enumerationValue>
<enumerationValue key="never">Never</enumerationValue>
@@ -40,17 +58,17 @@
<property key="minimumValue" type="expression" defaultValue="0">
<caption>Minimum value</caption>
<description>The minimum value that can be selected.</description>
- <returnType type="Decimal"/>
+ <returnType type="Decimal" />
</property>
<property key="maximumValue" type="expression" defaultValue="100">
<caption>Maximum value</caption>
<description>The maximum value that can be selected.</description>
- <returnType type="Decimal"/>
+ <returnType type="Decimal" />
</property>
<property key="stepSize" type="expression" defaultValue="1">
<caption>Step size</caption>
<description>The interval between two selectable points.</description>
- <returnType type="Decimal"/>
+ <returnType type="Decimal" />
</property>
</propertyGroup>
</propertyGroup>
diff --git a/packages/pluggableWidgets/range-slider-native/src/__tests__/RangeSlider.spec.tsx b/packages/pluggableWidgets/range-slider-native/src/__tests__/RangeSlider.spec.tsx
index f4db82be4..6469ff196 100644
--- a/packages/pluggableWidgets/range-slider-native/src/__tests__/RangeSlider.spec.tsx
+++ b/packages/pluggableWidgets/range-slider-native/src/__tests__/RangeSlider.spec.tsx
@@ -14,6 +14,7 @@ describe("RangeSlider", () => {
beforeEach(() => {
defaultProps = {
name: "range-slider-test",
+ accessible: "yes",
style: [],
lowerValueAttribute: new EditableValueBuilder<Big>().withValue(new Big(70)).build(),
upperValueAttribute: new EditableValueBuilder<Big>().withValue(new Big(210)).build(),
diff --git a/packages/pluggableWidgets/range-slider-native/src/__tests__/__snapshots__/RangeSlider.spec.tsx.snap b/packages/pluggableWidgets/range-slider-native/src/__tests__/__snapshots__/RangeSlider.spec.tsx.snap
index c300f559b..27c2bd1d1 100644
--- a/packages/pluggableWidgets/range-slider-native/src/__tests__/__snapshots__/RangeSlider.spec.tsx.snap
+++ b/packages/pluggableWidgets/range-slider-native/src/__tests__/__snapshots__/RangeSlider.spec.tsx.snap
@@ -2,6 +2,13 @@
exports[`RangeSlider renders 1`] = `
<View
+ accessibilityRole="adjustable"
+ accessibilityValue={
+ Object {
+ "max": 0,
+ "min": 0,
+ }
+ }
onLayout={[Function]}
style={Object {}}
testID="range-slider-test"
@@ -134,6 +141,7 @@ exports[`RangeSlider renders 1`] = `
}
>
<View
+ accessibilityLabel="Test"
accessible={true}
focusable={false}
onClick={[Function]}
@@ -222,6 +230,7 @@ exports[`RangeSlider renders 1`] = `
}
>
<View
+ accessibilityLabel="Test"
accessible={true}
focusable={false}
onClick={[Function]}
diff --git a/packages/pluggableWidgets/range-slider-native/src/package.xml b/packages/pluggableWidgets/range-slider-native/src/package.xml
index 6c8b26778..652a476fc 100644
--- a/packages/pluggableWidgets/range-slider-native/src/package.xml
+++ b/packages/pluggableWidgets/range-slider-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="RangeSlider" version="2.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="RangeSlider" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="RangeSlider.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/range-slider-native/typings/RangeSliderProps.d.ts b/packages/pluggableWidgets/range-slider-native/typings/RangeSliderProps.d.ts
index 2a7d9a6e1..452b7f6cf 100644
--- a/packages/pluggableWidgets/range-slider-native/typings/RangeSliderProps.d.ts
+++ b/packages/pluggableWidgets/range-slider-native/typings/RangeSliderProps.d.ts
@@ -7,11 +7,16 @@ import { CSSProperties } from "react";
import { ActionValue, DynamicValue, EditableValue } from "mendix";
import { Big } from "big.js";
+export type AccessibleEnum = "yes" | "no";
+
export type EditableEnum = "default" | "never";
export interface RangeSliderProps<Style> {
name: string;
style: Style[];
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
lowerValueAttribute: EditableValue<Big>;
upperValueAttribute: EditableValue<Big>;
editable: EditableEnum;
@@ -26,6 +31,9 @@ export interface RangeSliderPreviewProps {
style: string;
styleObject?: CSSProperties;
readOnly: boolean;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
lowerValueAttribute: string;
upperValueAttribute: string;
editable: EditableEnum;
diff --git a/packages/pluggableWidgets/rating-native/CHANGELOG.md b/packages/pluggableWidgets/rating-native/CHANGELOG.md
index 0e3d4cd71..0283b851e 100644
--- a/packages/pluggableWidgets/rating-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/rating-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.1.1] - 2022-02-02
### Fixed
diff --git a/packages/pluggableWidgets/rating-native/package.json b/packages/pluggableWidgets/rating-native/package.json
index 0a65a51af..2098350f8 100644
--- a/packages/pluggableWidgets/rating-native/package.json
+++ b/packages/pluggableWidgets/rating-native/package.json
@@ -1,7 +1,7 @@
{
"name": "rating-native",
"widgetName": "Rating",
- "version": "2.1.1",
+ "version": "2.2.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/rating-native/src/Rating.xml b/packages/pluggableWidgets/rating-native/src/Rating.xml
index 1a765f7d9..96f05d978 100644
--- a/packages/pluggableWidgets/rating-native/src/Rating.xml
+++ b/packages/pluggableWidgets/rating-native/src/Rating.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.rating.Rating" 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>Rating</name>
<description>Give a rating by selecting stars.</description>
@@ -6,25 +6,43 @@
<studioCategory>Input elements</studioCategory>
<properties>
<propertyGroup caption="General">
+ <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>
+ </propertyGroup>
<propertyGroup caption="Data source">
<property key="ratingAttribute" type="attribute">
<caption>Attribute</caption>
- <description/>
+ <description />
<attributeTypes>
- <attributeType name="Integer"/>
- <attributeType name="Long"/>
- <attributeType name="Decimal"/>
+ <attributeType name="Integer" />
+ <attributeType name="Long" />
+ <attributeType name="Decimal" />
</attributeTypes>
</property>
</propertyGroup>
<propertyGroup caption="Rating">
<property key="emptyIcon" type="image" required="false">
<caption>Empty icon</caption>
- <description/>
+ <description />
</property>
<property key="icon" type="image" required="false">
<caption>Selected icon</caption>
- <description/>
+ <description />
</property>
<property key="maximumValue" type="integer" defaultValue="5">
<caption>Amount</caption>
@@ -32,7 +50,7 @@
</property>
<property key="animation" type="enumeration" defaultValue="pulse">
<caption>Animation</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="pulse">Pulse</enumerationValue>
<enumerationValue key="bounce">Bounce</enumerationValue>
@@ -51,7 +69,7 @@
<propertyGroup caption="Editability">
<property key="editable" type="enumeration" defaultValue="default">
<caption>Editable</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="default">Default</enumerationValue>
<enumerationValue key="never">Never</enumerationValue>
@@ -61,11 +79,11 @@
<propertyGroup caption="Events">
<property key="onChange" type="action" required="false">
<caption>On change</caption>
- <description/>
+ <description />
</property>
</propertyGroup>
<propertyGroup caption="Common">
- <systemProperty key="Name"/>
+ <systemProperty key="Name" />
</propertyGroup>
</propertyGroup>
</properties>
diff --git a/packages/pluggableWidgets/rating-native/src/__test__/Rating.spec.tsx b/packages/pluggableWidgets/rating-native/src/__test__/Rating.spec.tsx
index 0c2b37a22..76a7e53cc 100644
--- a/packages/pluggableWidgets/rating-native/src/__test__/Rating.spec.tsx
+++ b/packages/pluggableWidgets/rating-native/src/__test__/Rating.spec.tsx
@@ -17,7 +17,8 @@ const ratingProps: Props = {
ratingAttribute: new EditableValueBuilder<Big>().withValue(new Big(0)).build(),
style: [defaultRatingStyle],
icon: dynamicValue({ uri: "" }),
- emptyIcon: dynamicValue({ uri: "" })
+ emptyIcon: dynamicValue({ uri: "" }),
+ accessible: "yes"
};
describe("Rating", () => {
diff --git a/packages/pluggableWidgets/rating-native/src/package.xml b/packages/pluggableWidgets/rating-native/src/package.xml
index 47d7bbe53..b777b28ae 100644
--- a/packages/pluggableWidgets/rating-native/src/package.xml
+++ b/packages/pluggableWidgets/rating-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="Rating" version="2.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="Rating" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="Rating.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/rating-native/typings/RatingProps.d.ts b/packages/pluggableWidgets/rating-native/typings/RatingProps.d.ts
index c0fb1604c..4a8547ec8 100644
--- a/packages/pluggableWidgets/rating-native/typings/RatingProps.d.ts
+++ b/packages/pluggableWidgets/rating-native/typings/RatingProps.d.ts
@@ -7,13 +7,29 @@ import { CSSProperties } from "react";
import { ActionValue, DynamicValue, EditableValue, NativeImage } from "mendix";
import { Big } from "big.js";
-export type AnimationEnum = "pulse" | "bounce" | "flash" | "jello" | "rotate" | "rubberBand" | "shake" | "swing" | "tada" | "wobble" | "none";
+export type AccessibleEnum = "yes" | "no";
+
+export type AnimationEnum =
+ | "pulse"
+ | "bounce"
+ | "flash"
+ | "jello"
+ | "rotate"
+ | "rubberBand"
+ | "shake"
+ | "swing"
+ | "tada"
+ | "wobble"
+ | "none";
export type EditableEnum = "default" | "never";
export interface RatingProps<Style> {
name: string;
style: Style[];
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
ratingAttribute: EditableValue<Big>;
emptyIcon?: DynamicValue<NativeImage>;
icon?: DynamicValue<NativeImage>;
@@ -28,9 +44,12 @@ export interface RatingPreviewProps {
style: string;
styleObject?: CSSProperties;
readOnly: boolean;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
ratingAttribute: string;
- emptyIcon: { type: "static"; imageUrl: string; } | { type: "dynamic"; entity: string; } | null;
- icon: { type: "static"; imageUrl: string; } | { type: "dynamic"; entity: string; } | null;
+ emptyIcon: { type: "static"; imageUrl: string } | { type: "dynamic"; entity: string } | null;
+ icon: { type: "static"; imageUrl: string } | { type: "dynamic"; entity: string } | null;
maximumValue: number | null;
animation: AnimationEnum;
editable: EditableEnum;
diff --git a/packages/pluggableWidgets/repeater-native/CHANGELOG.md b/packages/pluggableWidgets/repeater-native/CHANGELOG.md
index 70ca3a9c3..5bbcda76c 100644
--- a/packages/pluggableWidgets/repeater-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/repeater-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.2.1] - 2022-9-20
### Changed
diff --git a/packages/pluggableWidgets/repeater-native/package.json b/packages/pluggableWidgets/repeater-native/package.json
index 868c15611..1e5c558eb 100644
--- a/packages/pluggableWidgets/repeater-native/package.json
+++ b/packages/pluggableWidgets/repeater-native/package.json
@@ -1,7 +1,7 @@
{
"name": "repeater-native",
"widgetName": "Repeater",
- "version": "2.2.1",
+ "version": "2.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts b/packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts
index b954d5aad..11fe6c1df 100644
--- a/packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts
+++ b/packages/pluggableWidgets/repeater-native/src/Repeater.editorConfig.ts
@@ -1,4 +1,5 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
+import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
import { RepeaterPreviewProps } from "../typings/RepeaterProps";
@@ -32,3 +33,12 @@ export function getPreview(values: RepeaterPreviewProps, isDarkMode: boolean): S
]
};
}
+
+export function getProperties(values: RepeaterPreviewProps, defaultProperties: Properties): Properties {
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
+ return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/repeater-native/src/Repeater.tsx b/packages/pluggableWidgets/repeater-native/src/Repeater.tsx
index 7842ec535..83ff0f726 100644
--- a/packages/pluggableWidgets/repeater-native/src/Repeater.tsx
+++ b/packages/pluggableWidgets/repeater-native/src/Repeater.tsx
@@ -16,7 +16,12 @@ export function Repeater(props: RepeaterProps<RepeaterStyle>): ReactElement {
}
return (
- <View style={styles.container}>
+ <View
+ accessible={props.accessible === "yes"}
+ accessibilityLabel={props.screenReaderCaption?.value}
+ accessibilityHint={props.screenReaderHint?.value}
+ style={styles.container}
+ >
{props.datasource.items?.map((item, index) => (
<Fragment key={`item_${index}`}>{props.content.get(item)}</Fragment>
))}
diff --git a/packages/pluggableWidgets/repeater-native/src/Repeater.xml b/packages/pluggableWidgets/repeater-native/src/Repeater.xml
index 79c786cde..265e82515 100644
--- a/packages/pluggableWidgets/repeater-native/src/Repeater.xml
+++ b/packages/pluggableWidgets/repeater-native/src/Repeater.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.repeater.Repeater" 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>Repeater</name>
<description>Iterates over a data source and render a content</description>
@@ -9,17 +9,35 @@
<propertyGroup caption="General">
<property key="datasource" type="datasource" isList="true">
<caption>Data Source</caption>
- <description/>
+ <description />
</property>
<property key="content" type="widgets" dataSource="datasource">
<caption>Content</caption>
- <description/>
+ <description />
</property>
</propertyGroup>
<propertyGroup caption="Common">
- <systemProperty key="Name"/>
+ <systemProperty key="Name" />
<systemProperty key="Visibility" />
</propertyGroup>
</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>
</properties>
</widget>
diff --git a/packages/pluggableWidgets/repeater-native/src/__tests__/Repeater.spec.tsx b/packages/pluggableWidgets/repeater-native/src/__tests__/Repeater.spec.tsx
index 5a315d196..dff0deee8 100644
--- a/packages/pluggableWidgets/repeater-native/src/__tests__/Repeater.spec.tsx
+++ b/packages/pluggableWidgets/repeater-native/src/__tests__/Repeater.spec.tsx
@@ -9,6 +9,7 @@ describe("Repeater", () => {
const component = render(
<Repeater
name="test-repeater"
+ accessible="yes"
style={[{ container: {} }]}
datasource={ListValueBuilder().withAmountOfItems(5)}
content={buildWidgetValue(<Text>Item</Text>)}
@@ -22,6 +23,7 @@ describe("Repeater", () => {
const component = render(
<Repeater
name="test-repeater"
+ accessible="yes"
style={[{ container: {} }]}
datasource={ListValueBuilder().withAmountOfItems(0)}
content={buildWidgetValue(<Text>Item</Text>)}
@@ -35,6 +37,7 @@ describe("Repeater", () => {
const component = render(
<Repeater
name="test-repeater"
+ accessible="yes"
style={[{ container: { backgroundColor: "red" } }]}
datasource={ListValueBuilder().withAmountOfItems(5)}
content={buildWidgetValue(<Text>Item</Text>)}
diff --git a/packages/pluggableWidgets/repeater-native/src/__tests__/__snapshots__/Repeater.spec.tsx.snap b/packages/pluggableWidgets/repeater-native/src/__tests__/__snapshots__/Repeater.spec.tsx.snap
index 6e3f56229..1e596efed 100644
--- a/packages/pluggableWidgets/repeater-native/src/__tests__/__snapshots__/Repeater.spec.tsx.snap
+++ b/packages/pluggableWidgets/repeater-native/src/__tests__/__snapshots__/Repeater.spec.tsx.snap
@@ -2,6 +2,7 @@
exports[`Repeater renders correctly 1`] = `
<View
+ accessible={true}
style={Object {}}
>
<Text>
@@ -24,6 +25,7 @@ exports[`Repeater renders correctly 1`] = `
exports[`Repeater renders correctly with custom styles 1`] = `
<View
+ accessible={true}
style={
Object {
"backgroundColor": "red",
diff --git a/packages/pluggableWidgets/repeater-native/src/package.xml b/packages/pluggableWidgets/repeater-native/src/package.xml
index acfc81a4a..99b9b584a 100644
--- a/packages/pluggableWidgets/repeater-native/src/package.xml
+++ b/packages/pluggableWidgets/repeater-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="Repeater" version="2.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="Repeater" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="Repeater.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts b/packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts
index be4c55d14..ffad372a0 100644
--- a/packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts
+++ b/packages/pluggableWidgets/repeater-native/typings/RepeaterProps.d.ts
@@ -4,13 +4,18 @@
* @author Mendix UI Content Team
*/
import { ComponentType, CSSProperties } from "react";
-import { ListValue, ListWidgetValue } from "mendix";
+import { DynamicValue, ListValue, ListWidgetValue } from "mendix";
+
+export type AccessibleEnum = "yes" | "no";
export interface RepeaterProps<Style> {
name: string;
style: Style[];
datasource: ListValue;
content: ListWidgetValue;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface RepeaterPreviewProps {
@@ -20,4 +25,7 @@ export interface RepeaterPreviewProps {
readOnly: boolean;
datasource: {} | { type: string } | null;
content: { widgetCount: number; renderer: ComponentType<{ caption?: string }> };
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/safe-area-view-native/CHANGELOG.md b/packages/pluggableWidgets/safe-area-view-native/CHANGELOG.md
index 654bd7a02..807d39369 100644
--- a/packages/pluggableWidgets/safe-area-view-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/safe-area-view-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.2.0] - 2022-04-07
### Added
diff --git a/packages/pluggableWidgets/safe-area-view-native/package.json b/packages/pluggableWidgets/safe-area-view-native/package.json
index 8d8143be0..24a535832 100644
--- a/packages/pluggableWidgets/safe-area-view-native/package.json
+++ b/packages/pluggableWidgets/safe-area-view-native/package.json
@@ -1,7 +1,7 @@
{
"name": "safe-area-view-native",
"widgetName": "SafeAreaView",
- "version": "2.2.0",
+ "version": "2.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.editorConfig.ts b/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.editorConfig.ts
index adc049585..e58f083a5 100644
--- a/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.editorConfig.ts
+++ b/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.editorConfig.ts
@@ -1,4 +1,5 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
+import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
import { SafeAreaViewPreviewProps } from "../typings/SafeAreaViewProps";
@@ -32,3 +33,12 @@ export function getPreview(values: SafeAreaViewPreviewProps, isDarkMode: boolean
]
};
}
+
+export function getProperties(values: SafeAreaViewPreviewProps, defaultProperties: Properties): Properties {
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
+ return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.tsx b/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.tsx
index aa3bae568..cba8f8c93 100644
--- a/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.tsx
+++ b/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.tsx
@@ -10,6 +10,9 @@ export const SafeAreaView = (props: SafeAreaViewProps<SafeAreaViewStyle>): JSX.E
return (
<ReactSaveAreaView
+ accessible={props.accessible === "yes"}
+ accessibilityLabel={props.screenReaderCaption?.value}
+ accessibilityHint={props.screenReaderHint?.value}
style={{ flex: 1, ...{ backgroundColor: styles.container.backgroundColor } }}
pointerEvents={"box-none"}
testID={props.name}
diff --git a/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.xml b/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.xml
index d2ea29b8e..be4e4b98d 100644
--- a/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.xml
+++ b/packages/pluggableWidgets/safe-area-view-native/src/SafeAreaView.xml
@@ -17,5 +17,23 @@
<systemProperty key="Visibility" />
</propertyGroup>
</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>
</properties>
</widget>
diff --git a/packages/pluggableWidgets/safe-area-view-native/src/__tests__/SafeAreaView.spec.tsx b/packages/pluggableWidgets/safe-area-view-native/src/__tests__/SafeAreaView.spec.tsx
index 29eea99c7..0e5933d12 100644
--- a/packages/pluggableWidgets/safe-area-view-native/src/__tests__/SafeAreaView.spec.tsx
+++ b/packages/pluggableWidgets/safe-area-view-native/src/__tests__/SafeAreaView.spec.tsx
@@ -11,6 +11,7 @@ describe("Safe area view", () => {
beforeEach(() => {
defaultProps = {
name: "safe-area-view-test",
+ accessible: "yes",
style: [],
content: <Text>Content</Text>
};
@@ -18,7 +19,12 @@ describe("Safe area view", () => {
it("renders with content", () => {
const component = render(
- <SafeAreaView name={defaultProps.name} style={defaultProps.style} content={defaultProps.content} />
+ <SafeAreaView
+ name={defaultProps.name}
+ accessible="yes"
+ style={defaultProps.style}
+ content={defaultProps.content}
+ />
);
expect(component.toJSON()).toMatchSnapshot();
});
diff --git a/packages/pluggableWidgets/safe-area-view-native/src/__tests__/__snapshots__/SafeAreaView.spec.tsx.snap b/packages/pluggableWidgets/safe-area-view-native/src/__tests__/__snapshots__/SafeAreaView.spec.tsx.snap
index b82abc02d..4de942eee 100644
--- a/packages/pluggableWidgets/safe-area-view-native/src/__tests__/__snapshots__/SafeAreaView.spec.tsx.snap
+++ b/packages/pluggableWidgets/safe-area-view-native/src/__tests__/__snapshots__/SafeAreaView.spec.tsx.snap
@@ -2,6 +2,7 @@
exports[`Safe area view renders with content 1`] = `
<RCTSafeAreaView
+ accessible={true}
emulateUnlessSupported={true}
pointerEvents="box-none"
style={
@@ -29,6 +30,7 @@ exports[`Safe area view renders with content 1`] = `
exports[`Safe area view renders with custom styling 1`] = `
<RCTSafeAreaView
+ accessible={true}
emulateUnlessSupported={true}
pointerEvents="box-none"
style={
@@ -57,6 +59,7 @@ exports[`Safe area view renders with custom styling 1`] = `
exports[`Safe area view renders without content 1`] = `
<RCTSafeAreaView
+ accessible={true}
emulateUnlessSupported={true}
pointerEvents="box-none"
style={
diff --git a/packages/pluggableWidgets/safe-area-view-native/src/package.xml b/packages/pluggableWidgets/safe-area-view-native/src/package.xml
index 6e02a93de..4a33a7e2b 100644
--- a/packages/pluggableWidgets/safe-area-view-native/src/package.xml
+++ b/packages/pluggableWidgets/safe-area-view-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="SafeAreaView" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="SafeAreaView" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="SafeAreaView.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/safe-area-view-native/typings/SafeAreaViewProps.d.ts b/packages/pluggableWidgets/safe-area-view-native/typings/SafeAreaViewProps.d.ts
index fc9c8cf77..2b846f67d 100644
--- a/packages/pluggableWidgets/safe-area-view-native/typings/SafeAreaViewProps.d.ts
+++ b/packages/pluggableWidgets/safe-area-view-native/typings/SafeAreaViewProps.d.ts
@@ -4,11 +4,17 @@
* @author Mendix UI Content Team
*/
import { ComponentType, CSSProperties, ReactNode } from "react";
+import { DynamicValue } from "mendix";
+
+export type AccessibleEnum = "yes" | "no";
export interface SafeAreaViewProps<Style> {
name: string;
style: Style[];
content?: ReactNode;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface SafeAreaViewPreviewProps {
@@ -17,4 +23,7 @@ export interface SafeAreaViewPreviewProps {
styleObject?: CSSProperties;
readOnly: boolean;
content: { widgetCount: number; renderer: ComponentType<{ caption?: string }> };
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}
diff --git a/packages/pluggableWidgets/slider-native/CHANGELOG.md b/packages/pluggableWidgets/slider-native/CHANGELOG.md
index 0ef34e054..5f25faef4 100644
--- a/packages/pluggableWidgets/slider-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/slider-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.2.0] - 2022-02-21
### Added
diff --git a/packages/pluggableWidgets/slider-native/package.json b/packages/pluggableWidgets/slider-native/package.json
index 4a33f5b0d..a9c6473e5 100644
--- a/packages/pluggableWidgets/slider-native/package.json
+++ b/packages/pluggableWidgets/slider-native/package.json
@@ -1,7 +1,7 @@
{
"name": "slider-native",
"widgetName": "Slider",
- "version": "2.2.0",
+ "version": "2.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/slider-native/src/Slider.editorConfig.ts b/packages/pluggableWidgets/slider-native/src/Slider.editorConfig.ts
index cb833c506..879b9ab4f 100644
--- a/packages/pluggableWidgets/slider-native/src/Slider.editorConfig.ts
+++ b/packages/pluggableWidgets/slider-native/src/Slider.editorConfig.ts
@@ -1,4 +1,5 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
+import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
import { SliderPreviewProps } from "../typings/SliderProps";
import sliderSvgLight from "./assets/Slider.light.svg";
@@ -11,3 +12,12 @@ export function getPreview(_: SliderPreviewProps, isDarkMode: boolean): Structur
width: 246
};
}
+
+export function getProperties(values: SliderPreviewProps, defaultProperties: Properties): Properties {
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
+ return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/slider-native/src/Slider.tsx b/packages/pluggableWidgets/slider-native/src/Slider.tsx
index d483faba1..6d8bd99b6 100644
--- a/packages/pluggableWidgets/slider-native/src/Slider.tsx
+++ b/packages/pluggableWidgets/slider-native/src/Slider.tsx
@@ -3,7 +3,7 @@ import { executeAction } from "@mendix/piw-utils-internal";
import { ValueStatus, Option } from "mendix";
import MultiSlider, { MarkerProps } from "@ptomasroos/react-native-multi-slider";
import { createElement, ReactElement, useCallback, useRef, useState } from "react";
-import { LayoutChangeEvent, Text, View } from "react-native";
+import { AccessibilityActionEvent, LayoutChangeEvent, Text, View } from "react-native";
import { Big } from "big.js";
import { SliderProps } from "../typings/SliderProps";
@@ -67,7 +67,31 @@ export function Slider(props: Props): ReactElement {
);
return (
- <View onLayout={onLayout} style={styles.container} testID={props.name}>
+ <View
+ testID={props.name}
+ accessible={props.accessible === "yes"}
+ accessibilityLabel={props.screenReaderCaption?.value}
+ accessibilityHint={props.screenReaderHint?.value}
+ accessibilityRole="adjustable"
+ accessibilityValue={{ min: toNumber(props.minimumValue), max: toNumber(props.maximumValue), now: value }}
+ accessibilityState={{ disabled: !editable }}
+ accessibilityActions={[{ name: "increment" }, { name: "decrement" }]}
+ onAccessibilityAction={(event: AccessibilityActionEvent) => {
+ const minValue = toNumber(props.minimumValue);
+ const maxValue = toNumber(props.maximumValue);
+ if (!value || minValue === undefined || maxValue === undefined) {
+ return;
+ }
+ const swipeValue = event.nativeEvent.actionName === "increment" ? 1 : -1;
+ const newValue = value + swipeValue * (toNumber(props.stepSize) || 1);
+ if (newValue >= minValue && newValue <= maxValue) {
+ onSlide([newValue]);
+ onChange([newValue]);
+ }
+ }}
+ onLayout={onLayout}
+ style={styles.container}
+ >
<MultiSlider
values={value != null ? [value] : undefined}
min={validProps ? toNumber(props.minimumValue) : undefined}
diff --git a/packages/pluggableWidgets/slider-native/src/Slider.xml b/packages/pluggableWidgets/slider-native/src/Slider.xml
index 4ffb95b67..abe675f90 100644
--- a/packages/pluggableWidgets/slider-native/src/Slider.xml
+++ b/packages/pluggableWidgets/slider-native/src/Slider.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.slider.Slider" 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>Slider</name>
<description>Change a numeric value using a slider.</description>
@@ -9,18 +9,18 @@
<propertyGroup caption="Data source">
<property key="valueAttribute" type="attribute">
<caption>Value attribute</caption>
- <description/>
+ <description />
<attributeTypes>
- <attributeType name="Integer"/>
- <attributeType name="Long"/>
- <attributeType name="Decimal"/>
+ <attributeType name="Integer" />
+ <attributeType name="Long" />
+ <attributeType name="Decimal" />
</attributeTypes>
</property>
</propertyGroup>
<propertyGroup caption="Editability">
<property key="editable" type="enumeration" defaultValue="default">
<caption>Editable</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="default">Default</enumerationValue>
<enumerationValue key="never">Never</enumerationValue>
@@ -31,17 +31,35 @@
<property key="minimumValue" type="expression" defaultValue="0">
<caption>Minimum value</caption>
<description>The minimum value that can be selected.</description>
- <returnType type="Decimal"/>
+ <returnType type="Decimal" />
</property>
<property key="maximumValue" type="expression" defaultValue="100">
<caption>Maximum value</caption>
<description>The maximum value that can be selected.</description>
- <returnType type="Decimal"/>
+ <returnType type="Decimal" />
</property>
<property key="stepSize" type="expression" defaultValue="1">
<caption>Step size</caption>
<description>The interval between two selectable points.</description>
- <returnType type="Decimal"/>
+ <returnType type="Decimal" />
+ </property>
+ </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>
</propertyGroup>
</propertyGroup>
diff --git a/packages/pluggableWidgets/slider-native/src/__tests__/Slider.spec.tsx b/packages/pluggableWidgets/slider-native/src/__tests__/Slider.spec.tsx
index 1d1dd0b11..b915c10e1 100644
--- a/packages/pluggableWidgets/slider-native/src/__tests__/Slider.spec.tsx
+++ b/packages/pluggableWidgets/slider-native/src/__tests__/Slider.spec.tsx
@@ -15,6 +15,7 @@ describe("Slider", () => {
beforeEach(() => {
defaultProps = {
name: "slider-test",
+ accessible: "yes",
style: [],
valueAttribute: new EditableValueBuilder<Big>().withValue(new Big(140)).build(),
editable: "default",
diff --git a/packages/pluggableWidgets/slider-native/src/__tests__/__snapshots__/Slider.spec.tsx.snap b/packages/pluggableWidgets/slider-native/src/__tests__/__snapshots__/Slider.spec.tsx.snap
index 67bc7c694..a3ed90878 100644
--- a/packages/pluggableWidgets/slider-native/src/__tests__/__snapshots__/Slider.spec.tsx.snap
+++ b/packages/pluggableWidgets/slider-native/src/__tests__/__snapshots__/Slider.spec.tsx.snap
@@ -2,6 +2,31 @@
exports[`Slider renders 1`] = `
<View
+ accessibilityActions={
+ Array [
+ Object {
+ "name": "increment",
+ },
+ Object {
+ "name": "decrement",
+ },
+ ]
+ }
+ accessibilityRole="adjustable"
+ accessibilityState={
+ Object {
+ "disabled": false,
+ }
+ }
+ accessibilityValue={
+ Object {
+ "max": 280,
+ "min": 0,
+ "now": 140,
+ }
+ }
+ accessible={true}
+ onAccessibilityAction={[Function]}
onLayout={[Function]}
style={Object {}}
testID="slider-test"
diff --git a/packages/pluggableWidgets/slider-native/src/package.xml b/packages/pluggableWidgets/slider-native/src/package.xml
index 503cdfa51..3a0263996 100644
--- a/packages/pluggableWidgets/slider-native/src/package.xml
+++ b/packages/pluggableWidgets/slider-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="Slider" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="Slider" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="Slider.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/slider-native/typings/SliderProps.d.ts b/packages/pluggableWidgets/slider-native/typings/SliderProps.d.ts
index 1f98567ec..9c6b8615a 100644
--- a/packages/pluggableWidgets/slider-native/typings/SliderProps.d.ts
+++ b/packages/pluggableWidgets/slider-native/typings/SliderProps.d.ts
@@ -9,6 +9,8 @@ import { Big } from "big.js";
export type EditableEnum = "default" | "never";
+export type AccessibleEnum = "yes" | "no";
+
export interface SliderProps<Style> {
name: string;
style: Style[];
@@ -17,6 +19,9 @@ export interface SliderProps<Style> {
minimumValue: DynamicValue<Big>;
maximumValue: DynamicValue<Big>;
stepSize: DynamicValue<Big>;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
onChange?: ActionValue;
}
@@ -30,5 +35,8 @@ export interface SliderPreviewProps {
minimumValue: string;
maximumValue: string;
stepSize: string;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
onChange: {} | null;
}
diff --git a/packages/pluggableWidgets/switch-native/CHANGELOG.md b/packages/pluggableWidgets/switch-native/CHANGELOG.md
index d07908655..1ce0c42c6 100644
--- a/packages/pluggableWidgets/switch-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/switch-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [1.0.0] - 2022-01-24
### Added
diff --git a/packages/pluggableWidgets/switch-native/package.json b/packages/pluggableWidgets/switch-native/package.json
index 63d734cfa..0cb19b964 100644
--- a/packages/pluggableWidgets/switch-native/package.json
+++ b/packages/pluggableWidgets/switch-native/package.json
@@ -1,7 +1,7 @@
{
"name": "switch-native",
"widgetName": "Switch",
- "version": "1.0.0",
+ "version": "1.1.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/switch-native/src/Switch.editorConfig.ts b/packages/pluggableWidgets/switch-native/src/Switch.editorConfig.ts
index 0b6c14bc2..31cacf390 100644
--- a/packages/pluggableWidgets/switch-native/src/Switch.editorConfig.ts
+++ b/packages/pluggableWidgets/switch-native/src/Switch.editorConfig.ts
@@ -1,5 +1,5 @@
import { StructurePreviewProps } from "@mendix/piw-utils-internal";
-import { hidePropertiesIn, Properties } from "@mendix/pluggable-widgets-tools";
+import { hidePropertiesIn, hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
import { SwitchPreviewProps } from "../typings/SwitchProps";
import StructurePreviewSwitchSVG from "./assets/checked.svg";
@@ -50,6 +50,10 @@ export function getProperties(values: SwitchPreviewProps, defaultProperties: Pro
if (!values.showLabel) {
hidePropertiesIn(defaultProperties, values, ["label", "labelOrientation"]);
}
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
return defaultProperties;
}
diff --git a/packages/pluggableWidgets/switch-native/src/Switch.tsx b/packages/pluggableWidgets/switch-native/src/Switch.tsx
index 9009521cf..b419b25fe 100644
--- a/packages/pluggableWidgets/switch-native/src/Switch.tsx
+++ b/packages/pluggableWidgets/switch-native/src/Switch.tsx
@@ -10,7 +10,17 @@ import { SwitchStyle, defaultSwitchStyle, CheckBoxInputType } from "./ui/Styles"
export type Props = SwitchProps<SwitchStyle>;
export function Switch(props: Props): ReactElement {
- const { label, labelOrientation, showLabel, name, onChange, booleanAttribute } = props;
+ const {
+ label,
+ labelOrientation,
+ showLabel,
+ name,
+ onChange,
+ booleanAttribute,
+ accessible,
+ screenReaderCaption,
+ screenReaderHint
+ } = props;
const combinedStyles = flattenStyles(defaultSwitchStyle, props.style);
const styles = processStyles(combinedStyles);
const horizontalOrientation = showLabel && labelOrientation === "horizontal";
@@ -51,6 +61,11 @@ export function Switch(props: Props): ReactElement {
) : null}
<View style={[horizontalOrientation ? { flex: 1, alignItems: "flex-end" } : { alignItems: "flex-start" }]}>
<SwitchComponent
+ accessible={accessible === "yes"}
+ accessibilityLabel={screenReaderCaption?.value}
+ accessibilityHint={screenReaderHint?.value}
+ accessibilityRole="switch"
+ accessibilityState={{ disabled: !editable, checked: booleanAttribute.value }}
disabled={!editable}
testID={name}
style={inputStyle}
diff --git a/packages/pluggableWidgets/switch-native/src/Switch.xml b/packages/pluggableWidgets/switch-native/src/Switch.xml
index 1bffec638..6ba7471d6 100644
--- a/packages/pluggableWidgets/switch-native/src/Switch.xml
+++ b/packages/pluggableWidgets/switch-native/src/Switch.xml
@@ -1,40 +1,56 @@
-<?xml version="1.0" encoding="utf-8"?>
-<widget id="com.mendix.widget.native.switch.Switch" 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.switch.Switch" 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>Switch</name>
<description>Toggle a boolean attribute.</description>
<studioProCategory>Display</studioProCategory>
<studioCategory>Display</studioCategory>
<properties>
<propertyGroup caption="General">
+ <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>
+ </propertyGroup>
<propertyGroup caption="Data source">
<property key="booleanAttribute" type="attribute">
<caption>Attribute</caption>
- <description/>
+ <description />
<attributeTypes>
- <attributeType name="Boolean"/>
+ <attributeType name="Boolean" />
</attributeTypes>
</property>
</propertyGroup>
<propertyGroup caption="Events">
<property key="onChange" type="action" required="false">
<caption>On change</caption>
- <description/>
+ <description />
</property>
</propertyGroup>
<propertyGroup caption="Label">
<property key="showLabel" type="boolean" defaultValue="false">
<caption>Show label</caption>
- <description/>
+ <description />
</property>
<property key="label" type="textTemplate" required="false">
<caption>Label</caption>
- <description/>
+ <description />
</property>
<property key="labelOrientation" type="enumeration" defaultValue="horizontal">
<caption>Label orientation</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="horizontal">Horizontal</enumerationValue>
<enumerationValue key="vertical">Vertical</enumerationValue>
@@ -42,13 +58,13 @@
</property>
</propertyGroup>
<propertyGroup caption="Editability">
- <systemProperty key="Editability"/>
+ <systemProperty key="Editability" />
</propertyGroup>
<propertyGroup caption="Visibility">
- <systemProperty key="Visibility"/>
+ <systemProperty key="Visibility" />
</propertyGroup>
<propertyGroup caption="Common">
- <systemProperty key="Name"/>
+ <systemProperty key="Name" />
</propertyGroup>
</propertyGroup>
</properties>
diff --git a/packages/pluggableWidgets/switch-native/src/__tests__/Switch.spec.tsx b/packages/pluggableWidgets/switch-native/src/__tests__/Switch.spec.tsx
index 4c38f64ec..069c175fb 100644
--- a/packages/pluggableWidgets/switch-native/src/__tests__/Switch.spec.tsx
+++ b/packages/pluggableWidgets/switch-native/src/__tests__/Switch.spec.tsx
@@ -15,6 +15,7 @@ const createProps = (props?: Partial<Props>): Props => {
const style = props?.style ?? {};
const defaultProps: Props = {
name,
+ accessible: "yes",
label: dynamicValue<string>("Label", false),
labelOrientation: "horizontal",
showLabel: false,
diff --git a/packages/pluggableWidgets/switch-native/src/package.xml b/packages/pluggableWidgets/switch-native/src/package.xml
index 85770d6af..b7e7c6f86 100644
--- a/packages/pluggableWidgets/switch-native/src/package.xml
+++ b/packages/pluggableWidgets/switch-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="Switch" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="Switch" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="Switch.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/switch-native/typings/SwitchProps.d.ts b/packages/pluggableWidgets/switch-native/typings/SwitchProps.d.ts
index 3dfa7eafc..58b0a14d4 100644
--- a/packages/pluggableWidgets/switch-native/typings/SwitchProps.d.ts
+++ b/packages/pluggableWidgets/switch-native/typings/SwitchProps.d.ts
@@ -6,11 +6,16 @@
import { CSSProperties } from "react";
import { ActionValue, DynamicValue, EditableValue } from "mendix";
+export type AccessibleEnum = "yes" | "no";
+
export type LabelOrientationEnum = "horizontal" | "vertical";
export interface SwitchProps<Style> {
name: string;
style: Style[];
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
booleanAttribute: EditableValue<boolean>;
onChange?: ActionValue;
showLabel: boolean;
@@ -23,6 +28,9 @@ export interface SwitchPreviewProps {
style: string;
styleObject?: CSSProperties;
readOnly: boolean;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
booleanAttribute: string;
onChange: {} | null;
showLabel: boolean;
diff --git a/packages/pluggableWidgets/toggle-buttons-native/CHANGELOG.md b/packages/pluggableWidgets/toggle-buttons-native/CHANGELOG.md
index 6642d28e0..18188ee57 100644
--- a/packages/pluggableWidgets/toggle-buttons-native/CHANGELOG.md
+++ b/packages/pluggableWidgets/toggle-buttons-native/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Added accessibility.
+
## [2.2.0] - 2022-04-07
### Added
diff --git a/packages/pluggableWidgets/toggle-buttons-native/package.json b/packages/pluggableWidgets/toggle-buttons-native/package.json
index 2a8acb2d0..271cf2077 100644
--- a/packages/pluggableWidgets/toggle-buttons-native/package.json
+++ b/packages/pluggableWidgets/toggle-buttons-native/package.json
@@ -1,7 +1,7 @@
{
"name": "toggle-buttons-native",
"widgetName": "ToggleButtons",
- "version": "2.2.0",
+ "version": "2.3.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
diff --git a/packages/pluggableWidgets/toggle-buttons-native/src/ToggleButtons.editorConfig.ts b/packages/pluggableWidgets/toggle-buttons-native/src/ToggleButtons.editorConfig.ts
index b77cb7efc..40410a9bd 100644
--- a/packages/pluggableWidgets/toggle-buttons-native/src/ToggleButtons.editorConfig.ts
+++ b/packages/pluggableWidgets/toggle-buttons-native/src/ToggleButtons.editorConfig.ts
@@ -1,4 +1,5 @@
import { RowLayoutProps, StructurePreviewProps } from "@mendix/piw-utils-internal";
+import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
import { ToggleButtonsPreviewProps } from "../typings/ToggleButtonsProps";
@@ -43,3 +44,12 @@ export function getPreview(_: ToggleButtonsPreviewProps, isDarkMode: boolean): S
children: [renderButton("Button 1", true), renderButton("Button 2"), renderButton("Button 3")]
};
}
+
+export function getProperties(values: ToggleButtonsPreviewProps, defaultProperties: Properties): Properties {
+ if (values.accessible === "no") {
+ hidePropertyIn(defaultProperties, values, "screenReaderCaption");
+ hidePropertyIn(defaultProperties, values, "screenReaderHint");
+ }
+
+ return defaultProperties;
+}
diff --git a/packages/pluggableWidgets/toggle-buttons-native/src/ToggleButtons.tsx b/packages/pluggableWidgets/toggle-buttons-native/src/ToggleButtons.tsx
index be4b80c6d..c218e60d1 100644
--- a/packages/pluggableWidgets/toggle-buttons-native/src/ToggleButtons.tsx
+++ b/packages/pluggableWidgets/toggle-buttons-native/src/ToggleButtons.tsx
@@ -22,10 +22,15 @@ export class ToggleButtons extends Component<Props> {
const selectedIndex = this.universe.indexOf(this.props.enum.value!);
const captions = this.universe.map(name => this.props.enum.formatter.format(name));
const enabled = this.props.editable !== "never" && !this.props.enum.readOnly;
-
+ const accessibilityLabels = captions.map(
+ (caption, index) =>
+ `${caption} "button" ${!enabled ? "disabled" : ""} ${selectedIndex === index ? "active tab" : ""}`
+ );
return (
<View style={enabled ? this.styles.container : this.styles.containerDisabled} testID={this.props.name}>
<SegmentedControlTab
+ accessible={this.props.accessible === "yes"}
+ accessibilityLabels={accessibilityLabels}
values={captions}
selectedIndex={selectedIndex}
enabled={enabled}
diff --git a/packages/pluggableWidgets/toggle-buttons-native/src/ToggleButtons.xml b/packages/pluggableWidgets/toggle-buttons-native/src/ToggleButtons.xml
index 547a3b14a..8a1501fee 100644
--- a/packages/pluggableWidgets/toggle-buttons-native/src/ToggleButtons.xml
+++ b/packages/pluggableWidgets/toggle-buttons-native/src/ToggleButtons.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.togglebuttons.ToggleButtons" 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>Toggle buttons</name>
<description>Change an enumeration value using a group of buttons.</description>
@@ -9,16 +9,16 @@
<propertyGroup caption="Data source">
<property key="enum" type="attribute">
<caption>Value</caption>
- <description/>
+ <description />
<attributeTypes>
- <attributeType name="Enum"/>
+ <attributeType name="Enum" />
</attributeTypes>
</property>
</propertyGroup>
<propertyGroup caption="Editability">
<property key="editable" type="enumeration" defaultValue="default">
<caption>Editable</caption>
- <description/>
+ <description />
<enumerationValues>
<enumerationValue key="default">Default</enumerationValue>
<enumerationValue key="never">Never</enumerationValue>
@@ -28,11 +28,29 @@
<propertyGroup caption="Events">
<property key="onChange" type="action" required="false">
<caption>On change</caption>
- <description/>
+ <description />
</property>
</propertyGroup>
<propertyGroup caption="Common">
- <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>
</propertyGroup>
</propertyGroup>
</properties>
diff --git a/packages/pluggableWidgets/toggle-buttons-native/src/__tests__/ToggleButtons.spec.tsx b/packages/pluggableWidgets/toggle-buttons-native/src/__tests__/ToggleButtons.spec.tsx
index 5b3accacc..931252f5f 100644
--- a/packages/pluggableWidgets/toggle-buttons-native/src/__tests__/ToggleButtons.spec.tsx
+++ b/packages/pluggableWidgets/toggle-buttons-native/src/__tests__/ToggleButtons.spec.tsx
@@ -11,6 +11,7 @@ describe("ToggleButtons", () => {
beforeEach(() => {
defaultProps = {
name: "toggle-buttons-test",
+ accessible: "yes",
style: [],
enum: new EditableValueBuilder<string>().withUniverse("a", "b").withValue("a").build(),
editable: "default"
diff --git a/packages/pluggableWidgets/toggle-buttons-native/src/__tests__/__snapshots__/ToggleButtons.spec.tsx.snap b/packages/pluggableWidgets/toggle-buttons-native/src/__tests__/__snapshots__/ToggleButtons.spec.tsx.snap
index c4af02173..e179e19bd 100644
--- a/packages/pluggableWidgets/toggle-buttons-native/src/__tests__/__snapshots__/ToggleButtons.spec.tsx.snap
+++ b/packages/pluggableWidgets/toggle-buttons-native/src/__tests__/__snapshots__/ToggleButtons.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`ToggleButtons renders 1`] = `
}
>
<View
- accessibilityLabel="Formatted a"
+ accessibilityLabel="Formatted a \\"button\\" active tab"
accessible={true}
focusable={true}
onClick={[Function]}
@@ -84,7 +84,7 @@ exports[`ToggleButtons renders 1`] = `
</View>
</View>
<View
- accessibilityLabel="Formatted b"
+ accessibilityLabel="Formatted b \\"button\\" "
accessible={true}
focusable={true}
onClick={[Function]}
diff --git a/packages/pluggableWidgets/toggle-buttons-native/src/package.xml b/packages/pluggableWidgets/toggle-buttons-native/src/package.xml
index d2ff0f343..70ee1f2a3 100644
--- a/packages/pluggableWidgets/toggle-buttons-native/src/package.xml
+++ b/packages/pluggableWidgets/toggle-buttons-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="ToggleButtons" version="2.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+ <clientModule name="ToggleButtons" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
<widgetFiles>
<widgetFile path="ToggleButtons.xml" />
</widgetFiles>
diff --git a/packages/pluggableWidgets/toggle-buttons-native/typings/ToggleButtonsProps.d.ts b/packages/pluggableWidgets/toggle-buttons-native/typings/ToggleButtonsProps.d.ts
index 721e93805..f0daac5bf 100644
--- a/packages/pluggableWidgets/toggle-buttons-native/typings/ToggleButtonsProps.d.ts
+++ b/packages/pluggableWidgets/toggle-buttons-native/typings/ToggleButtonsProps.d.ts
@@ -4,16 +4,21 @@
* @author Mendix UI Content Team
*/
import { CSSProperties } from "react";
-import { ActionValue, EditableValue } from "mendix";
+import { ActionValue, DynamicValue, EditableValue } from "mendix";
export type EditableEnum = "default" | "never";
+export type AccessibleEnum = "yes" | "no";
+
export interface ToggleButtonsProps<Style> {
name: string;
style: Style[];
enum: EditableValue<string>;
editable: EditableEnum;
onChange?: ActionValue;
+ accessible: AccessibleEnum;
+ screenReaderCaption?: DynamicValue<string>;
+ screenReaderHint?: DynamicValue<string>;
}
export interface ToggleButtonsPreviewProps {
@@ -24,4 +29,7 @@ export interface ToggleButtonsPreviewProps {
enum: string;
editable: EditableEnum;
onChange: {} | null;
+ accessible: AccessibleEnum;
+ screenReaderCaption: string;
+ screenReaderHint: string;
}