fix: WCAG (3.3.1) Add inline error for UserAvatarEditor's URL input
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.
⚠️ 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
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
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.
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
@@ 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.
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.
Comment @coderabbitai help to get the list of available commands and usage tips.
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?