Skip to content

fix: give account modal an accessible name - #2701

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

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

Conversation

@devtechedge

Copy link
Copy Markdown

Summary

Fixes #2700.

The account modal dialog sets aria-labelledby="rk_account_modal_title", but ProfileDetails hardcoded id="rk_profile_title" on its headings. The labelled-by id never resolved, so the dialog had no accessible name.

Changes

  • Pass titleId from AccountModal into ProfileDetails so the heading id matches the dialog, same pattern as ChainModal / the connect modal.
  • Keep the id on the account-name heading only. The balance line was sharing the same id, which is invalid HTML and breaks aria-labelledby when a balance is shown.

Test plan

  • Open the example app, connect a wallet, click the connected account button.
  • document.getElementById('rk_account_modal_title') returns the account-name heading while the modal is open.
  • Dialog announces a name (account / ENS), not a nameless "dialog".
  • Balance line still renders; it no longer duplicates the heading id.

@vercel

vercel Bot commented Sep 3, 2026

Copy link
Copy Markdown

@devtechedge 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: 4530481

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

@devtechedge

Copy link
Copy Markdown
Author

Hi, just checking in on this one.

It gives the account modal an accessible name for assistive tech.

Open since 3 September with green checks and no conflicts. Happy to adjust anything.

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