[MOO-1836]: fix feedback widget logo issues and make WCAG compliant#490
[MOO-1836]: fix feedback widget logo issues and make WCAG compliant#490
Conversation
| titleSending?: DynamicValue<string>; | ||
| titleResult?: DynamicValue<string>; | ||
| labelFeedbackInput?: DynamicValue<string>; | ||
| placeholderFeedback?: DynamicValue<string>; |
There was a problem hiding this comment.
As we discussed , these props are added to the component to support the language translation . I think we are making component heavy by introducing these props for only the language purpose . Can we avoid these ?
There was a problem hiding this comment.
To add to this, I am a bit suspicious of handling localization in this manner, since no other Widget does it like this i.e. 'passing props for individual text fields'.
Maybe it is the responsibility of the User to manage different DataSources dynamically and Studio Pro should only expose the fields for override.
There was a problem hiding this comment.
After clarification with Saurabh, the changes here do not actually affect the existing attributes of the Widget on Studio Pro, but rather are used as sources of text instead of the hardcoded strings in the Feedback widget.
This sounds ok, but of course it is probably part of a greater task to do this in the scope of the entire widgets i.e. proper localization, single-source of truth for the localize-able strings instead of hardcoding them within widgets etc.
Vadym will continue taking a look at this for some context and suggestions.
Thank you!
There was a problem hiding this comment.
Looks like this IS the way.
There's an example in the web components with a similar amount of labels:
https://github.com/mendix/web-widgets/blob/main/packages/pluggableWidgets/combobox-web/src/Combobox.xml
https://github.com/mendix/web-widgets/blob/main/packages/pluggableWidgets/combobox-web/typings/ComboboxProps.d.ts
We should also consider including nl_NL translations alongside en_US (use llm to translate, but we'll need to proofread the result).
Something to consider improving:
- placeholderFeedback + labelFeedbackInput both default to "Type your feedback here". The visible label is the accessible name (already set as accessibilityLabel on the TextInput). The placeholder is secondary/decorative. These could be one property, or placeholderFeedback could be dropped entirely - a visible label makes a placeholder redundant for clarity anyway.
And one more thing that would be nice to have:
Currently a screen reader user hears the label text "Include Screenshot" (as a ) but the Switch itself immediately after it has no label, so it gets announced as just "switch, on/off" with no context.
Fix would be:
<Switch
accessibilityLabel={this.props.labelIncludeScreenshot?.value ?? "Include Screenshot"}
accessibilityRole="switch"
...
/>
There was a problem hiding this comment.
Regarding the translation, instead of adding specific languages in the xml file, since the strings now appear in the list just batch translation to any other language will be possible using Maia atleast in version 11.
Checklist
[XX-000]: description)? ✅This PR contains
Relevant changes
Feedback widget strings were hardcoded, they were updated to enable language translation.
Custom logo issue was fixed.