WordPress.org
Get WordPress

Make WordPress Core

Changeset 54243


Ignore:
Timestamp:
09/20/2022 04:00:35 AM (4 years ago)
Author:
joedolson
Message:

Media: Change alt attribute field to textarea in media library.

Change the input field used for alt attributes in the media library views from a text input to a textarea. This gives users more flexibility in resizing the field for easier management of longer alt attributes.

This patch includes a less-common use of esc_attr for a textarea. This is because the primary usage of the alt attribute will be escaped using esc_attr, and the value in editing should match the value output on the front end.

Props edent, sabernhardt, afercia, JavierCasares, audrasjb, joedolson.
Fixes #50066.

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r53162 r54243  
    782782.edit-attachment-frame input,
    783783.edit-attachment-frame textarea {
    784         padding: 6px 8px;
    785         line-height: 1.14285714;
     784        padding: 4px 8px;
     785        line-height: 1.42857143;
    786786}
    787787
    … …  
    848848.wp_attachment_details .attachment-alt-text {
    849849        margin-bottom: 5px;
     850}
     851
     852.wp_attachment_details #attachment_alt {
     853        max-width: 500px;
     854        height: 3.28571428em;
    850855}
    851856
    … …  
    12321237
    12331238@media screen and (max-width: 782px) {
     1239        .edit-attachment-frame input,
     1240        .edit-attachment-frame textarea {
     1241                line-height: 1.5;
     1242        }
     1243       
    12341244        .wp_attachment_details label[for="content"] {
    12351245                font-size: 14px;
    12361246                line-height: 1.5;
     1247        }
     1248
     1249        .wp_attachment_details textarea {
     1250                line-height: 1.5;
     1251        }
     1252
     1253        .wp_attachment_details #attachment_alt {
     1254                height: 3.375em;
    12371255        }
    12381256

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

    r54094 r54243  
    32083208                <p class="attachment-alt-text">
    32093209                        <label for="attachment_alt"><strong><?php _e( 'Alternative Text' ); ?></strong></label><br />
    3210                         <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 ); ?>" />
     3210                        <textarea class="widefat" name="_wp_attachment_image_alt" id="attachment_alt" aria-describedby="alt-text-description"><?php echo esc_attr( $alt_text ); ?></textarea>
    32113211                </p>
    32123212                <p class="attachment-alt-text-description" id="alt-text-description">

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

    r52263 r54243  
    101101        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    102102        font-size: 13px;
     103        line-height: 1.38461538;
    103104}
    104105
    … …  
    530531}
    531532
     533.media-sidebar .alt-text textarea,
     534.attachment-details .alt-text textarea,
     535.compat-item .alt-text textarea,
     536.alt-text textarea {
     537        height: 50px;
     538}
     539
    532540.compat-item {
    533541        float: left;
    … …  
    27992807        .media-frame select {
    28002808                font-size: 16px;
     2809                line-height: 1.5;
    28012810        }
    28022811

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

    r54063 r54243  
    476476                                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    477477                                <# if ( 'image' === data.type ) { #>
    478                                         <span class="setting has-description" data-setting="alt">
     478                                        <span class="setting alt-text has-description" data-setting="alt">
    479479                                                <label for="attachment-details-two-column-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
    480                                                 <input type="text" id="attachment-details-two-column-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     480                                                <textarea id="attachment-details-two-column-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
    481481                                        </span>
    482482                                        <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
    … …  
    707707                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    708708                <# if ( 'image' === data.type ) { #>
    709                         <span class="setting has-description" data-setting="alt">
     709                        <span class="setting alt-text has-description" data-setting="alt">
    710710                                <label for="attachment-details-alt-text" class="name"><?php _e( 'Alt Text' ); ?></label>
    711                                 <input type="text" id="attachment-details-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     711                                <textarea id="attachment-details-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
    712712                        </span>
    713713                        <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
    … …  
    10151015                <span class="setting alt-text has-description">
    10161016                        <label for="embed-image-settings-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
    1017                         <input type="text" id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description" />
     1017                        <textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
    10181018                </span>
    10191019                <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
    … …  
    10781078                                        <span class="setting alt-text has-description">
    10791079                                                <label for="image-details-alt-text" class="name"><?php _e( 'Alternative Text' ); ?></label>
    1080                                                 <input type="text" id="image-details-alt-text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
     1080                                                <textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea>
    10811081                                        </span>
    10821082                                        <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>

  • trunk/tests/qunit/index.html

    r53136 r54243  
    11721172                                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    11731173                                <# if ( 'image' === data.type ) { #>
    1174                                         <label class="setting" data-setting="alt">
    1175                                                 <span class="name">Alternative Text</span>
    1176                                                 <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
    1177                                         </label>
     1174                                        <span class="setting alt-text has-description" data-setting="alt">
     1175                                                <label for="attachment-details-two-column-alt-text" class="name">Alternative Text</label>
     1176                                                <textarea id="attachment-details-two-column-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
     1177                                        </span>
    11781178                                        <p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener">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>
    11791179                                <# } #>
    … …  
    13371337                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
    13381338                <# if ( 'image' === data.type ) { #>
    1339                         <label class="setting" data-setting="alt">
    1340                                 <span class="name">Alt Text</span>
    1341                                 <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
    1342                         </label>
     1339                        <span class="setting alt-text has-description" data-setting="alt">
     1340                                <label for="attachment-details-alt-text" class="name">Alt Text</label>
     1341                                <textarea id="attachment-details-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
     1342                        </span>
    13431343                        <p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener">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>
    13441344                <# } #>
    … …  
    16291629                </div>
    16301630
    1631                 <label class="setting alt-text has-description">
    1632                         <span>Alternative Text</span>
    1633                         <input type="text" data-setting="alt" aria-describedby="alt-text-description" />
    1634                 </label>
     1631                <span class="setting alt-text has-description">
     1632                        <label for="embed-image-settings-alt-text" class="name">Alternative Text</label>
     1633                        <textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
     1634                </span>
    16351635                <p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener">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>
    16361636
    … …  
    16841684                                </div>
    16851685                                <div class="column-settings">
    1686                                         <label class="setting alt-text has-description">
    1687                                                 <span>Alternative Text</span>
    1688                                                 <input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
    1689                                         </label>
     1686                                        <span class="setting alt-text has-description">
     1687                                                <label for="image-details-alt-text" class="name">Alternative Text</label>
     1688                                                <textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea>
     1689                                        </span>
    16901690                                        <p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener">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>
    16911691
Note: See TracChangeset for help on using the changeset viewer.