WordPress.org

Make WordPress Core

Opened 12 months ago

Last modified 12 months ago

#45141 new defect (bug)

Keyboard use bug in audio media player shortcode.

Reported by: mikeybinns Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.9.8
Component: Media Keywords: needs-patch
Focuses: accessibility, javascript Cc:
PR Number:

Description

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.

Change History (4)

#1 @SergeyBiryukov
12 months ago

  • Component changed from Embeds to Media

#2 @afercia
12 months 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
12 months 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.


12 months ago

Note: See TracTickets for help on using tickets.