Keyboard use bug in audio media player shortcode.

[mikeybinns]

You can't adjust the volume up or down on the WordPress audio media player using a keyboard.

When you try, the down key does nothing and the up key gives this error in js console:

Uncaught TypeError: Cannot read property 'matches' of null
    at Object.action (mediaelement-and-player.min.js?ver=4.2.6-78496d1:12)
    at e.value (mediaelement-and-player.min.js?ver=4.2.6-78496d1:12)
    at HTMLDocument.i.globalKeydownCallback (mediaelement-and-player.min.js?ver=4.2.6-78496d1:12)
action @ mediaelement-and-player.min.js?ver=4.2.6-78496d1:12
value @ mediaelement-and-player.min.js?ver=4.2.6-78496d1:12
i.globalKeydownCallback @ mediaelement-and-player.min.js?ver=4.2.6-78496d1:12

Pressing left or right key gives this different error:

mediaelement-and-player.min.js?ver=4.2.6-78496d1:12 Uncaught TypeError: Cannot read property 'focus' of null
    at Object.action (mediaelement-and-player.min.js?ver=4.2.6-78496d1:12)
    at e.value (mediaelement-and-player.min.js?ver=4.2.6-78496d1:12)
    at HTMLDocument.i.globalKeydownCallback (mediaelement-and-player.min.js?ver=4.2.6-78496d1:12)

I'm not sure if this bug is for all media players (such as video) or if it is just for the audio media player.

My browser is Chrome 70 and my OS is Windows 10 version 1803.

If you can't replicate the issue, contact me and I can share my code with you.

NOTE: this applies to Classic Editor, not Gutenberg.

[afercia]

@mikeybinns thanks and welcome to Trac! I can reproduce the errors on macOS too. I was able to reproduce the matches error also on the MediaElement.js current demo on ​http://www.mediaelementjs.com/ while the focus one seem to be fixed there.

MediaElement.js is an external library used by WordPress as media player. The version currently used in core is 4.2.6. We should make sure to report the issue upstream /Cc @rafa8626 :)

More details:
There are 2 focusable audio controls: the volume icon and the volume bar.

Volume icon:

• Up and Down arrow keys work
• Left and Right arrow keys: Uncaught TypeError: Cannot read property 'focus' of null

Volume bar:

• Up arrow key: Uncaught TypeError: Cannot read property 'matches' of null, also: the page scrolls
• Down arrow key: works
• Left and Right arrow keys: Uncaught TypeError: Cannot read property 'focus' of null

[afercia]

I see there's a related issue on the MediaElement.js GitHub: ​https://github.com/mediaelement/mediaelement/issues/2533

Once fixed upstream, it would be great for WordPress to update MediaElement.js /Cc @azaozz

[sabernhardt]

Some quick testing in Firefox shows that using Up and Down arrow keys raises/lowers volume now, without the errors, whether focus is on the volume icon or the bar.

The MediaElement.js GitHub issue reports that this was fixed in version 4.2.12. WordPress updated Media Element to 4.2.13 last October (for the November release).

More testing would be appreciated :)

[ryokuhi]

This ticket was discussed today during the accessiblity team's bug-scrub.
It apparently needs only some more testing, so we agreed to move it to the 5.7 milestone: this way, it can benefit from a little more exposure.
Feel free to test and add your results here!

[alexstine]

I was able to successfully change the volume with up, down, left, and right arrows without any warnings in console. Firefox is not near as accessible as Chrome, I guess this has something to do with the way Firefox renders the player compared to Chrome. Works well in both browsers though.

Thanks.

[alexstine]

My apologies for the above comment. I just learned today that Classic Editor and Gutenberg use different libraries for handling audio player.

I set this up again using Classic Editor but still had good results. Once I tab in to the Audio Player application, I can play, pause, change progress with arrow left/right, and change volume with arrow up/down. You do not have to focus on the actual sliders to do this. Also pressing Space key seems to allow you to play/pause.

I tested in both Chrome and Firefox using NV Access and it seems to work perfectly.

Thanks.

[alexstine]

Hello @mikeybinns,

Could you please try testing out the audio player in WordPress 5.6 to see if it is working as expected for screen readers? My tests shows it is working fine, hoping you can confirm or possibly spot something I've missed.

Thanks, Alex

[mikeybinns]

Hey @alexstine,

I didn't originally test for screen readers, I was just testing for keyboard accessibility.

I can confirm that as of WP 5.6, using the classic editor plugin for the old editing interface, I have no errors in the console. When the volume bar is selected, up and down arrow keys change the volume. Left and right arrows change the playback position. I tested with Chrome, New Edge, and Firefox.

The blocks editor uses the HTML5 audio player, which is different from the MediaElement.js code used in the old interface.

Thanks, Mikey.

[mikeybinns]

Hey @alexstine,

I didn't originally test for screen readers, I was just testing for keyboard accessibility.

I can confirm that as of WP 5.6, using the classic editor plugin for the old editing interface, I have no errors in the console. When the volume bar is selected, up and down arrow keys change the volume. Left and right arrows change the playback position. I tested with Chrome, New Edge, and Firefox.

The blocks editor uses the HTML5 audio player, which is different from the MediaElement.js code used in the old interface.

Thanks, Mikey.

[alexstine]

Thanks for confirming @mikeybinns.

I will close this out as resolved.