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

@@ -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.
  *

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 ) { #>
+				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
-					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
+					<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 ) { #>
+				<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
-					<div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
+					<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 ) { #>

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();

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.