search

PolymerElements / iron-elements

Core elements
47 stars 23 forks source link

Polymer elements should compose organically and ergonomically with anchors #37

Open cdata opened 8 years ago

cdata commented 8 years ago

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

Issues

abdonrd commented 8 years ago

Nice! More refs:

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

cdata commented 8 years ago

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

srikkbhat commented 8 years ago

One more PolymerElements/paper-checkbox#100

abdonrd commented 8 years ago

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

abdonrd commented 8 years ago

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

ebidel commented 8 years ago

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

abdonrd commented 8 years ago

@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 commented 8 years ago

I'm working on a fix for paper-tabs

abdonrd commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

robdodson commented 8 years ago

@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 commented 6 years ago

@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>:

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 commented 6 years ago

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.