Indicate currently active on stencil-route-link (aria-current?)

[Anthony Johnston]

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