WordPress.org
Get WordPress

Make WordPress Core

Ticket #50066: 50066.2.diff

File 50066.2.diff, 8.7 KB (added by sabernhardt, 5 years ago)

Adding alt-text class, setting textarea height in CSS, updating QUnit

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

     
    805805        margin-bottom: 5px;
    806806}
    807807
     808.wp_attachment_details #attachment_alt {
     809        height: 2.5em;
     810        line-height: 2;
     811}
     812
    808813.wp_attachment_details .attachment-alt-text-description {
    809814        margin-top: 5px;
    810815}

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

     
    31853185        <?php if ( 'image' === substr( $post->post_mime_type, 0, 5 ) ) : ?>
    31863186                <p class="attachment-alt-text">
    31873187                        <label for="attachment_alt"><strong><?php _e( 'Alternative Text' ); ?></strong></label><br />
    3188                         <input type="text" class="widefat" name="_wp_attachment_image_alt" id="attachment_alt" aria-describedby="alt-text-description" value="<?php echo esc_attr( $alt_text ); ?>" />
     3188                        <textarea class="widefat" name="_wp_attachment_image_alt" id="attachment_alt" aria-describedby="alt-text-description"><?php echo esc_attr( $alt_text ); ?></textarea>
    31893189                </p>
    31903190                <p class="attachment-alt-text-description" id="alt-text-description">
    31913191                <?php

  • src/wp-includes/css/media-views.css

     
    507507        resize: vertical;
    508508}
    509509
     510.media-sidebar .setting.alt-text textarea,
     511.attachment-details .setting.alt-text textarea,
     512.compat-item .field.alt-text textarea,
     513.alt-text textarea {
     514        height: 52px;
     515}
     516
    510517.compat-item {
    511518        float: left;
    512519        width: 100%;

  • src/wp-includes/media-template.php

     
    452452                        <div class="settings">
    453453                                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    454454                                <# if ( 'image' === data.type ) { #>
    455                                         <span class="setting has-description" data-setting="alt">
     455                                        <span class="setting alt-text has-description" data-setting="alt">
    456456                                                <label for="attachment-details-two-column-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
    457                                                 <input type="text" id="attachment-details-two-column-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     457                                                <textarea id="attachment-details-two-column-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
    458458                                        </span>
    459459                                        <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
    460460                                <# } #>
    … …  
    653653                </div>
    654654                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    655655                <# if ( 'image' === data.type ) { #>
    656                         <span class="setting has-description" data-setting="alt">
     656                        <span class="setting alt-text has-description" data-setting="alt">
    657657                                <label for="attachment-details-alt-text" class="name"><?php _e( 'Alt Text' ); ?></label>
    658                                 <input type="text" id="attachment-details-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     658                                <textarea id="attachment-details-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
    659659                        </span>
    660660                        <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
    661661                <# } #>
    … …  
    957957
    958958                <span class="setting alt-text has-description">
    959959                        <label for="embed-image-settings-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
    960                         <input type="text" id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description" />
     960                        <textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
    961961                </span>
    962962                <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
    963963
    … …  
    10201020                                <div class="column-settings">
    10211021                                        <span class="setting alt-text has-description">
    10221022                                                <label for="image-details-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
    1023                                                 <input type="text" id="image-details-alt-text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
     1023                                                <textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea>
    10241024                                        </span>
    10251025                                        <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
    10261026

  • tests/qunit/index.html

     
    11611161                        <div class="settings">
    11621162                                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    11631163                                <# if ( 'image' === data.type ) { #>
    1164                                         <label class="setting" data-setting="alt">
    1165                                                 <span class="name">Alternative Text</span>
    1166                                                 <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
    1167                                         </label>
     1164                                        <span class="setting alt-text has-description" data-setting="alt">
     1165                                                <label for="attachment-details-two-column-alt-text" class="name">Alternative Text</label>
     1166                                                <textarea id="attachment-details-two-column-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
     1167                                        </span>
    11681168                                        <p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
    11691169                                <# } #>
    11701170                                                                <label class="setting" data-setting="title">
    … …  
    13261326
    13271327                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    13281328                <# if ( 'image' === data.type ) { #>
    1329                         <label class="setting" data-setting="alt">
    1330                                 <span class="name">Alt Text</span>
    1331                                 <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
    1332                         </label>
     1329                        <span class="setting alt-text has-description" data-setting="alt">
     1330                                <label for="attachment-details-alt-text" class="name">Alt Text</label>
     1331                                <textarea id="attachment-details-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
     1332                        </span>
    13331333                        <p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
    13341334                <# } #>
    13351335                                <label class="setting" data-setting="title">
    … …  
    16181618                        <img src="{{ data.model.url }}" draggable="false" alt="" />
    16191619                </div>
    16201620
    1621                 <label class="setting alt-text has-description">
    1622                         <span>Alternative Text</span>
    1623                         <input type="text" data-setting="alt" aria-describedby="alt-text-description" />
    1624                 </label>
     1621                <span class="setting alt-text has-description">
     1622                        <label for="embed-image-settings-alt-text" class="name">Alternative Text</label>
     1623                        <textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
     1624                </span>
    16251625                <p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
    16261626
    16271627                                        <label class="setting caption">
    … …  
    16731673                                        </div>
    16741674                                </div>
    16751675                                <div class="column-settings">
    1676                                         <label class="setting alt-text has-description">
    1677                                                 <span>Alternative Text</span>
    1678                                                 <input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
    1679                                         </label>
     1676                                        <span class="setting alt-text has-description">
     1677                                                <label for="image-details-alt-text" class="name">Alternative Text</label>
     1678                                                <textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea>
     1679                                        </span>
    16801680                                        <p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
    16811681
    16821682                                                                                        <label class="setting caption">