Globally set role=button to onkeypress spacebar for pseudo buttons with hrefs

Question

We have a giant site with hundreds of pages with many buttons. We are trying to make the site more accessible but nearly all the buttons were originally styled using <a href= versus <button>. This means we need to enable spacebar to work with these hrefs. My question is can you globally set all links with role="button" to keypress 32 to send the user to the referenced href path using javascript? I know this can be done individually such as:

<a href="/employee.html" class="btn" role="button">Example</a>

$(function() {
    $(".btn").keypress(function(e) {
        if (e.which === 32) {
            e.preventDefault();
            window.location = "/employee.html"
        }
    });
});

Is there a way to call a universal keypress 32 for all role=buttons and send the target path to the function so the spacebar will indeed activate the link?

Answer 1

I would probably try something like the following the target all the links, filter on the ones with the role, and then on the keyup of the space, set the url to whatever href they would normally go to.

$(function() {
    $("a").filter('[role="button"]').on('keyup', function(e) {
        if (e.which === 32) {
            window.location = e.target.href;
        }
    });
});