Accessibility: Remove the title attributes from the old Media UI.

Also, adds better indication and attributes for the required form fields.
Moves some styles to `deprecated-media.css`.

Props andg, afercia.
Fixes #34944.
Built from https://develop.svn.wordpress.org/trunk@36879


git-svn-id: http://core.svn.wordpress.org/trunk@36846 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2016-03-07 22:29:26 +00:00
parent d59fdfd951
commit 34ab7ae5ac
10 changed files with 48 additions and 27 deletions

View File

@ -837,6 +837,7 @@ hr {
} }
abbr.required, abbr.required,
span.required,
.file-error, .file-error,
.widget-control-remove:hover, .widget-control-remove:hover,
.row-actions .delete a:hover, .row-actions .delete a:hover,

File diff suppressed because one or more lines are too long

View File

@ -837,6 +837,7 @@ hr {
} }
abbr.required, abbr.required,
span.required,
.file-error, .file-error,
.widget-control-remove:hover, .widget-control-remove:hover,
.row-actions .delete a:hover, .row-actions .delete a:hover,

File diff suppressed because one or more lines are too long

View File

@ -152,7 +152,8 @@ thead.media-item-info tr {
border: 8px solid #fff; border: 8px solid #fff;
} }
abbr.required { abbr.required,
span.required {
text-decoration: none; text-decoration: none;
border: none; border: none;
} }
@ -364,9 +365,14 @@ h4.media-sub-title {
} }
p.media-types { p.media-types {
margin: 0;
padding: 1em; padding: 1em;
} }
p.media-types-required-info {
padding-top: 0;
}
tr.not-image { tr.not-image {
display: none; display: none;
} }

File diff suppressed because one or more lines are too long

View File

@ -152,7 +152,8 @@ thead.media-item-info tr {
border: 8px solid #fff; border: 8px solid #fff;
} }
abbr.required { abbr.required,
span.required {
text-decoration: none; text-decoration: none;
border: none; border: none;
} }
@ -364,9 +365,14 @@ h4.media-sub-title {
} }
p.media-types { p.media-types {
margin: 0;
padding: 1em; padding: 1em;
} }
p.media-types-required-info {
padding-top: 0;
}
tr.not-image { tr.not-image {
display: none; display: none;
} }

File diff suppressed because one or more lines are too long

View File

@ -1464,8 +1464,9 @@ function get_media_item( $attachment_id, $args = null ) {
$item .= " $item .= "
</thead> </thead>
<tbody> <tbody>
<tr><td colspan='2' class='imgedit-response' id='imgedit-response-$post->ID'></td></tr> <tr><td colspan='2' class='imgedit-response' id='imgedit-response-$post->ID'></td></tr>\n
<tr><td style='display:none' colspan='2' class='image-editor' id='image-editor-$post->ID'></td></tr>\n"; <tr><td style='display:none' colspan='2' class='image-editor' id='image-editor-$post->ID'></td></tr>\n
<tr><td colspan='2'><p class='media-types media-types-required-info'>" . sprintf( __( 'Required fields are marked %s' ), '<span class="required">*</span>' ) . "</p></td></tr>\n";
$defaults = array( $defaults = array(
'input' => 'text', 'input' => 'text',
@ -1537,12 +1538,13 @@ function get_media_item( $attachment_id, $args = null ) {
continue; continue;
} }
$required = $field['required'] ? '<span class="alignright"><abbr title="required" class="required">*</abbr></span>' : ''; $required = $field['required'] ? '<span class="required">*</span>' : '';
$aria_required = $field['required'] ? " aria-required='true' " : ''; $required_attr = $field['required'] ? ' required' : '';
$aria_required = $field['required'] ? " aria-required='true'" : '';
$class = $id; $class = $id;
$class .= $field['required'] ? ' form-required' : ''; $class .= $field['required'] ? ' form-required' : '';
$item .= "\t\t<tr class='$class'>\n\t\t\t<th scope='row' class='label'><label for='$name'><span class='alignleft'>{$field['label']}</span>$required<br class='clear' /></label></th>\n\t\t\t<td class='field'>"; $item .= "\t\t<tr class='$class'>\n\t\t\t<th scope='row' class='label'><label for='$name'><span class='alignleft'>{$field['label']}{$required}</span><br class='clear' /></label></th>\n\t\t\t<td class='field'>";
if ( !empty( $field[ $field['input'] ] ) ) if ( !empty( $field[ $field['input'] ] ) )
$item .= $field[ $field['input'] ]; $item .= $field[ $field['input'] ];
elseif ( $field['input'] == 'textarea' ) { elseif ( $field['input'] == 'textarea' ) {
@ -1551,9 +1553,9 @@ function get_media_item( $attachment_id, $args = null ) {
$field['value'] = htmlspecialchars( $field['value'], ENT_QUOTES ); $field['value'] = htmlspecialchars( $field['value'], ENT_QUOTES );
} }
// Post_excerpt is already escaped by sanitize_post() in get_attachment_fields_to_edit(). // Post_excerpt is already escaped by sanitize_post() in get_attachment_fields_to_edit().
$item .= "<textarea id='$name' name='$name' $aria_required>" . $field['value'] . '</textarea>'; $item .= "<textarea id='$name' name='$name'{$required_attr}{$aria_required}>" . $field['value'] . '</textarea>';
} else { } else {
$item .= "<input type='text' class='text' id='$name' name='$name' value='" . esc_attr( $field['value'] ) . "' $aria_required />"; $item .= "<input type='text' class='text' id='$name' name='$name' value='" . esc_attr( $field['value'] ) . "'{$required_attr}{$aria_required} />";
} }
if ( !empty( $field['helps'] ) ) if ( !empty( $field['helps'] ) )
$item .= "<p class='help'>" . join( "</p>\n<p class='help'>", array_unique( (array) $field['helps'] ) ) . '</p>'; $item .= "<p class='help'>" . join( "</p>\n<p class='help'>", array_unique( (array) $field['helps'] ) ) . '</p>';
@ -1690,8 +1692,9 @@ function get_compat_media_markup( $attachment_id, $args = null ) {
} }
$readonly = ! $user_can_edit && ! empty( $field['taxonomy'] ) ? " readonly='readonly' " : ''; $readonly = ! $user_can_edit && ! empty( $field['taxonomy'] ) ? " readonly='readonly' " : '';
$required = $field['required'] ? '<span class="alignright"><abbr title="required" class="required">*</abbr></span>' : ''; $required = $field['required'] ? '<span class="required">*</span>' : '';
$aria_required = $field['required'] ? " aria-required='true' " : ''; $required_attr = $field['required'] ? ' required' : '';
$aria_required = $field['required'] ? " aria-required='true'" : '';
$class = 'compat-field-' . $id; $class = 'compat-field-' . $id;
$class .= $field['required'] ? ' form-required' : ''; $class .= $field['required'] ? ' form-required' : '';
@ -1706,9 +1709,9 @@ function get_compat_media_markup( $attachment_id, $args = null ) {
// sanitize_post() skips the post_content when user_can_richedit. // sanitize_post() skips the post_content when user_can_richedit.
$field['value'] = htmlspecialchars( $field['value'], ENT_QUOTES ); $field['value'] = htmlspecialchars( $field['value'], ENT_QUOTES );
} }
$item .= "<textarea id='$id_attr' name='$name' $aria_required>" . $field['value'] . '</textarea>'; $item .= "<textarea id='$id_attr' name='$name'{$required_attr}{$aria_required}>" . $field['value'] . '</textarea>';
} else { } else {
$item .= "<input type='text' class='text' id='$id_attr' name='$name' value='" . esc_attr( $field['value'] ) . "' $readonly $aria_required />"; $item .= "<input type='text' class='text' id='$id_attr' name='$name' value='" . esc_attr( $field['value'] ) . "' $readonly{$required_attr}{$aria_required} />";
} }
if ( !empty( $field['helps'] ) ) if ( !empty( $field['helps'] ) )
$item .= "<p class='help'>" . join( "</p>\n<p class='help'>", array_unique( (array) $field['helps'] ) ) . '</p>'; $item .= "<p class='help'>" . join( "</p>\n<p class='help'>", array_unique( (array) $field['helps'] ) ) . '</p>';
@ -1732,8 +1735,12 @@ function get_compat_media_markup( $attachment_id, $args = null ) {
if ( !empty( $form_fields['_final'] ) ) if ( !empty( $form_fields['_final'] ) )
$item .= "\t\t<tr class='final'><td colspan='2'>{$form_fields['_final']}</td></tr>\n"; $item .= "\t\t<tr class='final'><td colspan='2'>{$form_fields['_final']}</td></tr>\n";
if ( $item )
$item = '<table class="compat-attachment-fields">' . $item . '</table>'; if ( $item ) {
$item = '<p class="media-types media-types-required-info">' .
sprintf( __( 'Required fields are marked %s' ), '<span class="required">*</span>' ) . '</p>
<table class="compat-attachment-fields">' . $item . '</table>';
}
foreach ( $hidden_fields as $hidden_field => $value ) { foreach ( $hidden_fields as $hidden_field => $value ) {
$item .= '<input type="hidden" name="' . esc_attr( $hidden_field ) . '" value="' . esc_attr( $value ) . '" />' . "\n"; $item .= '<input type="hidden" name="' . esc_attr( $hidden_field ) . '" value="' . esc_attr( $value ) . '" />' . "\n";
@ -2111,7 +2118,7 @@ var addExtImage = {
t.width = t.height = ''; t.width = t.height = '';
document.getElementById('go_button').style.color = '#bbb'; document.getElementById('go_button').style.color = '#bbb';
if ( ! document.forms[0].src.value ) if ( ! document.forms[0].src.value )
document.getElementById('status_img').innerHTML = '*'; document.getElementById('status_img').innerHTML = '';
else document.getElementById('status_img').innerHTML = '<img src="<?php echo esc_url( admin_url( 'images/no.png' ) ); ?>" alt="" />'; else document.getElementById('status_img').innerHTML = '<img src="<?php echo esc_url( admin_url( 'images/no.png' ) ); ?>" alt="" />';
}, },
@ -2541,21 +2548,21 @@ function wp_media_insert_url_form( $default_view = 'image' ) {
return ' return '
<p class="media-types"><label><input type="radio" name="media_type" value="image" id="image-only"' . checked( 'image-only', $view, false ) . ' /> ' . __( 'Image' ) . '</label> &nbsp; &nbsp; <label><input type="radio" name="media_type" value="generic" id="not-image"' . checked( 'not-image', $view, false ) . ' /> ' . __( 'Audio, Video, or Other File' ) . '</label></p> <p class="media-types"><label><input type="radio" name="media_type" value="image" id="image-only"' . checked( 'image-only', $view, false ) . ' /> ' . __( 'Image' ) . '</label> &nbsp; &nbsp; <label><input type="radio" name="media_type" value="generic" id="not-image"' . checked( 'not-image', $view, false ) . ' /> ' . __( 'Audio, Video, or Other File' ) . '</label></p>
<p class="media-types media-types-required-info">' . sprintf( __( 'Required fields are marked %s' ), '<span class="required">*</span>' ) . '</p>
<table class="describe ' . $table_class . '"><tbody> <table class="describe ' . $table_class . '"><tbody>
<tr> <tr>
<th scope="row" class="label" style="width:130px;"> <th scope="row" class="label" style="width:130px;">
<label for="src"><span class="alignleft">' . __('URL') . '</span></label> <label for="src"><span class="alignleft">' . __( 'URL' ) . '</span> <span class="required">*</span></label>
<span class="alignright"><abbr id="status_img" title="required" class="required">*</abbr></span> <span class="alignright" id="status_img"></span>
</th> </th>
<td class="field"><input id="src" name="src" value="" type="text" aria-required="true" onblur="addExtImage.getImageData()" /></td> <td class="field"><input id="src" name="src" value="" type="text" required aria-required="true" onblur="addExtImage.getImageData()" /></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="label"> <th scope="row" class="label">
<label for="title"><span class="alignleft">' . __('Title') . '</span></label> <label for="title"><span class="alignleft">' . __( 'Title' ) . '</span> <span class="required">*</span></label>
<span class="alignright"><abbr title="required" class="required">*</abbr></span>
</th> </th>
<td class="field"><input id="title" name="title" value="" type="text" aria-required="true" /></td> <td class="field"><input id="title" name="title" value="" type="text" required aria-required="true" /></td>
</tr> </tr>
<tr class="not-image"><td></td><td><p class="help">' . __('Link text, e.g. &#8220;Ransom Demands (PDF)&#8221;') . '</p></td></tr> <tr class="not-image"><td></td><td><p class="help">' . __('Link text, e.g. &#8220;Ransom Demands (PDF)&#8221;') . '</p></td></tr>

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.5-beta2-36878'; $wp_version = '4.5-beta2-36879';
/** /**
* 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.