Indicate currently active on stencil-route-link (aria-current?)
MrAntix opened this issue · comments
Version:
v0.3.1
I'm submitting a ... (check one with "x")
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com
Current behavior:
The markup is currently rendered so that the link-active class is placed on an anchor inside of the component wrapper
<stencil-route-link>
<a class="link-active" href="/">Home</a>
</stencil-route-link>
<stencil-route-link>
<a href="/clients">Clients</a>
</stencil-route-link>
This makes group styling harder because we cannot target stencil-route-link
Expected behavior:
The ability to target the outer element would make it much easier to style tabs for example
aria-current may suit https://www.w3.org/TR/wai-aria-1.1/#aria-current
export class RouteLink {
...
@Prop() ariaCurrentType?: ariaCurrentTypes;
@Prop({ mutable: true, reflectToAttr: true })
ariaCurrent?: ariaCurrentTypes;
componentWillUpdate() {
this.ariaCurrent = this.match && this.ariaCurrentType;
}
...
}
type ariaCurrentTypes =
| 'page'
| 'step'
| 'location'
| 'date'
| 'time'
| true;
ps. I'd have submitted a PR, but can't figure out how to build the current code :D