Rocket.Chat icon indicating copy to clipboard operation
Rocket.Chat copied to clipboard

fix: WCAG (3.3.1) Add inline error for UserAvatarEditor's URL input

Open ergot-rp opened this issue 5 months ago • 6 comments

Inline errors on profile page, more information in Figma https://www.figma.com/design/eCqiUBG2zmN7C0HrFxc7ji/Inline-errors-for-web-forms?node-id=50-2235&t=Qc1iBq6EYwRBeec6-0 URL for avatar: Invalid URL Name: Name required Username: Username required Email: Email required

Summary by CodeRabbit

  • Bug Fixes
    • Enhanced avatar URL validation with real-time inline error messages displayed to users.
    • Invalid URLs are caught and reported before attempting to load them.
    • The Add URL button is automatically disabled when the input is invalid or empty.
    • Improved error handling for image load failures with consistent, localized error messages.

ergot-rp avatar Aug 07 '25 12:08 ergot-rp

⚠️ No Changeset found

Latest commit: e64161a2883c2094676440991bcc16b947b21ced

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

changeset-bot[bot] avatar Aug 07 '25 12:08 changeset-bot[bot]

Looks like this PR is not ready to merge, because of the following issues:

  • This PR is missing the 'stat: QA assured' label
  • This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

dionisio-bot[bot] avatar Aug 07 '25 12:08 dionisio-bot[bot]

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
2 out of 3 committers have signed the CLA.

:white_check_mark: ergot-rp
:white_check_mark: cardoso
:x: ergotse
You have signed the CLA already but the status is still pending? Let us recheck it.

CLAassistant avatar Aug 07 '25 12:08 CLAassistant

Codecov Report

:x: Patch coverage is 81.81818% with 2 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 64.37%. Comparing base (1ca92c3) to head (9c13b39).

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##           develop   #36656      +/-   ##
===========================================
- Coverage    65.76%   64.37%   -1.40%     
===========================================
  Files         3233     3118     -115     
  Lines       108109   106050    -2059     
  Branches     20575    20068     -507     
===========================================
- Hits         71102    68272    -2830     
- Misses       34347    35313     +966     
+ Partials      2660     2465     -195     
Flag Coverage Δ
e2e 51.81% <81.81%> (-5.30%) :arrow_down:
e2e-api 35.48% <ø> (-0.09%) :arrow_down:

Flags with carried forward coverage won't be shown. Click here to find out more.

:rocket: New features to boost your workflow:
  • :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

codecov[bot] avatar Aug 12 '25 13:08 codecov[bot]

Walkthrough

The UserAvatarEditor component now includes URL validation for avatar inputs. A new avatarUrlError state tracks validation failures. Invalid URLs are rejected before processing, and errors display via FieldError UI instead of toasts. The Add URL button disables when no URL is present or validation fails.

Changes

Cohort / File(s) Summary
Avatar URL Validation Enhancement
apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
Adds URL validation with isUrl helper and avatarUrlError state. Validates URLs before processing, clears errors on input edits, replaces toast errors with FieldError UI component, and disables Add URL button on validation failure.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Component
    participant Validator
    participant UI

    User->>Component: Enter avatar URL
    Component->>Component: Clear avatarUrlError
    Component->>UI: Update input display
    
    User->>Component: Click "Add URL"
    Component->>Validator: Validate URL with isUrl()
    
    alt URL is valid
        Validator-->>Component: ✓ Valid
        Component->>Component: Set avatar from URL
        Component->>UI: Show avatar
    else URL is invalid
        Validator-->>Component: ✗ Invalid
        Component->>Component: Set avatarUrlError
        Component->>UI: Render FieldError
        Component->>UI: Disable Add button
    end
    
    User->>Component: Edit URL input
    Component->>Component: Clear avatarUrlError
    Component->>UI: Enable Add button

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

  • Focused, single-file change with coherent purpose
  • Validation logic additions are straightforward
  • State management follows common patterns
  • UI changes involve standard component integration

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: adding inline error for URL input in UserAvatarEditor to comply with WCAG 3.3.1 accessibility standards.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Nov 10 '25 12:11 coderabbitai[bot]

Hi @ergot-rp looks like you used another account for one of the commits: https://github.com/ergotse

Do you mind signing the CLA with that account?

cardoso avatar Nov 10 '25 12:11 cardoso