WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/08/2018 04:19:40 AM (15 months ago)
Author:
adamsilverstein
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/media-template.php

    r43601 r43633  
    372372                <# if ( 'image' === data.type && ! data.uploading ) { #>
    373373                    <# if ( data.width && data.height ) { #>
    374                         <div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
     374                        <div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong>
     375                            <?php
     376                            /* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
     377                            printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
     378                            ?>
     379                        </div>
    375380                    <# } #>
    376381                <# } #>
    377382
    378                 <# if ( data.fileLength ) { #>
    379                     <div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
     383                <# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
     384                    <div class="file-length"><strong><?php _e( 'Length:' ); ?></strong>
     385                        <span aria-hidden="true">{{ data.fileLength }}</span>
     386                        <span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
     387                    </div>
    380388                <# } #>
    381389
     
    548556                <# if ( 'image' === data.type && ! data.uploading ) { #>
    549557                    <# if ( data.width && data.height ) { #>
    550                         <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
     558                        <div class="dimensions">
     559                            <?php
     560                            /* translators: 1: a number of pixels wide, 2: a number of pixels tall. */
     561                            printf( __( '%1$s by %2$s pixels' ), '{{ data.width }}', '{{ data.height }}' );
     562                            ?>
     563                        </div>
    551564                    <# } #>
    552565
     
    556569                <# } #>
    557570
    558                 <# if ( data.fileLength ) { #>
    559                     <div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
     571                <# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
     572                    <div class="file-length"><?php _e( 'Length:' ); ?>
     573                        <span aria-hidden="true">{{ data.fileLength }}</span>
     574                        <span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
     575                    </div>
    560576                <# } #>
    561577
Note: See TracChangeset for help on using the changeset viewer.