Make WordPress Core


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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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.