From 0d6acf5b5be7aa533fc06dc077a580b3a98dba5e Mon Sep 17 00:00:00 2001
From: Scott Taylor <wonderboymusic@git.wordpress.org>
Date: Mon, 7 Apr 2014 22:27:06 +0000
Subject: [PATCH] Make playlist tracks keyboard-accessible.

Fixes #27644.



git-svn-id: https://develop.svn.wordpress.org/trunk@28023 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/js/mediaelement/wp-mediaelement.css | 5 +++++
 src/wp-includes/js/mediaelement/wp-playlist.js      | 2 ++
 src/wp-includes/media.php                           | 4 ++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/wp-includes/js/mediaelement/wp-mediaelement.css b/src/wp-includes/js/mediaelement/wp-mediaelement.css
index 4f75345b41..ce4a9f70c6 100644
--- a/src/wp-includes/js/mediaelement/wp-mediaelement.css
+++ b/src/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;
diff --git a/src/wp-includes/js/mediaelement/wp-playlist.js b/src/wp-includes/js/mediaelement/wp-playlist.js
index 094b5c58e4..b95730c7dd 100644
--- a/src/wp-includes/js/mediaelement/wp-playlist.js
+++ b/src/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();
 		},
diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php
index 604ba7e616..18666e8691 100644
--- a/src/wp-includes/media.php
+++ b/src/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>
 		<# } #>