Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

data-pin-href taking over href #98

Open
jeanadev opened this issue Oct 1, 2020 · 3 comments
Open

data-pin-href taking over href #98

jeanadev opened this issue Oct 1, 2020 · 3 comments

Comments

@jeanadev
Copy link

jeanadev commented Oct 1, 2020

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
Copy link

mortscode commented Sep 9, 2022

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

@mortscode
Copy link

@jeanadev
Copy link
Author

jeanadev commented Sep 9, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants