WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
01/14/2018 04:38:47 PM (7 years ago)
Author:
afercia
Message:

Accessibility: Media: Improve the usage of a few label elements in the media templates.

Label elements should only be used for labelable elements.

  • Uploaded By and Uploaded To aren't form controls and shouldn't be associated with labels
  • changes the labels for media source, alternate sources, poster image, and tracks to solve a layout issue and explicitly associate the labels to their form fields (previously, the labels were wrapping also the Remove buttons)

Props Presskopp, afercia.
Fixes #38759, #40468.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/media-template.php

    r42343 r42444  
    7676    } else {
    7777        h = data.model.height;
    78      }
     78    }
    7979
    8080    if ( w ) {
    … …  
    121121    foreach ( array( 'autoplay', 'loop' ) as $attr ) :
    122122    ?>
    123      if ( ! _.isUndefined( data.model.<?php echo $attr; ?> ) && data.model.<?php echo $attr; ?> ) {
     123    if ( ! _.isUndefined( data.model.<?php echo $attr; ?> ) && data.model.<?php echo $attr; ?> ) {
    124124        #> <?php echo $attr; ?><#
    125125    }
    … …  
    435435                    <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    436436                </label>
    437                 <label class="setting">
     437                <div class="setting">
    438438                    <span class="name"><?php _e( 'Uploaded By' ); ?></span>
    439439                    <span class="value">{{ data.authorName }}</span>
    440                 </label>
     440                </div>
    441441                <# if ( data.uploadedToTitle ) { #>
    442                     <label class="setting">
     442                    <div class="setting">
    443443                        <span class="name"><?php _e( 'Uploaded To' ); ?></span>
    444444                        <# if ( data.uploadedToLink ) { #>
    … …  
    447447                            <span class="value">{{ data.uploadedToTitle }}</span>
    448448                        <# } #>
    449                     </label>
     449                    </div>
    450450                <# } #>
    451451                <div class="attachment-compat"></div>
    … …  
    10851085                    }
    10861086                #>
    1087                 <label class="setting">
    1088                     <span>SRC</span>
    1089                     <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
     1087                <div class="setting">
     1088                    <label for="audio-source"><?php _e( 'URL' ); ?></label>
     1089                    <input type="text" id="audio-source" readonly data-setting="src" value="{{ data.model.src }}" />
    10901090                    <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
    1091                 </label>
     1091                </div>
    10921092                <# } #>
    10931093                <?php
    … …  
    11001100                    }
    11011101                #>
    1102                 <label class="setting">
    1103                     <span><?php echo strtoupper( $type ); ?></span>
    1104                     <input type="text" disabled="disabled" data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
     1102                <div class="setting">
     1103                    <label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></span>
     1104                    <input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
    11051105                    <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
    1106                 </label>
     1106                </div>
    11071107                <# } #>
    11081108                <?php endforeach ?>
    … …  
    11691169                    }
    11701170                #>
    1171                 <label class="setting">
    1172                     <span>SRC</span>
    1173                     <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
     1171                <div class="setting">
     1172                    <label for="video-source"><?php _e( 'URL' ); ?></label>
     1173                    <input type="text" id="video-source" readonly data-setting="src" value="{{ data.model.src }}" />
    11741174                    <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
    1175                 </label>
     1175                </div>
    11761176                <# } #>
    11771177                <?php
    … …  
    11831183                    }
    11841184                #>
    1185                 <label class="setting">
    1186                     <span><?php echo strtoupper( $type ); ?></span>
    1187                     <input type="text" disabled="disabled" data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
     1185                <div class="setting">
     1186                    <label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></label>
     1187                    <input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
    11881188                    <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
    1189                 </label>
     1189                </div>
    11901190                <# } #>
    11911191                <?php endforeach ?>
    … …  
    12041204
    12051205                <# if ( ! _.isEmpty( data.model.poster ) ) { #>
    1206                 <label class="setting">
    1207                     <span><?php _e( 'Poster Image' ); ?></span>
    1208                     <input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
     1206                <div class="setting">
     1207                    <label for="poster-image"><?php _e( 'Poster Image' ); ?></label>
     1208                    <input type="text" id="poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
    12091209                    <button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
    1210                 </label>
     1210                </div>
    12111211                <# } #>
    12121212                <div class="setting preload">
    … …  
    12291229                </label>
    12301230
    1231                 <label class="setting" data-setting="content">
    1232                     <span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
     1231                <div class="setting" data-setting="content">
    12331232                    <#
    12341233                    var content = '';
    … …  
    12371236                        _.each( tracks.toArray(), function (track) {
    12381237                            content += track.outerHTML; #>
    1239                         <p>
    1240                             <input class="content-track" type="text" value="{{ track.outerHTML }}" />
    1241                             <button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
    1242                         </p>
     1238                        <label for="video-track"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
     1239                        <input class="content-track" type="text" id="video-track" readonly value="{{ track.outerHTML }}" />
     1240                        <button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
    12431241                        <# } ); #>
    12441242                    <# } else { #>
     1243                    <span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
    12451244                    <em><?php _e( 'There are no associated subtitles.' ); ?></em>
    12461245                    <# } #>
    12471246                    <textarea class="hidden content-setting">{{ content }}</textarea>
    1248                 </label>
     1247                </div>
    12491248            </div>
    12501249        </div>
Note: See TracChangeset for help on using the changeset viewer.