[wp-trac] [WordPress Trac] #45141: Keyboard use bug in audio media player shortcode.

[WordPress Trac]

#45141: Keyboard use bug in audio media player shortcode.
---------------------------+----------------------------------------
 Reporter:  mikeybinns     |       Owner:  alexstine
     Type:  defect (bug)   |      Status:  accepted
 Priority:  normal         |   Milestone:  5.7
Component:  Media          |     Version:  4.9.8
 Severity:  normal         |  Resolution:
 Keywords:  needs-testing  |     Focuses:  accessibility, javascript
---------------------------+----------------------------------------

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

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

 NOTE: this applies to Classic Editor, not Gutenberg.

--

Comment (by 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/45141#comment:11>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform