Duplicate JSX attributes in BountyCard and Avatar break the build and silently revert the #654 and #653 accessibility fixes

Open Beginner friendly
  • Is something wrong?
#835 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
next.js, react, typescript
Domain
accessibility, frontend, testing

Research direction

Read src/components/bounty/BountyCard.tsx and src/components/ui/Avatar.tsx at the listed locations, then inspect BountyCard.test.tsx and Avatar.test.tsx for existing assertions. Run npx tsc --noEmit to confirm the duplicate attribute errors. Done when the duplicates are resolved while preserving the described accessible label, safe avatar source, and supplied alt text, and both regression assertions pass.

Written by the indexing model from the issue text.

Description

accessibility bug

Location

  • src/components/bounty/BountyCard.tsx:37-40 — BountyCard
  • src/components/ui/Avatar.tsx:57-61 — Avatar

Problem

Both components carry the same attribute twice on one JSX element, left behind by an unreconciled merge. React keeps the last occurrence and discards the earlier one, so in each case the newer accessibility fix is the one that gets thrown away.

BountyCard
<Link
  href={`/issues/${bounty.id}`}
  prefetch={false}
  aria-label={accessibleLabel}                      // line 37  (#654 fix)
  className={`... before:left-0 ...`}               // line 38
  aria-label={`${bounty.title}, ${formatCurrency(bounty.reward, bounty.asset)}`}  // line 39 (old)
  className={`... before:start-0 ...`}              // line 40
>

aria-label and className are each specified twice. The surviving aria-label is the old short one, so accessibleLabel — the full "title, from org/repo, issue N, reward X, status: funded, difficulty: advanced, due in 5 days, claimed by Y" string built at lines 20-31 for closed issue #654 — is computed on every render and then dropped. The card is back to announcing only its title and reward, which is precisely what #654 reported. The variable also becomes unused, so no-unused-vars style lint rules flag it.

The two className values differ in one class: before:left-0 versus the logical before:start-0. The logical property is the one that survives, which is the correct outcome, but it is surviving by accident.

Avatar
<Image
  src={src ?? seedToUrl(seed)}   // line 58 — bypasses isSafeAvatarUrl
  alt={alt ?? seed}              // line 59 — honours the `alt` prop
  src={resolved}                 // line 60 — safety-checked + error fallback
  alt={seed}                     // line 61 — ignores the `alt` prop
  ...

Here the survivors are src={resolved} (good — the host-allowlist and onError fallback logic is the one that applies) and alt={seed} (bad — the alt prop is accepted by the component's signature, documented at lines 40-41 as "Use empty string when the avatar is decorative (next to a visible name)", and then silently ignored).

Every call site that passes alt="" therefore still gets alt={seed}. That reintroduces closed issue #653: src/components/dashboard/ActivityList.tsx:42 renders <Avatar seed={event.handle} /> immediately before a visible {event.handle}, so a screen reader reads the handle twice per activity row.

Both files fail to compile

Duplicate JSX attributes are a TypeScript error, not a warning: TS17001: JSX elements cannot have multiple attributes with the same name. tsc --noEmit and next build both fail on these two files, and react/jsx-no-duplicate-props would have caught them too.

Why it matters

  • The app does not build, so no route is reachable.
  • Once it does build (by resolving these duplicates the wrong way, i.e. keeping what React keeps today), two closed accessibility issues are quietly back in place: bounty cards on /issues lose their status/deadline/claimant context for screen-reader users (#654), and decorative avatars double-announce every name in the activity feed (#653). Both regressions are invisible in code review because the "fix" code is still sitting right there in the file.

Reproduction

  1. Check out the current default branch, run npm ci, then npx tsc --noEmit. Four TS17001 errors are reported across the two files.
  2. Delete lines 39-40 of BountyCard.tsx and lines 58-59 of Avatar.tsx — i.e. resolve each duplicate the way React resolves it at runtime — and build again.
  3. Open /issues with VoiceOver or NVDA and move through the links list. Each bounty card announces only "<title>, 500 USDC"; status, difficulty, deadline and claimant are not announced.
  4. Open any dashboard with the activity feed and move through it. Each row announces the contributor handle twice: once as the avatar's alt text, once as the adjacent visible text.

Suggested fix

  1. BountyCard.tsx: delete the old aria-label on line 39 and the before:left-0 className on line 38, keeping aria-label={accessibleLabel} (line 37) and the before:start-0 className (line 40).
  2. Avatar.tsx: delete the raw src={src ?? seedToUrl(seed)} (line 58) and alt={seed} (line 61), keeping src={resolved} (line 60) and alt={alt ?? seed} (line 59).
  3. Enable react/jsx-no-duplicate-props as an error in eslint.config.mjs and run tsc --noEmit in CI, so this class of merge damage is caught mechanically. Two other components on this branch have the same kind of unresolved merge.
  4. Re-add a regression assertion to each test file: BountyCard.test.tsx should assert the link's accessible name contains the status and deadline, and Avatar.test.tsx should assert alt="" is honoured when passed.
Dominant language
TypeScript
Stars
1
Forks
94
Avg merge
1h 2m
Merged PRs (30d)
25

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from MergeFi/frontend

All issues in MergeFi/frontend

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.