Skip to content

feat(ux): add character counter and helper text to textareas#1793

Closed
lucumango wants to merge 2 commits into
ruxailab:developfrom
lucumango:feat/textarea-ux-improvement
Closed

feat(ux): add character counter and helper text to textareas#1793
lucumango wants to merge 2 commits into
ruxailab:developfrom
lucumango:feat/textarea-ux-improvement

Conversation

@lucumango

@lucumango lucumango commented Mar 4, 2026

Copy link
Copy Markdown

What does this PR do?

This PR enhances the UX of the core TextareaForm.vue component used throughout the platform for collecting user feedback (e.g., SUS variants, TAM questionnaires, and Heuristic study conclusions).

Why is it needed?

RUXAILAB collects incredibly valuable qualitative user data. By adding a live character counter and an encouraging helper text ("Your qualitative feedback is highly valuable"), we implicitly guide evaluators and participants to provide richer, more detailed open-ended feedback rather than rushing through text areas.

Changes made:

  • Updated TextareaForm.vue to include a live characterCount computed property (stripping raw HTML from Quill for accuracy).
  • Added a non-intrusive lightbulb helper text snippet below the editor.
  • Updated en.json and es.json locale files with the new translation keys (common.valuableFeedback and common.characters) to maintain full i18n support.

Fixes #1803

video1941622412.mp4

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Enhances the shared TextareaForm.vue component UX by adding a helper hint and a live character counter, along with related i18n updates.

Changes:

  • Added helper text row (with icon) and a computed characterCount to TextareaForm.vue.
  • Added new common.valuableFeedback and common.characters translation keys to en.json and es.json.
  • Made Firebase Analytics initialization conditional (emulator/fake key safe-guard).

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File Description
src/shared/components/TextareaForm.vue Adds helper text + character counter UI and logic.
src/app/plugins/locales/en.json Adds English strings for the new helper/counter labels.
src/app/plugins/locales/es.json Adds Spanish strings for the new helper/counter labels.
src/app/plugins/firebase/index.js Avoids initializing Analytics when using emulators/dummy keys.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/shared/components/TextareaForm.vue
Comment thread src/shared/components/TextareaForm.vue Outdated
Comment thread src/app/plugins/firebase/index.js Outdated
@sonarqubecloud

sonarqubecloud Bot commented Mar 5, 2026

Copy link
Copy Markdown

@marcgc21

marcgc21 commented Mar 7, 2026

Copy link
Copy Markdown
Member

Not a problem right now 🙏

@marcgc21 marcgc21 closed this Mar 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[✨ Feature]: Add character counter and helper text to TextareaForm component

3 participants