Skip to content

fix: give the modal card and header icon buttons accessible names - #5763

Open
devtechedge wants to merge 3 commits into
reown-com:mainfrom
devtechedge:fix/modal-accessible-names
Open

devtechedge wants to merge 3 commits into
reown-com:mainfrom
devtechedge:fix/modal-accessible-names

Conversation

@devtechedge

@devtechedge devtechedge commented Sep 4, 2026

Copy link
Copy Markdown

Description

The modal card (wui-card, role="alertdialog") had no accessible name, and the header's icon-only buttons could not be given one because wui-icon-button never forwarded a label to its inner <button>. A screen reader announced the modal as an unnamed dialog and the close/help controls as a bare "button".

  • wui-icon-button gains an optional label property, rendered as aria-label on the inner button and omitted when unset.
  • w3m-header labels Close, Help, Back, and Smart Sessions — the four wui-icon-button call sites in scaffold-ui.
  • w3m-modal sets aria-label on the card from the current view heading. aria-labelledby cannot cross the shadow boundary into w3m-header, so the heading map is exported and the modal computes the same string on view change. Views with no heading (Account, Account Settings) fall back to a spaced view name.
  • The Connect heading no longer carries a double space when email is not the only connector (Connect Wallet). HTML collapsed it visually; it would have become the card's literal name.

Type of change

  • Chore (non-breaking change that addresses non-functional tasks, maintenance, or code quality improvements)
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Associated Issues

closes #5761

Showcase (Optional)

No visual change.

button -> button "Help"
button -> button "Close"
alertdialog (no name) -> alertdialog "Connect Wallet"

Checklist

  • Code in this PR is covered by automated tests (Unit tests, E2E tests)
  • My changes generate no new warnings
  • I have reviewed my own code
  • I have filled out all required sections
  • I have tested my changes on the preview link
  • Approver of this PR confirms that the changes are tested on the preview link

@changeset-bot

changeset-bot Bot commented Sep 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 0ef28f7

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

This PR includes changesets to release 27 packages
Name Type
@reown/appkit-ui Patch
@reown/appkit-scaffold-ui Patch
@reown/appkit Patch
@reown/appkit-siwe Patch
@reown/appkit-wallet-button Patch
@reown/appkit-experimental Patch
@reown/appkit-pay Patch
@reown/appkit-adapter-ethers Patch
@reown/appkit-adapter-ethers5 Patch
@reown/appkit-adapter-wagmi Patch
@reown/appkit-adapter-bitcoin Patch
@reown/appkit-adapter-solana Patch
@reown/appkit-adapter-stellar Patch
@reown/appkit-adapter-ton Patch
@reown/appkit-adapter-tron Patch
@reown/appkit-universal-connector Patch
@reown/appkit-cdn Patch
@reown/appkit-testing Patch
@reown/appkit-common Patch
@reown/appkit-controllers Patch
@reown/appkit-core Patch
@reown/appkit-utils Patch
@reown/appkit-polyfills Patch
@reown/appkit-wallet Patch
@reown/appkit-siwx Patch
@reown/appkit-cli Patch
@reown/appkit-codemod 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

@vercel

vercel Bot commented Sep 4, 2026

Copy link
Copy Markdown

@devtechedge is attempting to deploy a commit to the Reown Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions

github-actions Bot commented Sep 4, 2026

Copy link
Copy Markdown
Contributor

All contributors have signed the CTA ✍️ ✅
Posted by the CLA Assistant Lite bot.

@devtechedge

Copy link
Copy Markdown
Author

I have read the CTA Document and I hereby sign the CTA

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.

Modal card and header icon buttons have no accessible name (still present in 1.8.23, follow-up to #2698)

1 participant