WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 3 months ago

Last modified 7 weeks ago

#45141 closed defect (bug) (fixed)

Keyboard use bug in audio media player shortcode.

Reported by: mikeybinns Owned by: alexstine
Milestone: 5.7 Priority: normal
Severity: normal Version: 4.9.8
Component: Media Keywords:
Focuses: accessibility, javascript Cc:

Description (last modified by alexstine)

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.

Change History (16)

#1 @SergeyBiryukov
2 years ago

  • Component changed from Embeds to Media

#2 @afercia
2 years ago

  • Keywords needs-testing removed
  • Milestone changed from Awaiting Review to Future Release

@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.

http://cldup.com/BofaBrWbeo.png

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

#3 @afercia
2 years ago

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


2 years ago

#5 @sabernhardt
12 months ago

  • Keywords needs-testing added; needs-patch removed

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 :)

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


3 months ago

#7 @ryokuhi
3 months ago

  • Milestone changed from Future Release to 5.7

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!

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


3 months ago

#9 @alexstine
3 months ago

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.

#10 @alexstine
3 months ago

  • Owner set to alexstine
  • Status changed from new to accepted

#11 @alexstine
3 months ago

  • Description modified (diff)

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.

#12 @alexstine
3 months ago

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

#13 @mikeybinns
3 months ago

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.

#14 @mikeybinns
3 months ago

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.

#15 @alexstine
3 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

Thanks for confirming @mikeybinns.

I will close this out as resolved.

#16 @hellofromTonya
7 weeks ago

  • Keywords needs-testing removed
Note: See TracTickets for help on using tickets.