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

[ergot-rp]

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

WCAG (3.3.1)

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.

WA-54

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1361aba

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

[dionisio-bot]

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

[CLAassistant]

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.
1 out of 2 committers have signed the CLA.

✅ juliajforesti
❌ ergotse
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[codecov]

Codecov Report

❌ Patch coverage is 77.77778% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 70.15%. Comparing base (44938fd) to head (1361aba).
⚠️ Report is 41 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #36656      +/-   ##
===========================================
- Coverage    70.55%   70.15%   -0.41%     
===========================================
  Files         3271     3274       +3     
  Lines       116782   116335     -447     
  Branches     21090    20818     -272     
===========================================
- Hits         82393    81609     -784     
+ Misses       32338    31434     -904     
- Partials      2051     3292    +1241     

Flag	Coverage Δ
e2e	59.63% <53.57%> (-0.88%)	⬇️
e2e-api	46.57% <ø> (-1.56%)	⬇️
unit	70.99% <100.00%> (+0.01%)	⬆️

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[gabriellsh]

I also updated the title.

[coderabbitai]

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

Loading

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 | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the main change: adding inline error handling for the UserAvatarEditor's URL input field, which is the primary focus of the changeset.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[cardoso]

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?

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx (1)

130-143: Add ARIA attributes to TextInput for proper error association.

For WCAG compliance, the TextInput should have aria-describedby and aria-invalid attributes when an error is present. This ensures screen reader users are properly informed about validation errors.

Apply this diff to add the required ARIA attributes:

 					<TextInput
 						data-qa-id='UserAvatarEditorLink'
 						id={imageUrlField}
 						flexGrow={0}
 						placeholder={t('Use_url_for_avatar')}
 						value={avatarFromUrl}
 						mis={4}
 						onChange={handleAvatarFromUrlChange}
+						aria-invalid={!!avatarUrlError}
+						aria-describedby={avatarUrlError ? `${imageUrlField}-error` : undefined}
 					/>
 					{avatarUrlError && (
 						<FieldError aria-live='assertive' id={`${imageUrlField}-error`}>
 							{avatarUrlError}
 						</FieldError>
 					)}

🧹 Nitpick comments (1)

apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx (1)

108-108: Consider the error message clarity.

The same error message "Invalid URL" will be displayed both when the URL format is invalid and when a valid URL fails to load the image. This might be slightly confusing to users, but if this aligns with the design requirements, it's acceptable.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 20490af and e64161a.

📒 Files selected for processing (1)

• apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx (8 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: 📦 Build Packages
• GitHub Check: CodeQL-Build

🔇 Additional comments (5)

apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx (5)

2-2: LGTM!

The FieldError import is correctly added and used for displaying validation errors.

---

41-41: LGTM!

The error state is properly typed and initialized.

---

61-68: LGTM!

The validation logic correctly checks the URL before setting the avatar and provides appropriate error feedback. This addresses the reviewer's previous feedback.

---

77-83: LGTM!

Clearing the error when the user modifies the input provides good UX, allowing them to correct their mistakes.

---

119-119: LGTM!

The disabled logic correctly prevents submission when there's no URL or when a validation error is present.

[cubic-dev-ai]

No issues found across 3 files

stale