WordPress.org
Get WordPress

Make WordPress Core

Changeset 43829


Ignore:
Timestamp:
10/26/2018 07:13:25 AM (5 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.