Question: how to use anchor tags with mwc-tab-bar & mwc-tab?

[samuelli]

Code snippet:

<mwc-tab-bar>
  <a href="/">
    <mwc-tab label="my link"></mwc-tab>
  </a>
</mwc-tab-bar

Expected: tab bar with anchor tags

Actual: tab bar breaks. The indicator stops working and the tabs no longer grow to fit the available space.

Not really sure what a good solution here is, but I think this is a pretty common scenario. If there's no elegant solutions, at least expose a href attribute?

[christophe-g]

Hitting this as well when trying to make some components more accessible.

Workaround needs quite a bit of boilerplate (css + routing + handling mwc-tab-bar activation logic) ; )

[steverep]

I think my comment on #441 also applies here to tabs. Currently, the only way to do this without breaking the component or introducing inaccessibility is to use JavaScript for the URL change using window.location.href or window.open. And in a future release, it'd be nice if the component took a href attribute and rendered a <a role="tab" href=${this.href} ...> instead of a <button role="tab" ...> when provided.