WordPress.org
Get WordPress

Make WordPress Core

Changeset 54243


Ignore:
Timestamp:
09/20/2022 04:00:35 AM (2 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.