-
Notifications
You must be signed in to change notification settings - Fork 82
Open
Description
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> 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&url=https%3A%2F%2Fwww.spine-health.com%2Fconditions%2Fneck-pain%2Fneck-strain-causes-and-remedies&media=undefined&description=Neck%20Strain%3A%20Causes%20and%20Remedies">
<i class="fab fa-pinterest-p" aria-hidden="true" title="Pinterest"></i> 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?
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels