[accessibility][keyboard] jPlayer 2.6.0 breaks all links on a page for keyboard users, even outside the player div.

[ghost]

Background

The usage of the "return" or "enter" key to select/activate a link is a universal standard across all browsers and all operating systems and is expected and relied upon for keyboard-only users, including blind and disabled people.

Problem

jPlayer breaks accessibility and keyboard links for ALL a href links on any page it is included on, even those outside the jPlayer div.

Example

• Visit any page without jPlayer, for example http://jplayer.org/, tab 8 times, press enter, and you get the support page, as it should be.
• Visit any page with jPlayer on, on any site. for example, http://jplayer.org/latest/demo-01-supplied-mp3/, tab 8 times and try getting "home".

This is also a particular issue for the playlist, as users can't "click" a playlist item with the keyboard.

Cause

https://github.com/happyworm/jPlayer/blob/master/jquery.jplayer/jquery.jplayer.js#L450
event.preventDefault();

Partial fix

Comment out event.preventDefault(); and normal service is restored.

Side effect

After applying the fix, all is good but when you hit a playlist item with the enter key now, it loads the file. Incidentally, I've changed the playlist links to reduce the clutter for screenreader users; they play when you click but retain default download functionality when you right click. I know I always complain when people don't post full links to working sites, but I really can't! But my playlist looks like this:

<div class="jp-playlist">
    <ul role="listbox" class="lead" style="display: block;">
        <li class="jp-playlist-current">
            <div><a tabindex="0" class="jp-playlist-item jp-playlist-current" href="http://localhost/audio/01_Introduction_and_track_list.mp3">Introduction and track list</a>
            </div>
        </li>
        <li>
            <div><a tabindex="0" class="jp-playlist-item" href="http://localhost/audio/02_In_Season._Spring_watch.mp3">In season - Spring watch</a>
            </div>
        </li>
    </ul>
</div>

I spend most of yesterday going through Stackoverflow, jQuery site etc trying to work around this myself, but gave up.

Questions

• How can I re-enable link functionality via jQuery without touching core jPlayer code?
• Can the playlist div be handled differently so that pressing "enter" on a playlist item doesn't open the file, but still allows right-click "save file as" functionality?

[thepag]

Yes this does appear to be a rather large oversight when making the keyboard controls feature.

To disable the offending option, use:

keyBindings: {
  fullScreen: null
}

I'll have to have a think about this... We already have in this list here of elements to ignore:

// The list of element node names to ignore with key controls.
$.jPlayer.keyIgnoreElementNames = "INPUT TEXTAREA";

That list is used to stop the form inputs from triggering the key bindings.

At first glance, we may be able to add in the link and buttons node names and that will do the trick.

$.jPlayer.keyIgnoreElementNames = "INPUT TEXTAREA A BUTTON";

Thinking about what we are doing... The user is selecting a node using tab, and that node is in focus on the page when the user hits enter... That node will be the one raising the events, so ignoring key presses on links and buttons might be the way...

I'm just trying to avoid this problem every occurring again... So maybe we should check in another way... Rather than testing the node name, we should test if there is an element in focus. Do not confuse with the naming of "focus" I used for the last jPlayer instance used... So if you hit enter and there is no DOM element in focus, then we process the key press... However, if the tab key is used to put a link in focus, then the key press will be ignored, due to the DOM element being in focus...Well, that is the theory... Now to see if it is easy to figure out what is in focus on the DOM.