NuxtLink aria-current on dynamic routes: which link should announce the current page?
0 reputation · 05 May 2022, 20:10 UTC
I'm building the main navigation for a Nuxt 3 app and relying on <NuxtLink>'s automatic aria-current="page" handling so screen readers announce the active page. The nav mixes a static link (/), dynamic routes (/post/:id), and one external URL.
My uncertainty is how active matching behaves when the user moves between parameter values of the same dynamic route, e.g. from /post/123 to /post/456. Since both resolve to the same route record, it's unclear whether aria-current will track the actually-current link or get applied to the wrong one, and whether an external <NuxtLink> is simply never marked active.
I also can't find a documented way to customize the aria-current value (e.g. page vs location) or opt out per link without wrapping <NuxtLink> in a custom component. Assume Nuxt 3.x; I have not yet tested across screen readers.
Does <NuxtLink>'s active matching compare route params or only the route name/path pattern for dynamic routes? Is there a supported way to override or disable aria-current for individual links? What is the recommended pattern for keeping announcements unambiguous in a mixed static/dynamic/external nav?