Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-26 06:45:07 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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.

Built from https://develop.svn.wordpress.org/trunk@42444


git-svn-id: http://core.svn.wordpress.org/trunk@42274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2018-01-14 16:39:47 +00:00
parent 239da4c1e6
commit 3fb8eee9fc
2 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
wp-includes/media-template.php
View File

@ -75,7 +75,7 @@ function wp_underscore_video_template() {
h = Math.ceil( ( data.model.height * w ) / data.model.width ); h = Math.ceil( ( data.model.height * w ) / data.model.width );
} else { } else {
h = data.model.height; h = data.model.height;
} }
if ( w ) { if ( w ) {
w_rule = 'width: ' + w + 'px; '; w_rule = 'width: ' + w + 'px; ';
@ -120,7 +120,7 @@ function wp_underscore_video_template() {
<?php <?php
foreach ( array( 'autoplay', 'loop' ) as $attr ) : foreach ( array( 'autoplay', 'loop' ) as $attr ) :
?> ?>
if ( ! _.isUndefined( data.model.<?php echo $attr; ?> ) && data.model.<?php echo $attr; ?> ) { if ( ! _.isUndefined( data.model.<?php echo $attr; ?> ) && data.model.<?php echo $attr; ?> ) {
#> <?php echo $attr; ?><# #> <?php echo $attr; ?><#
} }
<?php endforeach ?>#> <?php endforeach ?>#>
@ -434,19 +434,19 @@ function wp_print_media_templates() {
<span class="name"><?php _e( 'Description' ); ?></span> <span class="name"><?php _e( 'Description' ); ?></span>
<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea> <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
</label> </label>
<label class="setting"> <div class="setting">
<span class="name"><?php _e( 'Uploaded By' ); ?></span> <span class="name"><?php _e( 'Uploaded By' ); ?></span>
<span class="value">{{ data.authorName }}</span> <span class="value">{{ data.authorName }}</span>
</label> </div>
<# if ( data.uploadedToTitle ) { #> <# if ( data.uploadedToTitle ) { #>
<label class="setting"> <div class="setting">
<span class="name"><?php _e( 'Uploaded To' ); ?></span> <span class="name"><?php _e( 'Uploaded To' ); ?></span>
<# if ( data.uploadedToLink ) { #> <# if ( data.uploadedToLink ) { #>
<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span> <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
<# } else { #> <# } else { #>
<span class="value">{{ data.uploadedToTitle }}</span> <span class="value">{{ data.uploadedToTitle }}</span>
<# } #> <# } #>
</label> </div>
<# } #> <# } #>
<div class="attachment-compat"></div> <div class="attachment-compat"></div>
</div> </div>
@ -1084,11 +1084,11 @@ function wp_print_media_templates() {
delete html5types[ ext ]; delete html5types[ ext ];
} }
#> #>
<label class="setting"> <div class="setting">
<span>SRC</span> <label for="audio-source"><?php _e( 'URL' ); ?></label>
<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" /> <input type="text" id="audio-source" readonly data-setting="src" value="{{ data.model.src }}" />
<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button> <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
</label> </div>
<# } #> <# } #>
<?php <?php
@ -1099,11 +1099,11 @@ function wp_print_media_templates() {
delete html5types.<?php echo $type; ?>; delete html5types.<?php echo $type; ?>;
} }
#> #>
<label class="setting"> <div class="setting">
<span><?php echo strtoupper( $type ); ?></span> <label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></span>
<input type="text" disabled="disabled" data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" /> <input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
<button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button> <button type="button" class="button-link remove-setting"><?php _e( 'Remove audio source' ); ?></button>
</label> </div>
<# } #> <# } #>
<?php endforeach ?> <?php endforeach ?>
@ -1168,11 +1168,11 @@ function wp_print_media_templates() {
delete html5types[ ext ]; delete html5types[ ext ];
} }
#> #>
<label class="setting"> <div class="setting">
<span>SRC</span> <label for="video-source"><?php _e( 'URL' ); ?></label>
<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" /> <input type="text" id="video-source" readonly data-setting="src" value="{{ data.model.src }}" />
<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button> <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
</label> </div>
<# } #> <# } #>
<?php <?php
foreach ( $video_types as $type ) : foreach ( $video_types as $type ) :
@ -1182,11 +1182,11 @@ function wp_print_media_templates() {
delete html5types.<?php echo $type; ?>; delete html5types.<?php echo $type; ?>;
} }
#> #>
<label class="setting"> <div class="setting">
<span><?php echo strtoupper( $type ); ?></span> <label for="<?php echo $type . '-source'; ?>"><?php echo strtoupper( $type ); ?></label>
<input type="text" disabled="disabled" data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" /> <input type="text" id="<?php echo $type . '-source'; ?>" readonly data-setting="<?php echo $type; ?>" value="{{ data.model.<?php echo $type; ?> }}" />
<button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button> <button type="button" class="button-link remove-setting"><?php _e( 'Remove video source' ); ?></button>
</label> </div>
<# } #> <# } #>
<?php endforeach ?> <?php endforeach ?>
</div> </div>
@ -1203,11 +1203,11 @@ function wp_print_media_templates() {
<# } #> <# } #>
<# if ( ! _.isEmpty( data.model.poster ) ) { #> <# if ( ! _.isEmpty( data.model.poster ) ) { #>
<label class="setting"> <div class="setting">
<span><?php _e( 'Poster Image' ); ?></span> <label for="poster-image"><?php _e( 'Poster Image' ); ?></label>
<input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" /> <input type="text" id="poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
<button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button> <button type="button" class="button-link remove-setting"><?php _e( 'Remove poster image' ); ?></button>
</label> </div>
<# } #> <# } #>
<div class="setting preload"> <div class="setting preload">
<span><?php _e( 'Preload' ); ?></span> <span><?php _e( 'Preload' ); ?></span>
@ -1228,24 +1228,23 @@ function wp_print_media_templates() {
<span><?php _e( 'Loop' ); ?></span> <span><?php _e( 'Loop' ); ?></span>
</label> </label>
<label class="setting" data-setting="content"> <div class="setting" data-setting="content">
<span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
<# <#
var content = ''; var content = '';
if ( ! _.isEmpty( data.model.content ) ) { if ( ! _.isEmpty( data.model.content ) ) {
var tracks = jQuery( data.model.content ).filter( 'track' ); var tracks = jQuery( data.model.content ).filter( 'track' );
_.each( tracks.toArray(), function (track) { _.each( tracks.toArray(), function (track) {
content += track.outerHTML; #> content += track.outerHTML; #>
<p> <label for="video-track"><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
<input class="content-track" type="text" value="{{ track.outerHTML }}" /> <input class="content-track" type="text" id="video-track" readonly value="{{ track.outerHTML }}" />
<button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button> <button type="button" class="button-link remove-setting remove-track"><?php _ex( 'Remove video track', 'media' ); ?></button>
</p>
<# } ); #> <# } ); #>
<# } else { #> <# } else { #>
<span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
<em><?php _e( 'There are no associated subtitles.' ); ?></em> <em><?php _e( 'There are no associated subtitles.' ); ?></em>
<# } #> <# } #>
<textarea class="hidden content-setting">{{ content }}</textarea> <textarea class="hidden content-setting">{{ content }}</textarea>
</label> </div>
</div> </div>
</div> </div>
</script> </script>

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.0-alpha-42443'; $wp_version = '5.0-alpha-42444';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.