Skip to content

Commit 4c17355

Browse files
joedolsonjoedolson
committed
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. git-svn-id: https://develop.svn.wordpress.org/trunk@54243 602fd350-edb4-49c9-b593-d223f7449a82
1 parent f450acf commit 4c17355

File tree

5 files changed

+52
-25
lines changed

5 files changed

+52
-25
lines changed

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -781,8 +781,8 @@ border color while dragging a file over the uploader drop area */
781781

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

788788
.edit-attachment-frame .attachment-info {
@@ -849,6 +849,11 @@ border color while dragging a file over the uploader drop area */
849849
margin-bottom: 5px;
850850
}
851851

852+
.wp_attachment_details #attachment_alt {
853+
max-width: 500px;
854+
height: 3.28571428em;
855+
}
856+
852857
.wp_attachment_details .attachment-alt-text-description {
853858
margin-top: 5px;
854859
}
@@ -1231,11 +1236,24 @@ audio, video {
12311236
}
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;
12371247
}
12381248

1249+
.wp_attachment_details textarea {
1250+
line-height: 1.5;
1251+
}
1252+
1253+
.wp_attachment_details #attachment_alt {
1254+
height: 3.375em;
1255+
}
1256+
12391257
.media-upload-form .media-item.error,
12401258
.media-upload-form .media-item .error {
12411259
font-size: 13px;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3207,7 +3207,7 @@ function edit_form_image_editor( $post ) {
32073207
<?php if ( 'image' === substr( $post->post_mime_type, 0, 5 ) ) : ?>
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">
32133213
<?php

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@
100100
color: #2c3338;
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

105106
.media-frame input[type="text"],
@@ -529,6 +530,13 @@
529530
resize: vertical;
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;
534542
width: 100%;
@@ -2798,6 +2806,7 @@
27982806
.media-frame textarea,
27992807
.media-frame select {
28002808
font-size: 16px;
2809+
line-height: 1.5;
28012810
}
28022811

28032812
.media-frame .media-toolbar input[type="search"] {

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -475,9 +475,9 @@ function wp_print_media_templates() {
475475
<div class="settings">
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>
483483
<# } #>
@@ -706,9 +706,9 @@ function wp_print_media_templates() {
706706
</div>
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>
714714
<# } #>
@@ -1014,7 +1014,7 @@ function wp_print_media_templates() {
10141014

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>
10201020

@@ -1077,7 +1077,7 @@ function wp_print_media_templates() {
10771077
<div class="column-settings">
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>
10831083

‎tests/qunit/index.html

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1171,10 +1171,10 @@ <h2>Uploading</h2>
11711171
<div class="settings">
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
<# } #>
11801180
<label class="setting" data-setting="title">
@@ -1336,10 +1336,10 @@ <h2>
13361336

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
<# } #>
13451345
<label class="setting" data-setting="title">
@@ -1628,10 +1628,10 @@ <h2>Playlist Settings</h2>
16281628
<img src="{{ data.model.url }}" draggable="false" alt="" />
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

16371637
<label class="setting caption">
@@ -1683,10 +1683,10 @@ <h2>Playlist Settings</h2>
16831683
</div>
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

16921692
<label class="setting caption">

0 commit comments

Comments
 (0)