Make playlist tracks keyboard-accessible.

Fixes #27644.


Built from https://develop.svn.wordpress.org/trunk@28023


git-svn-id: http://core.svn.wordpress.org/trunk@27853 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/mediaelement/wp-mediaelement.css

@@ -106,6 +106,11 @@
 	line-height: 1.5;
 }
 
+.wp-playlist-item .wp-playlist-caption {
+	text-decoration: none;
+	color: #000;
+}
+
 .wp-playlist-item-meta {
 	display: block;
 	font-size: 14px;

wp-includes/js/mediaelement/wp-playlist.js

@@ -107,6 +107,8 @@
 		},
 
 		clickTrack : function (e) {
+			e.preventDefault();
+
 			this.index = this.$( '.wp-playlist-item' ).index( e.currentTarget );
 			this.setCurrent();
 		},

wp-includes/media.php

@@ -1027,7 +1027,7 @@ function wp_underscore_playlist_templates() {
 </script>
 <script type="text/html" id="tmpl-wp-playlist-item">
 	<div class="wp-playlist-item">
-		<div class="wp-playlist-caption">
+		<a class="wp-playlist-caption" href="{{ data.src }}">
 			{{ data.index ? ( data.index + '. ' ) : '' }}
 			<# if ( data.caption ) { #>
 				{{ data.caption }}
@@ -1037,7 +1037,7 @@ function wp_underscore_playlist_templates() {
 				<span class="wp-playlist-item-artist"> &mdash; {{ data.meta.artist }}</span>
 				<# } #>
 			<# } #>
-		</div>
+		</a>
 		<# if ( data.meta.length_formatted ) { #>
 		<div class="wp-playlist-item-length">{{ data.meta.length_formatted }}</div>
 		<# } #>