[wp-trac] [WordPress Trac] #28820: Focus isn't clear when previewing an oEmbed from Add Media Panel

[WordPress Trac]

#28820: Focus isn't clear when previewing an oEmbed from Add Media Panel
------------------------------------+--------------------------------
 Reporter:  philipjohn              |       Owner:  afercia
     Type:  defect (bug)            |      Status:  assigned
 Priority:  normal                  |   Milestone:  4.2
Component:  Media                   |     Version:  3.9
 Severity:  normal                  |  Resolution:
 Keywords:  has-patch dev-feedback  |     Focuses:  ui, accessibility
------------------------------------+--------------------------------

Comment (by afercia):

 @drew: when embeds are rendered with MediaElement.js maybe we could try to
 override the focus style though maybe MediaElement.js should really
 provide its own, improved, style for focus. See attached patch and
 screenshots. Maybe the overrides should be moved to `wp-mediaelement.css`.

 For embeds rendered in iframes, as @celloexpressions pointed out, the
 focus enters the 3rd-party embed. Not sure, maybe we could try to inject
 some CSS in the iframe? and try to target focusable elements (if any) with
 `:focus`. Some embeds don't even have focusable controls, for example
 Ted.com.

 When 3rd parties provide their own flash player then I'm afraid it's up to
 the different flash plugin versions. The ActiveX version handle focus
 better, given that the 3rd party player actually takes care of handling
 focus. The NPAPI (PepperFlash too) version has well known issues with
 focus (since years and years...), not sure why sorry I'm really not an
 expert when it comes to flash.
 For example the wordpress.tv embed in IE works pretty well but with the
 NPAPI plugin in Firefox or PepperFlash in Chrome it's impossible to move
 focus to the flash player controls.

 MediaElement.js container focused: standard focus style

 [[Image(https://cldup.com/07Fk3y9o3w.png)]]

 MediaElement.js controls focused: yellow outline

 [[Image(https://cldup.com/wZs5p0LllG.png)]]

 Please notice maybe the volume "hint" message needs some attention:

 [[Image(https://cldup.com/zugTZhSSKi.png)]]

 For reference, the tested embeds:

 http://playground.html5rocks.com/samples/html5_misc/chrome_japan.ogv
 http://playground.html5rocks.com/samples/html5_misc/chrome_japan.webm
 http://playground.html5rocks.com/samples/html5_misc/chrome_japan.mp4
 http://videos.videopress.com/w0MiG12E/snow2-its-back-h2642_dvd.mp4
 http://youtu.be/VXa9tXcMhXQ
 https://www.youtube.com/watch?v=272aujSjIQs
 http://vimeo.com/70323400
 http://wordpress.tv/2014/04/16/introducing-wordpress-3-9-smith/
 http://www.ted.com/talks/dong_woo_jang_the_art_of_bow_making.html
 http://www.flickr.com/photos/effixe/5424743638/
 http://www.dailymotion.com/video/xy19cu_the-hangover-part-iii-official-
 teaser-trailer_shortfilms
 https://vine.co/v/hBFxTlV36Tg
 http://blip.tv/hipsterhood/hipsterhood-s2-e1-hipsters-with-
 hangovers-6619915
 http://open.spotify.com/track/4bz7uB4edifWKJXSDxwHcs
 https://soundcloud.com/itamarmsjunior/stevie-ray-vaughan-scuttle-1
 https://twitter.com/nacin/status/431875643089747968
 http://www.meetup.com/WordPress-Meetup-Milano/
 http://www.slideshare.net/haraldf/business-quotes-for-2011

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