Skip to content

fix: give the account modal an accessible name - #2702

Open
owenpkent wants to merge 1 commit into
rainbow-me:mainfrom
owenpkent:fix/account-modal-accessible-name
Open

owenpkent wants to merge 1 commit into
rainbow-me:mainfrom
owenpkent:fix/account-modal-accessible-name

Conversation

@owenpkent

Copy link
Copy Markdown

Fixes #2700.

What

AccountModal sets aria-labelledby="rk_account_modal_title" on its dialog, but the body it renders, ProfileDetails, hardcoded its own heading id, rk_profile_title, and put that same id on the balance heading as well. The reference never resolved, so the account modal was announced as an unnamed dialog, and the duplicated id was invalid on its own.

ProfileDetails now takes the titleId from AccountModal and renders it on the account name only. The dialog is therefore announced by the connected address or ENS name, the way ChainModal and the connect flow already pair a dialog with its heading. No user-facing strings change, so no locale files are touched.

Testing

  • New AccountModal.test.tsx, in the style of ChainModal.test.tsx: connects the mock wallet, then asserts the dialog's aria-labelledby resolves to exactly one element, that the element holds the formatted address, and that the dialog's accessible name is that address.
  • pnpm test (full suite), biome lint, biome check and the package typecheck all pass locally.
  • Re-ran axe-core and IBM Equal Access against the built package in a small Vite app with an injected test wallet: axe aria-dialog-name and aria-valid-attr-value on the account modal went from 6 occurrences (the modal opened from idle, pending and confirmed states) to 0, and Equal Access aria_id_unique from 3 to 0, with no other finding changed.

Changeset included (patch).

AccountModal set aria-labelledby="rk_account_modal_title" on its dialog,
but ProfileDetails rendered its heading with its own hardcoded id,
rk_profile_title, and put that same id on the balance heading as well.
The reference never resolved, so the modal was announced as an unnamed
dialog, and the duplicated id was invalid on its own.

ProfileDetails now takes the titleId from AccountModal and renders it on
the account name only, the way ChainModal and the connect flow already
pair a dialog with its heading.

Fixes rainbow-me#2700
@vercel

vercel Bot commented Sep 3, 2026

Copy link
Copy Markdown

@owenpkent is attempting to deploy a commit to the rainbowdotme Team on Vercel.

A member of the Team first needs to authorize it.

@changeset-bot

changeset-bot Bot commented Sep 3, 2026

Copy link
Copy Markdown

馃 Changeset detected

Latest commit: 03de295

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages
Name Type
@rainbow-me/rainbowkit Patch
example Patch
@rainbow-me/rainbow-button Patch
rainbowkit-next-app Patch
site Patch
with-create-react-app Patch
with-next-app-i18n Patch
with-next-app Patch
with-next-custom-button Patch
with-next-mint-nft Patch
with-next-siwe-iron-session Patch
with-next-siwe-next-auth Patch
with-next-wallet-button Patch
with-next Patch
with-react-router Patch
with-remix Patch
with-vite Patch
with-next-rainbow-button Patch

Not sure what this means? Click here to learn what changesets are.

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

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Account modal has no accessible name (aria-labelledby points to a nonexistent id)

1 participant