pinterest / widgets

JavaScript widgets, including the Pin It button.
Other
210 stars 88 forks source link

data-pin-href taking over href #98

Open jeanadev opened 4 years ago

jeanadev commented 4 years ago

This is the snippet of code I have on my page

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

<a href="https://www.pinterest.com/pin/create/button/"
                data-pin-custom="true"
                data-pin-do="buttonBookmark"
                class="pinterest"
                role="link"
                tabindex="1">

                <i class="fab fa-pinterest-p" aria-hidden="true" title="Pinterest"></i>&nbsp;&nbsp;pin it
</a>

When viewed in the browser, it outputs like this:

<a 
                class="pinterest" 
                data-pin-custom="true" 
                data-pin-do="buttonPin" 
                role="link"
                tabindex="1"
                data-pin-log="button_pinit" 
                data-pin-href="https://www.pinterest.com/pin/create/button?guid=5pUYMNpbWfnZ-1&amp;url=https%3A%2F%2Fwww.spine-health.com%2Fconditions%2Fneck-pain%2Fneck-strain-causes-and-remedies&amp;media=undefined&amp;description=Neck%20Strain%3A%20Causes%20and%20Remedies">

                <i class="fab fa-pinterest-p" aria-hidden="true" title="Pinterest"></i>&nbsp;&nbsp;pin it
</a>

There is no actual href in the link tag now. Which means, the browser doesn't see it as a link (no link mouse cursor). By adding role="link" and tabindex="0" I'm able to place the button in the right keyboard accessible tab order, however, I can't seem to "fire" the link. Hitting enter, or space on my keyboard does not load the url as defined in data-pin-href.

Have I coded something incorrectly here?

mortscode commented 2 years ago

@tsidel Did you ever have any luck with this one? Google doesn't like my <a> elements that are missing an href.

mortscode commented 2 years ago

Google wants links to be "crawlable" as stated here: https://developers.google.com/search/docs/crawling-indexing/links-crawlable?visit_id=637983546833964747-1441666970&rd=1

jeanadev commented 2 years ago

@mortscode - Unfortunately no. I was running into this same problem because google dev tools was complaining about it and for accessibility. We're about to launch a redesign, and are doing away with the pins. Good luck!