Ticket #41612: 41612.3.diff
File 41612.3.diff, 17.7 KB (added by , 5 years ago) |
---|
-
src/js/media/views/attachment/details.js
42 42 rerenderOnModelChange: false 43 43 }); 44 44 45 this.on( 'ready', this.initialFocus );46 45 // Call 'initialize' directly on the parent class. 47 46 Attachment.prototype.initialize.apply( this, arguments ); 48 47 }, 49 48 50 initialFocus: function() {51 if ( ! wp.media.isTouchDevice ) {52 /*53 Previously focused the first ':input' (the readonly URL text field).54 Since the first ':input' is now a button (delete/trash): when pressing55 spacebar on an attachment, Firefox fires deleteAttachment/trashAttachment56 as soon as focus is moved. Explicitly target the first text field for now.57 @todo change initial focus logic, also for accessibility.58 */59 this.$( 'input[type="text"]' ).eq( 0 ).focus();60 }61 },62 49 /** 63 50 * @param {Object} event 64 51 */ -
src/wp-includes/css/media-views.css
431 431 .attachment-details .setting input[type="tel"], 432 432 .attachment-details .setting input[type="url"], 433 433 .attachment-details .setting textarea, 434 .attachment-details .setting .value { 434 .attachment-details .setting .value, 435 .attachment-details .setting + .description { 435 436 box-sizing: border-box; 436 437 margin: 1px; 437 438 width: 65%; … … 439 440 } 440 441 441 442 .media-sidebar .setting .value, 442 .attachment-details .setting .value { 443 .attachment-details .setting .value, 444 .attachment-details .setting + .description { 443 445 margin: 0 1px; 444 446 text-align: left; 445 447 } 446 448 449 .attachment-details .setting + .description { 450 font-size: 12px; 451 font-style: normal; 452 margin-bottom: 0.5em; 453 } 454 447 455 .media-sidebar .setting textarea, 448 456 .attachment-details .setting textarea, 449 457 .compat-item .field textarea { … … 2040 2048 clear: both; 2041 2049 } 2042 2050 2051 .media-embed .setting.has-description { 2052 margin-bottom: 5px; 2053 } 2054 2055 .media-embed .description { 2056 clear: both; 2057 font-style: normal; 2058 } 2059 2043 2060 .image-details .embed-media-settings .setting { 2044 2061 float: none; 2045 2062 width: auto; … … 2069 2086 2070 2087 .image-details .embed-media-settings .setting input.link-to-custom, 2071 2088 .image-details .embed-media-settings .link-target, 2072 .image-details .embed-media-settings .custom-size { 2089 .image-details .embed-media-settings .custom-size, 2090 .image-details .description { 2073 2091 margin-left: 27%; 2074 2092 width: 70%; 2075 2093 } 2076 2094 2095 .image-details .description { 2096 font-style: normal; 2097 margin-top: 0; 2098 } 2099 2077 2100 .image-details .embed-media-settings .link-target { 2078 2101 margin-top: 24px; 2079 2102 } -
src/wp-includes/media-template.php
161 161 if ( $is_IE && strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE 7' ) !== false ) { 162 162 $class .= ' ie7'; 163 163 } 164 165 $alt_text_description = sprintf( 166 /* translators: 1: link start tag, 2: accessibility text, 3: link end tag */ 167 __( 'Describe %1$sthe purpose of the image%2$s%3$s. Leave empty if the image is purely decorative.' ), 168 '<a href="' . esc_url( 'https://www.w3.org/WAI/tutorials/images/decision-tree' ) . '" target="_blank" rel="noopener noreferrer">', 169 sprintf( 170 '<span class="screen-reader-text"> %s</span>', 171 /* translators: accessibility text */ 172 __( '(opens in a new tab)' ) 173 ), 174 '</a>' 175 ); 164 176 ?> 165 177 <!--[if lte IE 8]> 166 178 <style> … … 404 416 </div> 405 417 406 418 <div class="settings"> 407 <label class="setting" data-setting="url">408 <span class="name"><?php _e( 'URL' ); ?></span>409 <input type="text" value="{{ data.url }}" readonly />410 </label>411 419 <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #> 420 <# if ( 'image' === data.type ) { #> 421 <label class="setting" data-setting="alt"> 422 <span class="name"><?php _e( 'Alternative Text' ); ?></span> 423 <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} /> 424 </label> 425 <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p> 426 <# } #> 412 427 <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?> 413 428 <label class="setting" data-setting="title"> 414 429 <span class="name"><?php _e( 'Title' ); ?></span> … … 432 447 <span class="name"><?php _e( 'Caption' ); ?></span> 433 448 <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea> 434 449 </label> 435 <# if ( 'image' === data.type ) { #>436 <label class="setting" data-setting="alt">437 <span class="name"><?php _e( 'Alt Text' ); ?></span>438 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />439 </label>440 <# } #>441 450 <label class="setting" data-setting="description"> 442 451 <span class="name"><?php _e( 'Description' ); ?></span> 443 452 <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea> … … 456 465 <# } #> 457 466 </div> 458 467 <# } #> 468 <label class="setting" data-setting="url"> 469 <span class="name"><?php _e( 'Copy Link' ); ?></span> 470 <input type="text" value="{{ data.url }}" readonly /> 471 </label> 459 472 <div class="attachment-compat"></div> 460 473 </div> 461 474 … … 595 608 </div> 596 609 </div> 597 610 598 <label class="setting" data-setting="url">599 <span class="name"><?php _e( 'URL' ); ?></span>600 <input type="text" value="{{ data.url }}" readonly />601 </label>602 611 <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #> 612 <# if ( 'image' === data.type ) { #> 613 <label class="setting" data-setting="alt"> 614 <span class="name"><?php _e( 'Alt Text' ); ?></span> 615 <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} /> 616 </label> 617 <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p> 618 <# } #> 603 619 <?php if ( post_type_supports( 'attachment', 'title' ) ) : ?> 604 620 <label class="setting" data-setting="title"> 605 621 <span class="name"><?php _e( 'Title' ); ?></span> … … 623 639 <span class="name"><?php _e( 'Caption' ); ?></span> 624 640 <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea> 625 641 </label> 626 <# if ( 'image' === data.type ) { #>627 <label class="setting" data-setting="alt">628 <span class="name"><?php _e( 'Alt Text' ); ?></span>629 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />630 </label>631 <# } #>632 642 <label class="setting" data-setting="description"> 633 643 <span class="name"><?php _e( 'Description' ); ?></span> 634 644 <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea> 635 645 </label> 646 <label class="setting" data-setting="url"> 647 <span class="name"><?php _e( 'Copy Link' ); ?></span> 648 <input type="text" value="{{ data.url }}" readonly /> 649 </label> 636 650 </script> 637 651 638 652 <script type="text/html" id="tmpl-media-selection"> … … 882 896 <img src="{{ data.model.url }}" draggable="false" alt="" /> 883 897 </div> 884 898 899 <label class="setting alt-text has-description"> 900 <span><?php _e( 'Alternative Text' ); ?></span> 901 <input type="text" data-setting="alt" aria-describedby="alt-text-description" /> 902 </label> 903 <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p> 904 885 905 <?php 886 906 /** This filter is documented in wp-admin/includes/media.php */ 887 907 if ( ! apply_filters( 'disable_captions', '' ) ) : … … 892 912 </label> 893 913 <?php endif; ?> 894 914 895 <label class="setting alt-text">896 <span><?php _e( 'Alt Text' ); ?></span>897 <input type="text" data-setting="alt" />898 </label>899 900 915 <div class="setting align"> 901 916 <span><?php _e( 'Align' ); ?></span> 902 917 <div class="button-group button-large" data-setting="align"> … … 948 963 </div> 949 964 </div> 950 965 <div class="column-settings"> 966 <label class="setting alt-text has-description"> 967 <span><?php _e( 'Alternative Text' ); ?></span> 968 <input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" /> 969 </label> 970 <p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p> 971 951 972 <?php 952 973 /** This filter is documented in wp-admin/includes/media.php */ 953 974 if ( ! apply_filters( 'disable_captions', '' ) ) : … … 958 979 </label> 959 980 <?php endif; ?> 960 981 961 <label class="setting alt-text">962 <span><?php _e( 'Alternative Text' ); ?></span>963 <input type="text" data-setting="alt" value="{{ data.model.alt }}" />964 </label>965 966 982 <h2><?php _e( 'Display Settings' ); ?></h2> 967 983 <div class="setting align"> 968 984 <span><?php _e( 'Align' ); ?></span> -
tests/qunit/index.html
1118 1118 <div class="file-size"><strong>File size:</strong> {{ data.filesizeHumanReadable }}</div> 1119 1119 <# if ( 'image' === data.type && ! data.uploading ) { #> 1120 1120 <# if ( data.width && data.height ) { #> 1121 <div class="dimensions"><strong>Dimensions:</strong> {{ data.width }} × {{ data.height }}</div> 1121 <div class="dimensions"><strong>Dimensions:</strong> 1122 {{ data.width }} by {{ data.height }} pixels </div> 1122 1123 <# } #> 1123 1124 <# } #> 1124 1125 1125 <# if ( data.fileLength ) { #> 1126 <div class="file-length"><strong>Length:</strong> {{ data.fileLength }}</div> 1126 <# if ( data.fileLength && data.fileLengthHumanReadable ) { #> 1127 <div class="file-length"><strong>Length:</strong> 1128 <span aria-hidden="true">{{ data.fileLength }}</span> 1129 <span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span> 1130 </div> 1127 1131 <# } #> 1128 1132 1129 1133 <# if ( 'audio' === data.type && data.meta.bitrate ) { #> … … 1143 1147 </div> 1144 1148 1145 1149 <div class="settings"> 1146 <label class="setting" data-setting="url">1147 <span class="name">URL</span>1148 <input type="text" value="{{ data.url }}" readonly />1149 </label>1150 1150 <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #> 1151 <# if ( 'image' === data.type ) { #> 1152 <label class="setting" data-setting="alt"> 1153 <span class="name">Alternative Text</span> 1154 <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} /> 1155 </label> 1156 <p class="description" id="alt-text-description">Describe <a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">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> 1157 <# } #> 1151 1158 <label class="setting" data-setting="title"> 1152 1159 <span class="name">Title</span> 1153 1160 <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} /> … … 1166 1173 <span class="name">Caption</span> 1167 1174 <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea> 1168 1175 </label> 1169 <# if ( 'image' === data.type ) { #>1170 <label class="setting" data-setting="alt">1171 <span class="name">Alt Text</span>1172 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />1173 </label>1174 <# } #>1175 1176 <label class="setting" data-setting="description"> 1176 1177 <span class="name">Description</span> 1177 1178 <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea> 1178 1179 </label> 1179 < labelclass="setting">1180 <div class="setting"> 1180 1181 <span class="name">Uploaded By</span> 1181 1182 <span class="value">{{ data.authorName }}</span> 1182 </ label>1183 </div> 1183 1184 <# if ( data.uploadedToTitle ) { #> 1184 < labelclass="setting">1185 <div class="setting"> 1185 1186 <span class="name">Uploaded To</span> 1186 1187 <# if ( data.uploadedToLink ) { #> 1187 1188 <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span> … … 1188 1189 <# } else { #> 1189 1190 <span class="value">{{ data.uploadedToTitle }}</span> 1190 1191 <# } #> 1191 </ label>1192 </div> 1192 1193 <# } #> 1194 <label class="setting" data-setting="url"> 1195 <span class="name">Copy Link</span> 1196 <input type="text" value="{{ data.url }}" readonly /> 1197 </label> 1193 1198 <div class="attachment-compat"></div> 1194 1199 </div> 1195 1200 … … 1196 1201 <div class="actions"> 1197 1202 <a class="view-attachment" href="{{ data.link }}">View attachment page</a> 1198 1203 <# if ( data.can.save ) { #> | 1199 <a href=" post.php?post={{ data.id }}&action=edit">Edit more details</a>1204 <a href="{{ data.editLink }}">Edit more details</a> 1200 1205 <# } #> 1201 1206 <# if ( ! data.uploading && data.can.remove ) { #> | 1202 1207 <button type="button" class="button-link delete-attachment">Delete Permanently</button> … … 1280 1285 <div class="file-size">{{ data.filesizeHumanReadable }}</div> 1281 1286 <# if ( 'image' === data.type && ! data.uploading ) { #> 1282 1287 <# if ( data.width && data.height ) { #> 1283 <div class="dimensions">{{ data.width }} × {{ data.height }}</div> 1288 <div class="dimensions"> 1289 {{ data.width }} by {{ data.height }} pixels </div> 1284 1290 <# } #> 1285 1291 1286 1292 <# if ( data.can.save && data.sizes ) { #> … … 1288 1294 <# } #> 1289 1295 <# } #> 1290 1296 1291 <# if ( data.fileLength ) { #> 1292 <div class="file-length">Length: {{ data.fileLength }}</div> 1297 <# if ( data.fileLength && data.fileLengthHumanReadable ) { #> 1298 <div class="file-length">Length: <span aria-hidden="true">{{ data.fileLength }}</span> 1299 <span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span> 1300 </div> 1293 1301 <# } #> 1294 1302 1295 1303 <# if ( ! data.uploading && data.can.remove ) { #> … … 1304 1312 </div> 1305 1313 </div> 1306 1314 1307 <label class="setting" data-setting="url">1308 <span class="name">URL</span>1309 <input type="text" value="{{ data.url }}" readonly />1310 </label>1311 1315 <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #> 1316 <# if ( 'image' === data.type ) { #> 1317 <label class="setting" data-setting="alt"> 1318 <span class="name">Alt Text</span> 1319 <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} /> 1320 </label> 1321 <p class="description" id="alt-text-description">Describe <a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">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> 1322 <# } #> 1312 1323 <label class="setting" data-setting="title"> 1313 1324 <span class="name">Title</span> 1314 1325 <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} /> … … 1327 1338 <span class="name">Caption</span> 1328 1339 <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea> 1329 1340 </label> 1330 <# if ( 'image' === data.type ) { #>1331 <label class="setting" data-setting="alt">1332 <span class="name">Alt Text</span>1333 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />1334 </label>1335 <# } #>1336 1341 <label class="setting" data-setting="description"> 1337 1342 <span class="name">Description</span> 1338 1343 <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea> 1339 1344 </label> 1345 <label class="setting" data-setting="url"> 1346 <span class="name">Copy Link</span> 1347 <input type="text" value="{{ data.url }}" readonly /> 1348 </label> 1340 1349 </script> 1341 1350 1342 1351 <script type="text/html" id="tmpl-media-selection"> … … 1597 1606 <img src="{{ data.model.url }}" draggable="false" alt="" /> 1598 1607 </div> 1599 1608 1609 <label class="setting alt-text has-description"> 1610 <span>Alternative Text</span> 1611 <input type="text" data-setting="alt" aria-describedby="alt-text-description" /> 1612 </label> 1613 <p class="description" id="alt-text-description">Describe <a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">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> 1614 1600 1615 <label class="setting caption"> 1601 1616 <span>Caption</span> 1602 1617 <textarea data-setting="caption" /> 1603 1618 </label> 1604 1619 1605 <label class="setting alt-text">1606 <span>Alt Text</span>1607 <input type="text" data-setting="alt" />1608 </label>1609 1610 1620 <div class="setting align"> 1611 1621 <span>Align</span> 1612 1622 <div class="button-group button-large" data-setting="align"> … … 1651 1661 </div> 1652 1662 </div> 1653 1663 <div class="column-settings"> 1664 <label class="setting alt-text has-description"> 1665 <span>Alternative Text</span> 1666 <input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" /> 1667 </label> 1668 <p class="description" id="alt-text-description">Describe <a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">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> 1669 1654 1670 <label class="setting caption"> 1655 1671 <span>Caption</span> 1656 1672 <textarea data-setting="caption">{{ data.model.caption }}</textarea> 1657 1673 </label> 1658 1674 1659 <label class="setting alt-text">1660 <span>Alternative Text</span>1661 <input type="text" data-setting="alt" value="{{ data.model.alt }}" />1662 </label>1663 1664 1675 <h2>Display Settings</h2> 1665 1676 <div class="setting align"> 1666 1677 <span>Align</span> … … 1761 1772 </div> 1762 1773 <label class="setting link-rel"> 1763 1774 <span>Link Rel</span> 1764 <input type="text" data-setting="linkRel" value="{{ data.model.link ClassName}}" />1775 <input type="text" data-setting="linkRel" value="{{ data.model.linkRel }}" /> 1765 1776 </label> 1766 1777 <label class="setting link-class-name"> 1767 1778 <span>Link CSS Class</span>