Accessibility: improve the "URL" and "Alt text" fields in the media modals.
Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into. Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized. - changes the URL field label to "Copy link" - moves the alt text field to the top as first field - avoids to set initial focus on the alt text field - adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial - adds `aria-describedby` to target the explanatory text - adjusts the CSS accordingly - updates the QUnit index.html file Props melchoyce, audrasjb, afercia. Fixes #41612. Built from https://develop.svn.wordpress.org/trunk@44900 git-svn-id: http://core.svn.wordpress.org/trunk@44731 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
parent
904365731a
commit
e9db7c48d2
|
|
@ -431,7 +431,8 @@
|
|||
.attachment-details .setting input[type="tel"],
|
||||
.attachment-details .setting input[type="url"],
|
||||
.attachment-details .setting textarea,
|
||||
.attachment-details .setting .value {
|
||||
.attachment-details .setting .value,
|
||||
.attachment-details .setting + .description {
|
||||
box-sizing: border-box;
|
||||
margin: 1px;
|
||||
width: 65%;
|
||||
|
|
@ -439,11 +440,18 @@
|
|||
}
|
||||
|
||||
.media-sidebar .setting .value,
|
||||
.attachment-details .setting .value {
|
||||
.attachment-details .setting .value,
|
||||
.attachment-details .setting + .description {
|
||||
margin: 0 1px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.attachment-details .setting + .description {
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.media-sidebar .setting textarea,
|
||||
.attachment-details .setting textarea,
|
||||
.compat-item .field textarea {
|
||||
|
|
@ -2040,6 +2048,15 @@
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.media-embed .setting.has-description {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.media-embed .description {
|
||||
clear: both;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .setting {
|
||||
float: none;
|
||||
width: auto;
|
||||
|
|
@ -2069,11 +2086,17 @@
|
|||
|
||||
.image-details .embed-media-settings .setting input.link-to-custom,
|
||||
.image-details .embed-media-settings .link-target,
|
||||
.image-details .embed-media-settings .custom-size {
|
||||
.image-details .embed-media-settings .custom-size,
|
||||
.image-details .description {
|
||||
margin-right: 27%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.image-details .description {
|
||||
font-style: normal;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .link-target {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -431,7 +431,8 @@
|
|||
.attachment-details .setting input[type="tel"],
|
||||
.attachment-details .setting input[type="url"],
|
||||
.attachment-details .setting textarea,
|
||||
.attachment-details .setting .value {
|
||||
.attachment-details .setting .value,
|
||||
.attachment-details .setting + .description {
|
||||
box-sizing: border-box;
|
||||
margin: 1px;
|
||||
width: 65%;
|
||||
|
|
@ -439,11 +440,18 @@
|
|||
}
|
||||
|
||||
.media-sidebar .setting .value,
|
||||
.attachment-details .setting .value {
|
||||
.attachment-details .setting .value,
|
||||
.attachment-details .setting + .description {
|
||||
margin: 0 1px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.attachment-details .setting + .description {
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.media-sidebar .setting textarea,
|
||||
.attachment-details .setting textarea,
|
||||
.compat-item .field textarea {
|
||||
|
|
@ -2040,6 +2048,15 @@
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.media-embed .setting.has-description {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.media-embed .description {
|
||||
clear: both;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .setting {
|
||||
float: none;
|
||||
width: auto;
|
||||
|
|
@ -2069,11 +2086,17 @@
|
|||
|
||||
.image-details .embed-media-settings .setting input.link-to-custom,
|
||||
.image-details .embed-media-settings .link-target,
|
||||
.image-details .embed-media-settings .custom-size {
|
||||
.image-details .embed-media-settings .custom-size,
|
||||
.image-details .description {
|
||||
margin-left: 27%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.image-details .description {
|
||||
font-style: normal;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.image-details .embed-media-settings .link-target {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8470,23 +8470,10 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp
|
|||
rerenderOnModelChange: false
|
||||
});
|
||||
|
||||
this.on( 'ready', this.initialFocus );
|
||||
// Call 'initialize' directly on the parent class.
|
||||
Attachment.prototype.initialize.apply( this, arguments );
|
||||
},
|
||||
|
||||
initialFocus: function() {
|
||||
if ( ! wp.media.isTouchDevice ) {
|
||||
/*
|
||||
Previously focused the first ':input' (the readonly URL text field).
|
||||
Since the first ':input' is now a button (delete/trash): when pressing
|
||||
spacebar on an attachment, Firefox fires deleteAttachment/trashAttachment
|
||||
as soon as focus is moved. Explicitly target the first text field for now.
|
||||
@todo change initial focus logic, also for accessibility.
|
||||
*/
|
||||
this.$( 'input[type="text"]' ).eq( 0 ).focus();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @param {Object} event
|
||||
*/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -161,6 +161,18 @@ function wp_print_media_templates() {
|
|||
if ( $is_IE && strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE 7' ) !== false ) {
|
||||
$class .= ' ie7';
|
||||
}
|
||||
|
||||
$alt_text_description = sprintf(
|
||||
/* translators: 1: link start tag, 2: accessibility text, 3: link end tag */
|
||||
__( 'Describe %1$sthe purpose of the image%2$s%3$s. Leave empty if the image is purely decorative.' ),
|
||||
'<a href="' . esc_url( 'https://www.w3.org/WAI/tutorials/images/decision-tree' ) . '" target="_blank" rel="noopener noreferrer">',
|
||||
sprintf(
|
||||
'<span class="screen-reader-text"> %s</span>',
|
||||
/* translators: accessibility text */
|
||||
__( '(opens in a new tab)' )
|
||||
),
|
||||
'</a>'
|
||||
);
|
||||
?>
|
||||
<!--[if lte IE 8]>
|
||||
<style>
|
||||
|
|
@ -404,11 +416,14 @@ function wp_print_media_templates() {
|
|||
</div>
|
||||
|
||||
<div class="settings">
|
||||
<label class="setting" data-setting="url">
|
||||
<span class="name"><?php _e( 'URL' ); ?></span>
|
||||
<input type="text" value="{{ data.url }}" readonly />
|
||||
</label>
|
||||
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
|
||||
<# if ( 'image' === data.type ) { #>
|
||||
<label class="setting" data-setting="alt">
|
||||
<span class="name"><?php _e( 'Alternative Text' ); ?></span>
|
||||
<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
|
||||
</label>
|
||||
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
|
||||
<# } #>
|
||||
<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
|
||||
<label class="setting" data-setting="title">
|
||||
<span class="name"><?php _e( 'Title' ); ?></span>
|
||||
|
|
@ -432,12 +447,6 @@ function wp_print_media_templates() {
|
|||
<span class="name"><?php _e( 'Caption' ); ?></span>
|
||||
<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
|
||||
</label>
|
||||
<# if ( 'image' === data.type ) { #>
|
||||
<label class="setting" data-setting="alt">
|
||||
<span class="name"><?php _e( 'Alt Text' ); ?></span>
|
||||
<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
|
||||
</label>
|
||||
<# } #>
|
||||
<label class="setting" data-setting="description">
|
||||
<span class="name"><?php _e( 'Description' ); ?></span>
|
||||
<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
|
||||
|
|
@ -456,6 +465,10 @@ function wp_print_media_templates() {
|
|||
<# } #>
|
||||
</div>
|
||||
<# } #>
|
||||
<label class="setting" data-setting="url">
|
||||
<span class="name"><?php _e( 'Copy Link' ); ?></span>
|
||||
<input type="text" value="{{ data.url }}" readonly />
|
||||
</label>
|
||||
<div class="attachment-compat"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -595,11 +608,14 @@ function wp_print_media_templates() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<label class="setting" data-setting="url">
|
||||
<span class="name"><?php _e( 'URL' ); ?></span>
|
||||
<input type="text" value="{{ data.url }}" readonly />
|
||||
</label>
|
||||
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
|
||||
<# if ( 'image' === data.type ) { #>
|
||||
<label class="setting" data-setting="alt">
|
||||
<span class="name"><?php _e( 'Alt Text' ); ?></span>
|
||||
<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
|
||||
</label>
|
||||
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
|
||||
<# } #>
|
||||
<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
|
||||
<label class="setting" data-setting="title">
|
||||
<span class="name"><?php _e( 'Title' ); ?></span>
|
||||
|
|
@ -623,16 +639,14 @@ function wp_print_media_templates() {
|
|||
<span class="name"><?php _e( 'Caption' ); ?></span>
|
||||
<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
|
||||
</label>
|
||||
<# if ( 'image' === data.type ) { #>
|
||||
<label class="setting" data-setting="alt">
|
||||
<span class="name"><?php _e( 'Alt Text' ); ?></span>
|
||||
<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
|
||||
</label>
|
||||
<# } #>
|
||||
<label class="setting" data-setting="description">
|
||||
<span class="name"><?php _e( 'Description' ); ?></span>
|
||||
<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
|
||||
</label>
|
||||
<label class="setting" data-setting="url">
|
||||
<span class="name"><?php _e( 'Copy Link' ); ?></span>
|
||||
<input type="text" value="{{ data.url }}" readonly />
|
||||
</label>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl-media-selection">
|
||||
|
|
@ -882,6 +896,12 @@ function wp_print_media_templates() {
|
|||
<img src="{{ data.model.url }}" draggable="false" alt="" />
|
||||
</div>
|
||||
|
||||
<label class="setting alt-text has-description">
|
||||
<span><?php _e( 'Alternative Text' ); ?></span>
|
||||
<input type="text" data-setting="alt" aria-describedby="alt-text-description" />
|
||||
</label>
|
||||
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
|
||||
|
||||
<?php
|
||||
/** This filter is documented in wp-admin/includes/media.php */
|
||||
if ( ! apply_filters( 'disable_captions', '' ) ) :
|
||||
|
|
@ -892,11 +912,6 @@ function wp_print_media_templates() {
|
|||
</label>
|
||||
<?php endif; ?>
|
||||
|
||||
<label class="setting alt-text">
|
||||
<span><?php _e( 'Alt Text' ); ?></span>
|
||||
<input type="text" data-setting="alt" />
|
||||
</label>
|
||||
|
||||
<div class="setting align">
|
||||
<span><?php _e( 'Align' ); ?></span>
|
||||
<div class="button-group button-large" data-setting="align">
|
||||
|
|
@ -948,6 +963,12 @@ function wp_print_media_templates() {
|
|||
</div>
|
||||
</div>
|
||||
<div class="column-settings">
|
||||
<label class="setting alt-text has-description">
|
||||
<span><?php _e( 'Alternative Text' ); ?></span>
|
||||
<input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
|
||||
</label>
|
||||
<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
|
||||
|
||||
<?php
|
||||
/** This filter is documented in wp-admin/includes/media.php */
|
||||
if ( ! apply_filters( 'disable_captions', '' ) ) :
|
||||
|
|
@ -958,11 +979,6 @@ function wp_print_media_templates() {
|
|||
</label>
|
||||
<?php endif; ?>
|
||||
|
||||
<label class="setting alt-text">
|
||||
<span><?php _e( 'Alternative Text' ); ?></span>
|
||||
<input type="text" data-setting="alt" value="{{ data.model.alt }}" />
|
||||
</label>
|
||||
|
||||
<h2><?php _e( 'Display Settings' ); ?></h2>
|
||||
<div class="setting align">
|
||||
<span><?php _e( 'Align' ); ?></span>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.2-alpha-44899';
|
||||
$wp_version = '5.2-alpha-44900';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue