Keypress won't trigger on all my social buttons, just one?

Question

I am using the ShareThis library for a site I am working on. I want to make this site accessible, so that a user can tab through and hit enter and trigger a click event. Right now, when a user hits enter on any of the social media buttons, a console message shows up but it doesn't treat it like a click and open the sharing page.

This is working on only the last button, the email button. It opens the right modal (every other button opens a different page) but each one still prints out the console message. Here is my code, I am unsure why it is not working.

Here is my JS code:

$('.sharethis-body .keypress-click').each(function () {
    $(this).keypress(function (e) {
        var key = e.which;
        if (key == 13) // the enter key code
        {
            $(this).click();
            console.log("click");
            return false;
        }
        return true;
    });
});

And here is my HTML:

    <div class="sharethis-body">
        <div class="sthoverbuttons-label"><span>Share</span></div>
        <span tabindex="0" class='st_facebook_large keypress-click' displaytext='Facebook' aria-label='Facebook'></span>
        <span tabindex="0" class='st_twitter_large keypress-click' displaytext='Tweet' aria-label='Twitter'></span>
        <span tabindex="0" class='st_googleplus_large keypress-click' displaytext='Google +' aria-label='Google Plus'></span>
        <span tabindex="0" class='st_linkedin_large keypress-click' displaytext='LinkedIn' aria-label='LinkedIn'></span>
        <span tabindex="0" class='st_email_large keypress-click' displaytext='Email' aria-label='Email'></span>
    </div>

Any help with this would be greatly appreciated!

Answer 1

Not knowing how ShareThis is used but your issue can be corrected by changing the "span" to "button". By using buttons, you gain the native focus ability. It's also possible for you to clean up your code to look something like this.

Facebook