From e71a3d619300df66ae993ee946563e2d62db2f37 Mon Sep 17 00:00:00 2001
From: Adam Silverstein <adamsilverstein@earthboundhosting.com>
Date: Sat, 8 Sep 2018 04:20:24 +0000
Subject: [PATCH] Media: Improve display and accessibility of meta data in
 detail view.

* Add a `human_readable_duration` function including tests.
* Add 'pixels' after image width/height.
* Add screen reader text for durations.

Props Presskopp, kiranpotphode, milindmore22, stormrockwell, afercia.
Fixes #39667.


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


git-svn-id: http://core.svn.wordpress.org/trunk@43462 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-includes/functions.php      | 56 ++++++++++++++++++++++++++++++++++
 wp-includes/media-template.php | 28 +++++++++++++----
 wp-includes/media.php          |  3 +-
 wp-includes/version.php        |  2 +-
 4 files changed, 81 insertions(+), 8 deletions(-)

diff --git a/wp-includes/functions.php b/wp-includes/functions.php
index f612d8c59c..1433ca98f8 100644
--- a/wp-includes/functions.php
+++ b/wp-includes/functions.php
@@ -322,6 +322,62 @@ function size_format( $bytes, $decimals = 0 ) {
 	return false;
 }
 
+/**
+ * Convert a filelength to human readable format.
+ *
+ * @since 5.0
+ *
+ * @param string $filelength Duration will be in string format (HH:ii:ss) OR (ii:ss).
+ * @return boolean|string A human readable filelength string, false on failure.
+ */
+function human_readable_duration( $filelength = '' ) {
+	// Return false if filelength is empty or not in format.
+	if ( ( empty( $filelength ) || ! is_string( $filelength ) ) ) {
+		return false;
+	}
+
+	// Validate filelength format.
+	if ( ! ( (bool) preg_match( '/^(([0-3]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/', $filelength ) ) ) {
+		return false;
+	}
+
+	$human_readable_duration = array();
+
+	// Extract duration.
+	$durations      = array_reverse( explode( ':', $filelength ) );
+	$duration_count = count( $durations );
+
+	if ( 3 === $duration_count ) {
+		// Three parts: hours, minutes & seconds.
+		list( $second, $minute, $hour ) = $durations;
+	} elseif ( 2 === $duration_count ) {
+		// Two parts: minutes & seconds.
+		list( $second, $minute ) = $durations;
+	} else {
+		return false;
+	}
+
+	// Add the hour part to the string.
+	if ( ! empty( $hour ) && is_numeric( $hour ) ) {
+		/* translators: Time duration in hour or hours. */
+		$human_readable_duration[] = sprintf( _n( '%s hour', '%s hours', $hour ), (int) $hour );
+	}
+
+	// Add the minute part to the string.
+	if ( ! empty( $minute ) && is_numeric( $minute ) ) {
+		/* translators: Time duration in minute or minutes. */
+		$human_readable_duration[] = sprintf( _n( '%s minute', '%s minutes', $minute ), (int) $minute );
+	}
+
+	// Add the second part to the string.
+	if ( ! empty( $second ) && is_numeric( $second ) ) {
+		/* translators: Time duration in second or seconds. */
+		$human_readable_duration[] = sprintf( _n( '%s second', '%s seconds', $second ), (int) $second );
+	}
+
+	return implode( ', ', $human_readable_duration );
+}
+
 /**
  * Get the week start and end from the datetime or date string from MySQL.
  *
diff --git a/wp-includes/media-template.php b/wp-includes/media-template.php
index c5f272cc1a..fb44261cf1 100644
--- a/wp-includes/media-template.php
+++ b/wp-includes/media-template.php
@@ -371,12 +371,20 @@ function wp_print_media_templates() {
 				<div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
 				<# if ( 'image' === data.type && ! data.uploading ) { #>
 					<# if ( data.width && data.height ) { #>
-						<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
+						<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong>
+							<?php
+							/* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
+							printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
+							?>
+						</div>
 					<# } #>
 				<# } #>
 
-				<# if ( data.fileLength ) { #>
-					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
+				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
+					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong>
+						<span aria-hidden="true">{{ data.fileLength }}</span>
+						<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
+					</div>
 				<# } #>
 
 				<# if ( 'audio' === data.type && data.meta.bitrate ) { #>
@@ -547,7 +555,12 @@ function wp_print_media_templates() {
 				<div class="file-size">{{ data.filesizeHumanReadable }}</div>
 				<# if ( 'image' === data.type && ! data.uploading ) { #>
 					<# if ( data.width && data.height ) { #>
-						<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
+						<div class="dimensions">
+							<?php
+							/* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
+							printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
+							?>
+						</div>
 					<# } #>
 
 					<# if ( data.can.save && data.sizes ) { #>
@@ -555,8 +568,11 @@ function wp_print_media_templates() {
 					<# } #>
 				<# } #>
 
-				<# if ( data.fileLength ) { #>
-					<div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
+				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
+					<div class="file-length"><?php _e( 'Length:' ); ?>
+						<span aria-hidden="true">{{ data.fileLength }}</span>
+						<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
+					</div>
 				<# } #>
 
 				<# if ( ! data.uploading && data.can.remove ) { #>
diff --git a/wp-includes/media.php b/wp-includes/media.php
index f9dc9c4ebd..ec50703b33 100644
--- a/wp-includes/media.php
+++ b/wp-includes/media.php
@@ -3378,7 +3378,8 @@ function wp_prepare_attachment_for_js( $attachment ) {
 
 	if ( $meta && ( 'audio' === $type || 'video' === $type ) ) {
 		if ( isset( $meta['length_formatted'] ) ) {
-			$response['fileLength'] = $meta['length_formatted'];
+			$response['fileLength']              = $meta['length_formatted'];
+			$response['fileLengthHumanReadable'] = human_readable_duration( $meta['length_formatted'] );
 		}
 
 		$response['meta'] = array();
diff --git a/wp-includes/version.php b/wp-includes/version.php
index 29a818c73b..22ccc26007 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.0-alpha-43631';
+$wp_version = '5.0-alpha-43633';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.