WordPress.org
Get WordPress

Make WordPress Core

Changeset 43829


Ignore:
Timestamp:
10/26/2018 07:13:25 AM (8 years ago)
Author:
pento
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)

Merges [42444] to the 5.0 branch.

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

Location:
branches/5.0
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • branches/5.0

  • branches/5.0/src/wp-includes/media-template.php

    r43718 r43829  
    7070        } else {
    7171                h = data.model.height;
    72         }
     72        }
    7373
    7474        if ( w ) {
    … …  
    104104        ?><#
    105105        <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    106         ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    107                 #> <?php echo $attr ?><#
     106        ?> if ( ! _.isUndefined( data.model.<?php echo $attr; ?> ) && data.model.<?php echo $attr; ?> ) {
     107                #> <?php echo $attr; ?><#
    108108        }
    109109        <?php endforeach ?>#>
    … …  
    409409                                        <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    410410                                </label>
    411                                 <label class="setting">
     411                                <div class="setting">
    412412                                        <span class="name"><?php _e( 'Uploaded By' ); ?></span>
    413413                                        <span class="value">{{ data.authorName }}</span>
    414                                 </label>
     414                                </div>
    415415                                <# if ( data.uploadedToTitle ) { #>
    416                                         <label class="setting">
     416                                        <div class="setting">
    417417                                                <span class="name"><?php _e( 'Uploaded To' ); ?></span>
    418418                                                <# if ( data.uploadedToLink ) { #>
    … …  
    421421                                                        <span class="value">{{ data.uploadedToTitle }}</span>
    422422                                                <# } #>
    423                                         </label>
     423                                        </div>
    424424                                <# } #>
    425425                                <div class="attachment-compat"></div>
    … …  
    10461046                                        }
    10471047                                #>
    1048                                 <label class="setting">
    1049                                         <span>SRC</span>
    1050                                         <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
     1048                                <div class="setting">
     1049                                        <label for="audio-source"><?php _e( 'URL' ); ?></label>
     1050                                        <input type="text" id="audio-source" readonly data-setting="src" value="{{ data.model.src }}" />
    10511051                                        <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
    1052                                 </label>
     1052                                </div>
    10531053                                <# } #>
    10541054                                <?php
    … …  
    10601060                                        }
    10611061                                #>
    1062                                 <label class="setting">
    1063                                         <span><?php echo strtoupper( $type ) ?></span>
    1064                                         <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
     1062                                <div class="setting">
     1063                                        <label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></span>
     1064                                        <input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
    10651065                                        <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
    1066                                 </label>
     1066                                </div>
    10671067                                <# } #>
    10681068                                <?php endforeach ?>
    … …  
    11291129                                        }
    11301130                                #>
    1131                                 <label class="setting">
    1132                                         <span>SRC</span>
    1133                                         <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
     1131                                <div class="setting">
     1132                                        <label for="video-source"><?php _e( 'URL' ); ?></label>
     1133                                        <input type="text" id="video-source" readonly data-setting="src" value="{{ data.model.src }}" />
    11341134                                        <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
    1135                                 </label>
     1135                                </div>
    11361136                                <# } #>
    11371137                                <?php foreach ( $video_types as $type ):
    … …  
    11411141                                        }
    11421142                                #>
    1143                                 <label class="setting">
    1144                                         <span><?php echo strtoupper( $type ) ?></span>
    1145                                         <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
     1143                                <div class="setting">
     1144                                        <label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></label>
     1145                                        <input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
    11461146                                        <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
    1147                                 </label>
     1147                                </div>
    11481148                                <# } #>
    11491149                                <?php endforeach ?>
    … …  
    11621162
    11631163                                <# if ( ! _.isEmpty( data.model.poster ) ) { #>
    1164                                 <label class="setting">
    1165                                         <span><?php _e( 'Poster Image' ); ?></span>
    1166                                         <input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
     1164                                <div class="setting">
     1165                                        <label for="poster-image"><?php _e( 'Poster Image' ); ?></label>
     1166                                        <input type="text" id="poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
    11671167                                        <button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
    1168                                 </label>
     1168                                </div>
    11691169                                <# } #>
    11701170                                <div class="setting preload">
    … …  
    11871187                                </label>
    11881188
    1189                                 <label class="setting" data-setting="content">
    1190                                         <span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
     1189                                <div class="setting" data-setting="content">
    11911190                                        <#
    11921191                                        var content = '';
    … …  
    11951194                                                _.each( tracks.toArray(), function (track) {
    11961195                                                        content += track.outerHTML; #>
    1197                                                 <p>
    1198                                                         <input class="content-track" type="text" value="{{ track.outerHTML }}" />
    1199                                                         <button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
    1200                                                 </p>
     1196                                                <label for="video-track"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
     1197                                                <input class="content-track" type="text" id="video-track" readonly value="{{ track.outerHTML }}" />
     1198                                                <button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
    12011199                                                <# } ); #>
    12021200                                        <# } else { #>
     1201                                        <span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
    12031202                                        <em><?php _e( 'There are no associated subtitles.' ); ?></em>
    12041203                                        <# } #>
    12051204                                        <textarea class="hidden content-setting">{{ content }}</textarea>
    1206                                 </label>
     1205                                </div>
    12071206                        </div>
    12081207                </div>
Note: See TracChangeset for help on using the changeset viewer.