[MOO-1836]: fix feedback widget logo issues and make WCAG compliant

packages/pluggableWidgets/feedback-native/CHANGELOG.md

@@ -10,6 +10,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   Replaced the deprecated InteractionManager in Feedback widget.
 
+### Added
+
+-   Translation support for all widget text through configurable properties in Studio Pro.
+-   Visible label above feedback input field to ensure WCAG compliance.
+
+### Fixed
+
+-   Fixed logo overlap issue where custom logo appeared on top of default icon instead of replacing it.
+
 ## [3.4.0] - 2025-3-31
 
 ### Changed

packages/pluggableWidgets/feedback-native/src/Feedback.tsx

@@ -62,11 +62,11 @@
         supportedOrientations: ["portrait", "landscape"]
     };
 
     componentDidMount() {
         Dimensions.addEventListener("change", this.updateDeviceHeight);
     }
 
     componentDidUpdate(_: Readonly<FeedbackProps<FeedbackStyle>>, prevState: Readonly<State>) {
         if (
             ["todo", "inprogress"].includes(prevState.status) &&
             this.state.status === "closingDialog" &&
@@ -97,11 +97,17 @@
         return this.state.status === "initial" ? (
             <View style={floatingButtonContainer(this.state.deviceHeight)}>
                 <View style={this.styles.floatingButton}>
-                    <TouchableOpacity onPress={this.onFeedbackButtonPressHandler} testID={`${this.props.name}$button`}>
+                    <TouchableOpacity
+                        onPress={this.onFeedbackButtonPressHandler}
+                        testID={`${this.props.name}$button`}
+                        accessibilityRole="button"
+                        accessibilityLabel={this.props.accessibilityLabelFeedbackButton?.value ?? "Open feedback form"}
+                    >
                         {this.props.logo && this.props.logo.value ? (
                             <Image style={imageStyle as StyleProp<SvgImageStyle>} source={this.props.logo.value} />
-                        ) : null}
-                        <RNImage style={imageStyle} source={commentIcon} />
+                        ) : (
+                            <RNImage style={imageStyle} source={commentIcon} />
+                        )}
                     </TouchableOpacity>
                 </View>
             </View>
@@ -123,37 +129,46 @@
                 }}
                 {...this.dialogContainerProps}
             >
-                <Dialog.Title style={this.styles.title}>Send Feedback</Dialog.Title>
+                <Dialog.Title style={this.styles.title}>
+                    {this.props.titleSendFeedback?.value ?? "Send Feedback"}
+                </Dialog.Title>
+                <Text style={{ marginTop: 12, marginBottom: 8, fontSize: 14 }}>
+                    {this.props.labelFeedbackInput?.value ?? "Type your feedback here"}
+                </Text>
                 <TextInput
                     testID={`${this.props.name}$input`}
                     multiline
                     style={this.processedStyles.textAreaInputStyles}
                     value={this.state.feedbackMessage}
                     onChangeText={this.onChangeTextHandler}
-                    placeholder="Type your feedback here"
+                    accessibilityLabel={this.props.labelFeedbackInput?.value ?? "Type your feedback here"}
                     {...this.processedStyles.textAreaInputProps}
                 />
                 {this.props.allowScreenshot && (
                     <View style={switchContainer}>
-                        <Text style={this.styles.switchLabel}>Include Screenshot</Text>
+                        <Text style={this.styles.switchLabel}>
+                            {this.props.labelIncludeScreenshot?.value ?? "Include Screenshot"}
+                        </Text>
                         <Switch
                             testID={`${this.props.name}$switch`}
                             style={this.processedStyles.switchInputStyles}
                             value={this.state.sendScreenshot}
                             onValueChange={this.onScreenshotToggleChangeHandler}
                             trackColor={trackColor}
                             thumbColor={thumbColor}
+                            accessibilityLabel={this.props.labelIncludeScreenshot?.value ?? "Include Screenshot"}
+                            accessibilityRole="switch"
                         />
                     </View>
                 )}
                 <Dialog.Button
-                    label="Cancel"
+                    label={this.props.buttonCancel?.value ?? "Cancel"}
                     color={this.styles.button.color}
                     onPress={this.onCancelHandler}
                     testID={`${this.props.name}$cancel`}
                 />
                 <Dialog.Button
-                    label="Send"
+                    label={this.props.buttonSend?.value ?? "Send"}
                     disabled={disabled}
                     color={sendButtonColor}
                     onPress={this.onSendHandler}
@@ -166,7 +181,7 @@
     private renderInProgressDialog(): JSX.Element {
         return (
             <Dialog.Container visible={this.state.status === "inprogress"} {...this.dialogContainerProps}>
-                <Dialog.Title style={this.styles.title}>Sending...</Dialog.Title>
+                <Dialog.Title style={this.styles.title}>{this.props.titleSending?.value ?? "Sending..."}</Dialog.Title>
                 <ActivityIndicator
                     color={this.styles.activityIndicator.color}
                     size="large"
@@ -179,12 +194,12 @@
     private renderDoneDialog(): JSX.Element {
         return (
             <Dialog.Container visible={this.state.status === "done"} {...this.dialogContainerProps}>
-                <Dialog.Title style={this.styles.title}>Result</Dialog.Title>
+                <Dialog.Title style={this.styles.title}>{this.props.titleResult?.value ?? "Result"}</Dialog.Title>
                 <Dialog.Description style={this.processedStyles.descriptionStyle} testID={`${this.props.name}$success`}>
-                    Feedback successfully sent
+                    {this.props.messageSuccess?.value ?? "Feedback successfully sent"}
                 </Dialog.Description>
                 <Dialog.Button
-                    label="OK"
+                    label={this.props.buttonOk?.value ?? "OK"}
                     onPress={this.onCancelHandler}
                     color={this.styles.button.color}
                     testID={`${this.props.name}$success$ok`}
@@ -196,12 +211,12 @@
     private renderErrorDialog(): JSX.Element {
         return (
             <Dialog.Container visible={this.state.status === "error"} {...this.dialogContainerProps}>
-                <Dialog.Title style={this.styles.title}>Result</Dialog.Title>
+                <Dialog.Title style={this.styles.title}>{this.props.titleResult?.value ?? "Result"}</Dialog.Title>
                 <Dialog.Description style={this.processedStyles.descriptionStyle} testID={`${this.props.name}$error`}>
-                    Error sending feedback
+                    {this.props.messageError?.value ?? "Error sending feedback"}
                 </Dialog.Description>
                 <Dialog.Button
-                    label="OK"
+                    label={this.props.buttonOk?.value ?? "OK"}
                     onPress={this.onCancelHandler}
                     color={this.styles.button.color}
                     testID={`${this.props.name}$error$ok`}
@@ -263,7 +278,7 @@
         }
     }
 
     private updateDeviceHeight = ({ screen: { height } }: { screen: { height: number } }) => {
         this.setState({
             deviceHeight: height
         });

packages/pluggableWidgets/feedback-native/src/Feedback.xml

@@ -1,24 +1,110 @@
-<?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>
     <studioProCategory>Add-ons</studioProCategory>
     <studioCategory>Add-ons</studioCategory>
     <properties>
-        <property key="sprintrapp" type="string">
-            <caption>App ID</caption>
-            <category>General</category>
-            <description>The App ID is a hash that uniquely identifies your app project. You can find this ID in Settings > General in the Developer Portal.</description>
-        </property>
-        <property key="allowScreenshot" type="boolean" defaultValue="true">
-            <caption>Allow screenshots</caption>
-            <category>General</category>
-            <description>If you are not allowed to send screenshots when submitting feedback for legal reasons, set this to ‘No’.</description>
-        </property>
-        <property key="logo" type="image" required="false">
-            <caption>Logo</caption>
-            <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>
+        <propertyGroup caption="General">
+            <property key="sprintrapp" type="string">
+                <caption>App ID</caption>
+                <description>The App ID is a hash that uniquely identifies your app project. You can find this ID in Settings > General in the Developer Portal.</description>
+            </property>
+            <property key="allowScreenshot" type="boolean" defaultValue="true">
+                <caption>Allow screenshots</caption>
+                <description>If you are not allowed to send screenshots when submitting feedback for legal reasons, set this to ‘No’.</description>
+            </property>
+            <property key="logo" type="image" required="false">
+                <caption>Logo</caption>
+                <description>For customized branding, add a logo to the widget. The recommended size of the image is 90 by 90 pixels.</description>
+            </property>
+        </propertyGroup>
+        <propertyGroup caption="Localization">
+            <propertyGroup caption="Dialog Titles">
+                <property key="titleSendFeedback" type="textTemplate" required="false">
+                    <caption>Send feedback title</caption>
+                    <description>Title shown when composing feedback</description>
+                    <translations>
+                        <translation lang="en_US">Send Feedback</translation>
+                    </translations>
+                </property>
+                <property key="titleSending" type="textTemplate" required="false">
+                    <caption>Sending title</caption>
+                    <description>Title shown while sending feedback</description>
+                    <translations>
+                        <translation lang="en_US">Sending...</translation>
+                    </translations>
+                </property>
+                <property key="titleResult" type="textTemplate" required="false">
+                    <caption>Result title</caption>
+                    <description>Title shown in result dialogs (success/error)</description>
+                    <translations>
+                        <translation lang="en_US">Result</translation>
+                    </translations>
+                </property>
+            </propertyGroup>
+            <propertyGroup caption="Input Labels">
+                <property key="labelFeedbackInput" type="textTemplate" required="false">
+                    <caption>Feedback input label</caption>
+                    <description>Visible label shown above the feedback text field</description>
+                    <translations>
+                        <translation lang="en_US">Type your feedback here</translation>
+                    </translations>
+                </property>
+                <property key="labelIncludeScreenshot" type="textTemplate" required="false">
+                    <caption>Screenshot label</caption>
+                    <description>Label for screenshot toggle switch</description>
+                    <translations>
+                        <translation lang="en_US">Include Screenshot</translation>
+                    </translations>
+                </property>
+            </propertyGroup>
+            <propertyGroup caption="Buttons">
+                <property key="buttonCancel" type="textTemplate" required="false">
+                    <caption>Cancel button</caption>
+                    <description>Label for cancel button</description>
+                    <translations>
+                        <translation lang="en_US">Cancel</translation>
+                    </translations>
+                </property>
+                <property key="buttonSend" type="textTemplate" required="false">
+                    <caption>Send button</caption>
+                    <description>Label for send button</description>
+                    <translations>
+                        <translation lang="en_US">Send</translation>
+                    </translations>
+                </property>
+                <property key="buttonOk" type="textTemplate" required="false">
+                    <caption>OK button</caption>
+                    <description>Label for OK button in result dialogs</description>
+                    <translations>
+                        <translation lang="en_US">OK</translation>
+                    </translations>
+                </property>
+                <property key="accessibilityLabelFeedbackButton" type="textTemplate" required="false">
+                    <caption>Feedback button accessibility label</caption>
+                    <description>Label announced by screen readers for the feedback button (not visible on screen)</description>
+                    <translations>
+                        <translation lang="en_US">Open feedback form</translation>
+                    </translations>
+                </property>
+            </propertyGroup>
+            <propertyGroup caption="Messages">
+                <property key="messageSuccess" type="textTemplate" required="false">
+                    <caption>Success message</caption>
+                    <description>Message shown when feedback is sent successfully</description>
+                    <translations>
+                        <translation lang="en_US">Feedback successfully sent</translation>
+                    </translations>
+                </property>
+                <property key="messageError" type="textTemplate" required="false">
+                    <caption>Error message</caption>
+                    <description>Message shown when feedback fails to send</description>
+                    <translations>
+                        <translation lang="en_US">Error sending feedback</translation>
+                    </translations>
+                </property>
+            </propertyGroup>
+        </propertyGroup>
     </properties>
 </widget>