Polymer elements should compose organically and ergonomically with anchors

[cdata]

This is a meta-issue to track all of the design problems with Polymer Elements as they related to HTML <a> tags.

Issues

• https://github.com/PolymerElements/paper-item/issues/21
• PolymerElements/paper-button#35
• https://github.com/PolymerElements/paper-checkbox/issues/100

Related PRs

• PolymerElements/paper-button#91
• PolymerElements/paper-icon-button#69

[abdonrd]

Nice! More refs:

• https://github.com/PolymerElements/paper-button/issues/35

And anchor example in paper-button and paper-icon-button:

• https://github.com/PolymerElements/paper-button/pull/91
• https://github.com/PolymerElements/paper-icon-button/pull/69

[cdata]

Thanks @abdonrd , I've added those to the main issue.

[srikkbhat]

One more PolymerElements/paper-checkbox#100

[abdonrd]

Another reference with paper-tabs: https://github.com/PolymerElements/paper-tabs/blob/master/demo/index.html#L171-L193

[abdonrd]

Another reference with paper-item: https://github.com/PolymerElements/paper-item/pull/75

[ebidel]

@cdata all of the issues looked fixed. Should we close?

[abdonrd]

@ebidel we still have the issue when we want to wait the paper-ripple effect.

And the paper-tabs puts the anchor inside the paper-tab. :confused:

[robdodson]

I'm working on a fix for paper-tabs

[abdonrd]

@robdodson nice! The anchor will be outside the paper-tab? Like the rest of paper elements.

<paper-tabs>
  <a href="#inbox" tabindex="-1">
    <paper-tab>Inbox</paper-tab>
  </a>
  <a href="#starred" tabindex="-1">
    <paper-tab>Starred</paper-tab>
  </a>
</paper-tabs>

[robdodson]

No I was planning to leave it inside the tab. Basically doing the fix proposed here: https://github.com/PolymerElements/paper-tabs/issues/141

[robdodson]

btw that paper-item fix seems wrong. If the anchor is tabindex=-1 you'll never be able to activate it from a keyboard. It'll only work for mouse users

[robdodson]

hm actually it does seem to work. I guess the anchor picks up the event dispatched from the inner child and it gets counted as an anchor click

[abdonrd]

It's a bit inconsistent have elements that have the anchor inside and others outside. It would be great if we can unify.

[robdodson]

@abdonrd I agree. We would have to change the way paper-tabs does distribution to make the other proposal work which would be a pretty big change.

[abdonrd]

@cdata @robdodson @ebidel Sorry for reliving this post after so long, but...

Today a friend has shared this post with me: Can I nest a <button> element inside an <a> using HTML5?

And I remember these PRs where we wrapped the elements with the <a>:

• https://github.com/PolymerElements/paper-button/pull/91
• https://github.com/PolymerElements/paper-item/pull/75
• https://github.com/PolymerElements/paper-icon-button/pull/69

It seems that according to the HTML5 Spec Document from W3C about the a element, the content model must be:

Transparent, but there must be no interactive content or a element descendants.

As the interactive content includes the button element... I guess we should face this in another way, right?

Thanks in advance!

[robdodson]

I think it's probably fine to have element descendants inside of <a>.

If you're just using native HTML, then it doesn't make sense to put <button> inside of <a> because, semantically, <button> performs an action on a page and <a> is a link to another page.

It might be worth overriding the role on paper-button and paper-icon-button if you're using them inside of an <a>. You may just want to do:

<a href="https://example.com"
  <paper-button role="group">Example.com</paper-button>
</a>

That would tell the accessibility tree to treat paper-button like a div or a span and just read the text content inside of it.