WordPress.org
Get WordPress

Make WordPress Core

Changeset 36879


Ignore:
Timestamp:
03/07/2016 10:28:15 PM (9 years ago)
Author:
afercia
Message:

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.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r36618 r36879  
    838838
    839839abbr.required,
     840span.required,
    840841.file-error,
    841842.widget-control-remove:hover,

  • trunk/src/wp-admin/css/deprecated-media.css

    r36582 r36879  
    153153}
    154154
    155 abbr.required {
     155abbr.required,
     156span.required {
    156157    text-decoration: none;
    157158    border: none;
    … …  
    365366
    366367p.media-types {
     368    margin: 0;
    367369    padding: 1em;
     370}
     371
     372p.media-types-required-info {
     373    padding-top: 0;
    368374}
    369375

  • trunk/src/wp-admin/includes/media.php

    r36869 r36879  
    14651465        </thead>
    14661466        <tbody>
    1467         <tr><td colspan='2' class='imgedit-response' id='imgedit-response-$post->ID'></td></tr>
    1468         <tr><td style='display:none' colspan='2' class='image-editor' id='image-editor-$post->ID'></td></tr>\n";
     1467        <tr><td colspan='2' class='imgedit-response' id='imgedit-response-$post->ID'></td></tr>\n
     1468        <tr><td style='display:none' colspan='2' class='image-editor' id='image-editor-$post->ID'></td></tr>\n
     1469        <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";
    14691470
    14701471    $defaults = array(
    … …  
    15381539        }
    15391540
    1540         $required      = $field['required'] ? '<span class="alignright"><abbr title="required" class="required">*</abbr></span>' : '';
    1541         $aria_required = $field['required'] ? " aria-required='true' " : '';
     1541        $required      = $field['required'] ? '<span class="required">*</span>' : '';
     1542        $required_attr = $field['required'] ? ' required' : '';
     1543        $aria_required = $field['required'] ? " aria-required='true'" : '';
    15421544        $class  = $id;
    15431545        $class .= $field['required'] ? ' form-required' : '';
    15441546
    1545         $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'>";
     1547        $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'>";
    15461548        if ( !empty( $field[ $field['input'] ] ) )
    15471549            $item .= $field[ $field['input'] ];
    … …  
    15521554            }
    15531555            // Post_excerpt is already escaped by sanitize_post() in get_attachment_fields_to_edit().
    1554             $item .= "<textarea id='$name' name='$name' $aria_required>" . $field['value'] . '</textarea>';
     1556            $item .= "<textarea id='$name' name='$name'{$required_attr}{$aria_required}>" . $field['value'] . '</textarea>';
    15551557        } else {
    1556             $item .= "<input type='text' class='text' id='$name' name='$name' value='" . esc_attr( $field['value'] ) . "' $aria_required />";
     1558            $item .= "<input type='text' class='text' id='$name' name='$name' value='" . esc_attr( $field['value'] ) . "'{$required_attr}{$aria_required} />";
    15571559        }
    15581560        if ( !empty( $field['helps'] ) )
    … …  
    16911693
    16921694        $readonly      = ! $user_can_edit && ! empty( $field['taxonomy'] ) ? " readonly='readonly' " : '';
    1693         $required      = $field['required'] ? '<span class="alignright"><abbr title="required" class="required">*</abbr></span>' : '';
    1694         $aria_required = $field['required'] ? " aria-required='true' " : '';
     1695        $required      = $field['required'] ? '<span class="required">*</span>' : '';
     1696        $required_attr = $field['required'] ? ' required' : '';
     1697        $aria_required = $field['required'] ? " aria-required='true'" : '';
    16951698        $class  = 'compat-field-' . $id;
    16961699        $class .= $field['required'] ? ' form-required' : '';
    … …  
    17071710                $field['value'] = htmlspecialchars( $field['value'], ENT_QUOTES );
    17081711            }
    1709             $item .= "<textarea id='$id_attr' name='$name' $aria_required>" . $field['value'] . '</textarea>';
     1712            $item .= "<textarea id='$id_attr' name='$name'{$required_attr}{$aria_required}>" . $field['value'] . '</textarea>';
    17101713        } else {
    1711             $item .= "<input type='text' class='text' id='$id_attr' name='$name' value='" . esc_attr( $field['value'] ) . "' $readonly $aria_required />";
     1714            $item .= "<input type='text' class='text' id='$id_attr' name='$name' value='" . esc_attr( $field['value'] ) . "' $readonly{$required_attr}{$aria_required} />";
    17121715        }
    17131716        if ( !empty( $field['helps'] ) )
    … …  
    17331736    if ( !empty( $form_fields['_final'] ) )
    17341737        $item .= "\t\t<tr class='final'><td colspan='2'>{$form_fields['_final']}</td></tr>\n";
    1735     if ( $item )
    1736         $item = '<table class="compat-attachment-fields">' . $item . '</table>';
     1738
     1739    if ( $item ) {
     1740        $item = '<p class="media-types media-types-required-info">' .
     1741            sprintf( __( 'Required fields are marked %s' ), '<span class="required">*</span>' ) . '</p>
     1742            <table class="compat-attachment-fields">' . $item . '</table>';
     1743    }
    17371744
    17381745    foreach ( $hidden_fields as $hidden_field => $value ) {
    … …  
    21122119        document.getElementById('go_button').style.color = '#bbb';
    21132120        if ( ! document.forms[0].src.value )
    2114             document.getElementById('status_img').innerHTML = '*';
     2121            document.getElementById('status_img').innerHTML = '';
    21152122        else document.getElementById('status_img').innerHTML = '<img src="<?php echo esc_url( admin_url( 'images/no.png' ) ); ?>" alt="" />';
    21162123    },
    … …  
    25422549    return '
    25432550    <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>
     2551    <p class="media-types media-types-required-info">' . sprintf( __( 'Required fields are marked %s' ), '<span class="required">*</span>' ) . '</p>
    25442552    <table class="describe ' . $table_class . '"><tbody>
    25452553        <tr>
    25462554            <th scope="row" class="label" style="width:130px;">
    2547                 <label for="src"><span class="alignleft">' . __('URL') . '</span></label>
    2548                 <span class="alignright"><abbr id="status_img" title="required" class="required">*</abbr></span>
     2555                <label for="src"><span class="alignleft">' . __( 'URL' ) . '</span> <span class="required">*</span></label>
     2556                <span class="alignright" id="status_img"></span>
    25492557            </th>
    2550             <td class="field"><input id="src" name="src" value="" type="text" aria-required="true" onblur="addExtImage.getImageData()" /></td>
     2558            <td class="field"><input id="src" name="src" value="" type="text" required aria-required="true" onblur="addExtImage.getImageData()" /></td>
    25512559        </tr>
    25522560
    25532561        <tr>
    25542562            <th scope="row" class="label">
    2555                 <label for="title"><span class="alignleft">' . __('Title') . '</span></label>
    2556                 <span class="alignright"><abbr title="required" class="required">*</abbr></span>
     2563                <label for="title"><span class="alignleft">' . __( 'Title' ) . '</span> <span class="required">*</span></label>
    25572564            </th>
    2558             <td class="field"><input id="title" name="title" value="" type="text" aria-required="true" /></td>
     2565            <td class="field"><input id="title" name="title" value="" type="text" required aria-required="true" /></td>
    25592566        </tr>
    25602567
Note: See TracChangeset for help on using the changeset viewer.