Repository navigation
Pre-RFC: Add aria-current attribute to Ember's LinkTo component #974
Description
The LinkTo component lacks native support for the aria-current attribute.
From: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current
When you have a group of related elements, such as several links in a breadcrumb or steps in a multi-step flow, with one element in the group styled differently from the others to indicate to the sighted user that this is the current element within its group, the aria-current should be used to inform the assistive technology user what has been indicated via styling.
It seems that anytime LinkTo produces class="active" it should also append aria-current="true"
aria-current="true" is a minimum implementation though, ideally the other aria-current values (page, step, location, etc) should be supported. Perhaps with an additional attribute like so:
<LinkTo @route="home" aria-current="page">Home</LinkTo>
which would render as
<a href="/home" aria-current="page" class="active">Home</a>
This would be my first RFC for Ember, so any feedback would be appreciated.
Activity
NullVoxPopuli commentedon Sep 27, 2023
seems like a good idea!
question though -- why doesn't the browser do this for us, based on matching href? (same is it would for the
:activeCSS psuedo attribute? 😅robbytx commentedon Jul 3, 2026
I ran across this today when trying to implement the same in our app.
It's unfortunate that the
<LinkTo>component doesn't expose some mechanism for doing this. Reimplementing the same logic to detect whether a link represents the current route can be tricky, since comparing torouter.currentNameonly solves the simple cases.It does look like #391 (https://rfcs.emberjs.com/id/0391-router-helpers/) adds an
is-active/isActivehelper that may solve it, and an implementation for that (emberjs/ember.js#21447) was posted this month. 🤞