[owenpkent]

Fixes #520.

What

ModalContainer renders with role="dialog" but no aria-label or aria-labelledby, so every ConnectKit screen was announced as an unnamed dialog. This labels it with the heading text the modal already renders for the current route, using the same flattenChildren(...).toString() conversion the close, back and info buttons use for their aria-label.

The name follows the route: "Connect Wallet", "Connected", "Switch Networks", the wallet's name on the connecting screen, and so on. When getHeading() has nothing for a route the attribute is omitted rather than set to an empty string.

I went with aria-label rather than aria-labelledby because the heading is rendered inside AnimatePresence, so two heading nodes exist during a route transition and an id could not be kept unique.

Testing

• rollup --config rollup.config.prod.js builds, and the changed file is Prettier-clean. The package has no test suite, and yarn lint has no ESLint config to run against, so I could not add an automated check here.
• Re-ran axe-core against the built package in a small Vite app with an injected test wallet: aria-dialog-name went from 3 occurrences (connect, profile and wrong-network dialogs) to 0, with no other finding changed.

[vercel]

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

A member of the Team first needs to authorize it.

[owenpkent]

Friendly ping: the CI runs on this PR were waiting for maintainer approval and timed out before anyone approved them, so they never ran. The branch is still current with main. Could someone take a look when you get a chance? I can push to re-trigger CI if that helps.