Keypress won't trigger on all my social buttons, just one?
up vote
0
down vote
favorite
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!
java html accessibility sharethis
asked yesterday
cpick
53
add a comment |
up vote
0
down vote
favorite
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!
java html accessibility sharethis
asked yesterday
cpick
53
I tried your example in a simple test file with your JS code in my onload() and just the html you have above in addition to<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>. I get the same problem. Only email works. I tried changing the order of the spans (email in the middle) and still only email worked. I then added an onclick() handler to the google span and it runs when I press ENTER on the google icon. So the click is being fired. So maybe the problem is in the sharethis.com javascript.
– slugolicious
yesterday
that's a great observation. it might be in the library! but why would it work when clicked and work with the email, but not with the enter keypress? it kills me that it is working with the email and not with anything else, because I know my code is working but not on every single button.... thank you @slugolicious !!
– cpick
yesterday
I hadn't tried mouse clicking on them. Indeed, all of them work for me too. I added this to the "each" loop after the keypress() declaration so that all the elements had an onclick:$(this).click(function (e) { alert('my click'); });. Pressing ENTER on all the elements runs the "my click" but only the email pops up a dialog. One other difference is email opens a dialog within the same page whereas all the others open a new browser window (when you click with the mouse). So there is some consistency as to the images that don't work.
– slugolicious
yesterday
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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!
java html accessibility sharethis
asked yesterday
cpick
53
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!
java html accessibility sharethis
java html accessibility sharethis
asked yesterday
cpick
53
asked yesterday
cpick
53
edited yesterday
asked yesterday
cpick
53
asked yesterday
cpick
53
asked yesterday
cpick
53
53
I tried your example in a simple test file with your JS code in my onload() and just the html you have above in addition to<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>. I get the same problem. Only email works. I tried changing the order of the spans (email in the middle) and still only email worked. I then added an onclick() handler to the google span and it runs when I press ENTER on the google icon. So the click is being fired. So maybe the problem is in the sharethis.com javascript.
– slugolicious
yesterday
that's a great observation. it might be in the library! but why would it work when clicked and work with the email, but not with the enter keypress? it kills me that it is working with the email and not with anything else, because I know my code is working but not on every single button.... thank you @slugolicious !!
– cpick
yesterday
I hadn't tried mouse clicking on them. Indeed, all of them work for me too. I added this to the "each" loop after the keypress() declaration so that all the elements had an onclick:$(this).click(function (e) { alert('my click'); });. Pressing ENTER on all the elements runs the "my click" but only the email pops up a dialog. One other difference is email opens a dialog within the same page whereas all the others open a new browser window (when you click with the mouse). So there is some consistency as to the images that don't work.
– slugolicious
yesterday
add a comment |
I tried your example in a simple test file with your JS code in my onload() and just the html you have above in addition to<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>. I get the same problem. Only email works. I tried changing the order of the spans (email in the middle) and still only email worked. I then added an onclick() handler to the google span and it runs when I press ENTER on the google icon. So the click is being fired. So maybe the problem is in the sharethis.com javascript.
– slugolicious
yesterday
that's a great observation. it might be in the library! but why would it work when clicked and work with the email, but not with the enter keypress? it kills me that it is working with the email and not with anything else, because I know my code is working but not on every single button.... thank you @slugolicious !!
– cpick
yesterday
I hadn't tried mouse clicking on them. Indeed, all of them work for me too. I added this to the "each" loop after the keypress() declaration so that all the elements had an onclick:$(this).click(function (e) { alert('my click'); });. Pressing ENTER on all the elements runs the "my click" but only the email pops up a dialog. One other difference is email opens a dialog within the same page whereas all the others open a new browser window (when you click with the mouse). So there is some consistency as to the images that don't work.
– slugolicious
yesterday
I tried your example in a simple test file with your JS code in my onload() and just the html you have above in addition to
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>. I get the same problem. Only email works. I tried changing the order of the spans (email in the middle) and still only email worked. I then added an onclick() handler to the google span and it runs when I press ENTER on the google icon. So the click is being fired. So maybe the problem is in the sharethis.com javascript.– slugolicious
yesterday
I tried your example in a simple test file with your JS code in my onload() and just the html you have above in addition to
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>. I get the same problem. Only email works. I tried changing the order of the spans (email in the middle) and still only email worked. I then added an onclick() handler to the google span and it runs when I press ENTER on the google icon. So the click is being fired. So maybe the problem is in the sharethis.com javascript.– slugolicious
yesterday
that's a great observation. it might be in the library! but why would it work when clicked and work with the email, but not with the enter keypress? it kills me that it is working with the email and not with anything else, because I know my code is working but not on every single button.... thank you @slugolicious !!
– cpick
yesterday
that's a great observation. it might be in the library! but why would it work when clicked and work with the email, but not with the enter keypress? it kills me that it is working with the email and not with anything else, because I know my code is working but not on every single button.... thank you @slugolicious !!
– cpick
yesterday
I hadn't tried mouse clicking on them. Indeed, all of them work for me too. I added this to the "each" loop after the keypress() declaration so that all the elements had an onclick:
$(this).click(function (e) { alert('my click'); });. Pressing ENTER on all the elements runs the "my click" but only the email pops up a dialog. One other difference is email opens a dialog within the same page whereas all the others open a new browser window (when you click with the mouse). So there is some consistency as to the images that don't work.– slugolicious
yesterday
I hadn't tried mouse clicking on them. Indeed, all of them work for me too. I added this to the "each" loop after the keypress() declaration so that all the elements had an onclick:
$(this).click(function (e) { alert('my click'); });. Pressing ENTER on all the elements runs the "my click" but only the email pops up a dialog. One other difference is email opens a dialog within the same page whereas all the others open a new browser window (when you click with the mouse). So there is some consistency as to the images that don't work.– slugolicious
yesterday
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
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.
answered yesterday
xirclebox
212
unfortunately, this does not change anything. this only adds a box around the icon to have it styled like a button, it does not change any behavior.
– cpick
yesterday
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
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.
answered yesterday
xirclebox
212
unfortunately, this does not change anything. this only adds a box around the icon to have it styled like a button, it does not change any behavior.
– cpick
yesterday
add a comment |
up vote
0
down vote
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.
answered yesterday
xirclebox
212
unfortunately, this does not change anything. this only adds a box around the icon to have it styled like a button, it does not change any behavior.
– cpick
yesterday
add a comment |
up vote
0
down vote
up vote
0
down vote
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.
answered yesterday
xirclebox
212
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.
answered yesterday
xirclebox
212
answered yesterday
xirclebox
212
answered yesterday
xirclebox
212
answered yesterday
xirclebox
212
212
unfortunately, this does not change anything. this only adds a box around the icon to have it styled like a button, it does not change any behavior.
– cpick
yesterday
add a comment |
unfortunately, this does not change anything. this only adds a box around the icon to have it styled like a button, it does not change any behavior.
– cpick
yesterday
unfortunately, this does not change anything. this only adds a box around the icon to have it styled like a button, it does not change any behavior.
– cpick
yesterday
unfortunately, this does not change anything. this only adds a box around the icon to have it styled like a button, it does not change any behavior.
– cpick
yesterday
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53343710%2fkeypress-wont-trigger-on-all-my-social-buttons-just-one%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I tried your example in a simple test file with your JS code in my onload() and just the html you have above in addition to
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>. I get the same problem. Only email works. I tried changing the order of the spans (email in the middle) and still only email worked. I then added an onclick() handler to the google span and it runs when I press ENTER on the google icon. So the click is being fired. So maybe the problem is in the sharethis.com javascript.– slugolicious
yesterday
that's a great observation. it might be in the library! but why would it work when clicked and work with the email, but not with the enter keypress? it kills me that it is working with the email and not with anything else, because I know my code is working but not on every single button.... thank you @slugolicious !!
– cpick
yesterday
I hadn't tried mouse clicking on them. Indeed, all of them work for me too. I added this to the "each" loop after the keypress() declaration so that all the elements had an onclick:
$(this).click(function (e) { alert('my click'); });. Pressing ENTER on all the elements runs the "my click" but only the email pops up a dialog. One other difference is email opens a dialog within the same page whereas all the others open a new browser window (when you click with the mouse). So there is some consistency as to the images that don't work.– slugolicious
yesterday