Ticket #29371: 29371.patch
File 29371.patch, 24.2 KB (added by , 10 years ago) |
---|
-
src/wp-admin/css/media.css
563 563 } 564 564 565 565 .media-frame.mode-grid .media-toolbar select { 566 margin: 0 10px 0 0;567 566 font-size: 14px; 568 567 } 569 568 … … 628 627 overflow: hidden; 629 628 } 630 629 631 . upload-php .media-modal-close .media-modal-icon:before {630 .media-modal-close .media-modal-icon:before { 632 631 content: '\f335'; 633 font-size: 22px; 632 font: normal 20px/1 'dashicons'; 633 speak: none; 634 vertical-align: middle; 635 -webkit-font-smoothing: antialiased; 636 -moz-osx-font-smoothing: grayscale; 637 color: #666; 634 638 } 635 639 636 .upload-php .media-modal-close .media-modal-icon { 637 margin: 14px; 638 width: 22px; 639 } 640 641 .upload-php .media-modal-close, 640 .media-modal-close, 642 641 .edit-attachment-frame .edit-media-header .left, 643 642 .edit-attachment-frame .edit-media-header .right { 644 643 cursor: pointer; … … 648 647 width: 50px; 649 648 padding: 0; 650 649 position: absolute; 650 z-index: 1000; 651 651 text-align: center; 652 652 border: 0; 653 653 border-left: 1px solid #ddd; 654 outline: 0; 654 655 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; 655 656 transition: color .1s ease-in-out, background .1s ease-in-out; 656 657 } 657 658 658 . upload-php .media-modal-close {659 .media-modal-close { 659 660 top: 0; 660 661 right: 0; 661 662 } 662 663 664 .library .media-modal-close { 665 border-left: 0; 666 } 667 .media-modal-close span.media-modal-icon { 668 background-image: none; 669 } 670 663 671 .edit-attachment-frame .edit-media-header .left { 664 672 right: 102px; 665 673 } … … 680 688 font-weight: 300; 681 689 } 682 690 683 . upload-php .media-modal-close:hover,684 . upload-php .media-modal-close:focus,691 .media-modal-close:hover, 692 .media-modal-close:focus, 685 693 .edit-attachment-frame .edit-media-header .left:hover, 686 694 .edit-attachment-frame .edit-media-header .right:hover, 687 695 .edit-attachment-frame .edit-media-header .left:focus, -
src/wp-includes/css/media-views.css
100 100 color: #a9a9a9; 101 101 } 102 102 103 .media-frame .hidden { 103 .media-frame .hidden, 104 .media-frame label.setting.hidden { 104 105 display: none; 105 106 } 106 107 … … 150 151 z-index: 559900; 151 152 } 152 153 153 .media-modal-close {154 position: absolute;155 text-decoration: none;156 top: 10px;157 right: 10px;158 width: 30px;159 height: 30px;160 z-index: 1000;161 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;162 transition: color .1s ease-in-out, background .1s ease-in-out;163 }164 165 .media-modal-close:active {166 -webkit-box-shadow: none;167 box-shadow: none;168 }169 170 .media-modal-close span.media-modal-icon {171 display: block;172 margin-top: 5px;173 width: 30px;174 height: 15px;175 background-image: none;176 text-align: center;177 }178 179 .media-modal-close .media-modal-icon:before {180 content: '\f158';181 font: normal 20px/1 'dashicons';182 speak: none;183 vertical-align: middle;184 -webkit-font-smoothing: antialiased;185 -moz-osx-font-smoothing: grayscale;186 color: #666;187 }188 189 .media-modal-close:hover .media-modal-icon:before {190 color: #2ea2cc;191 }192 193 .media-modal-close:active {194 outline: 0;195 }196 197 154 .media-modal-content { 198 155 position: absolute; 199 156 top: 0; … … 730 687 * Attachment Browser Filters 731 688 */ 732 689 .media-frame select.attachment-filters { 733 margin-top: 1 1px;690 margin-top: 10px; 734 691 margin-right: 10px; 692 vertical-align: top; 735 693 } 736 694 737 695 /** … … 738 696 * Search 739 697 */ 740 698 .media-frame .search { 741 margin-top: 1 1px;699 margin-top: 10px; 742 700 padding: 4px; 743 701 font-size: 13px; 744 702 color: #464646; … … 929 887 position: absolute; 930 888 top: 5px; 931 889 right: 5px; 932 height: 22px;933 890 width: 22px; 934 891 padding: 0; 935 892 font-size: 20px; … … 938 895 text-decoration: none; 939 896 color: #464646; 940 897 background-color: #fff; 941 background-position: -96px 4px;942 898 border-width: 0; 943 899 -webkit-border-radius: 3px; 944 900 border-radius: 3px; … … 950 906 transition-property: none; 951 907 } 952 908 953 .attachment a.close:hover, 954 .attachment a.close:focus { 909 .attachment .close .media-modal-icon { 910 height: 22px; 911 background-position: -96px 4px; 912 } 913 914 .attachment .close:hover .media-modal-icon, 915 .attachment .close:focus .media-modal-icon { 955 916 -webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 ); 956 917 box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 ); 957 918 background-position: -36px 4px; 958 959 919 } 960 920 961 .attachment .check { 921 .attachment .check, 922 .attachment .edit-details { 962 923 display: none; 963 924 height: 24px; 964 925 width: 24px; … … 968 929 right: 0; 969 930 outline: none; 970 931 background: #eee; 932 text-decoration: none; 933 color: #222; 971 934 -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 ); 972 935 box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.15 ); 973 936 } 974 937 975 .attachment .check div { 938 .attachment .edit-details { 939 top: 30px; 940 } 941 942 .attachment .edit-details .media-modal-icon { 943 background-image: none; 944 } 945 .attachment .edit-details .media-modal-icon:before { 946 content: "\f464"; 947 font: normal 20px/24px 'dashicons'; 948 speak: none; 949 vertical-align: top; 950 -webkit-font-smoothing: antialiased; 951 -moz-osx-font-smoothing: grayscale; 952 } 953 954 .attachment .check .media-modal-icon { 976 955 background-position: -1px 0; 977 956 height: 15px; 978 957 width: 15px; … … 979 958 margin: 5px; 980 959 } 981 960 982 .attachment .check:hover div{961 .attachment .check:hover .media-modal-icon { 983 962 background-position: -40px 0; 984 963 } 985 964 986 .attachment.selected .check { 965 .attachment.selected .check, 966 .attachment.selected .edit-details { 987 967 display: block; 988 968 } 989 969 990 970 .attachment.details .check, 991 971 .attachment.selected .check:focus, 972 .attachment.details .edit-details, 973 .attachment.selected .edit-details:focus, 992 974 .media-frame.mode-grid .attachment.selected .check { 975 color: #fff; 993 976 background-color: #1e8cbe; 994 977 -webkit-box-shadow: 995 978 0 0 0 1px #fff, … … 999 982 0 0 0 2px #1e8cbe; 1000 983 } 1001 984 1002 .attachment.details .check div,1003 .media-frame.mode-grid .attachment.selected .check div{985 .attachment.details .check .media-modal-icon, 986 .media-frame.mode-grid .attachment.selected .check .media-modal-icon { 1004 987 background-position: -21px 0; 1005 988 } 1006 989 1007 .attachment.details .check:hover div,1008 .attachment.selected .check:focus div,1009 .media-frame.mode-grid .attachment.selected .check:hover div{990 .attachment.details .check:hover .media-modal-icon, 991 .attachment.selected .check:focus .media-modal-icon, 992 .media-frame.mode-grid .attachment.selected .check:hover .media-modal-icon { 1010 993 background-position: -60px 0; 1011 994 } 1012 995 996 .attachment.selected .edit-details:hover { 997 color: #000; 998 } 999 1000 .attachment.selected .edit-details:focus, 1001 .attachment.details .edit-details:hover, 1002 .attachment.details .edit-details:focus { 1003 color: #fff; 1004 } 1005 1013 1006 .media-frame .attachment .describe { 1014 1007 position: relative; 1015 1008 display: block; … … 1044 1037 .attachments-browser .media-toolbar-primary > .media-button-group, 1045 1038 .attachments-browser .media-toolbar-secondary > .media-button, 1046 1039 .attachments-browser .media-toolbar-secondary > .media-button-group { 1047 margin: 1 1px 0;1040 margin: 10px 0; 1048 1041 } 1049 1042 1050 1043 .attachments-browser .attachments { … … 1095 1088 1096 1089 .attachments-browser .instructions { 1097 1090 display: inline-block; 1098 margin-top: 1 6px;1091 margin-top: 15px; 1099 1092 line-height: 18px; 1100 1093 font-size: 13px; 1101 1094 color: #666; … … 1535 1528 line-height: 18px; 1536 1529 color: #666; 1537 1530 border-bottom: 1px solid #ddd; 1538 padding-bottom: 1 1px;1531 padding-bottom: 10px; 1539 1532 } 1540 1533 1541 1534 .attachment-info .filename { … … 2209 2202 2210 2203 .media-frame:not(.hide-menu) .media-frame-title .dashicons { 2211 2204 display: inline-block; 2212 line-height: 5 0px;2205 line-height: 56px; 2213 2206 } 2214 2207 2215 2208 .media-frame:not(.hide-menu) .media-frame-title h1 { … … 2359 2352 } 2360 2353 2361 2354 .media-modal .attachments-browser .media-toolbar .attachment-filters { 2362 margin: 1 1px 0 0;2355 margin: 10px 0 0; 2363 2356 height: auto; 2364 2357 max-width: 65%; 2365 2358 max-width: -webkit-calc(100% - 38px); … … 2472 2465 max-width: 90px; 2473 2466 } 2474 2467 2475 .media-modal-close {2476 top: 5px;2477 right: 5px;2478 }2479 2480 2468 .media-modal .media-frame-title { 2481 2469 height: 40px; 2482 2470 } -
src/wp-includes/js/media-views.js
766 766 this.frame.on( 'content:activate', this.saveContentMode, this ); 767 767 this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) ); 768 768 } 769 770 if ( this.frame.modal ) { 771 this.frame.modal.$el.addClass( 'library' ); 772 } else { 773 this.frame.$el.addClass( 'library' ); 774 } 769 775 }, 770 776 771 777 /** … … 2249 2255 template: media.template('media-frame'), 2250 2256 regions: ['menu','title','content','toolbar','router'], 2251 2257 2258 // In the responsive view toggles the Menu visibility. 2252 2259 events: { 2253 2260 'click div.media-frame-title h1': 'toggleMenu' 2254 2261 }, … … 2329 2336 createTitle: function( title ) { 2330 2337 title.view = new media.View({ 2331 2338 controller: this, 2332 tagName: 'h1' 2339 tagName: 'h1', 2340 attributes: { 2341 'id': 'media-frame-title' 2342 } 2333 2343 }); 2334 2344 }, 2335 2345 /** … … 3540 3550 template: media.template('media-modal'), 3541 3551 3542 3552 attributes: { 3543 tabindex: 0 3553 'tabindex': '0', 3554 'role': 'dialog', 3555 'aria-labelledby': 'media-frame-title', 3544 3556 }, 3545 3557 3546 3558 events: { … … 4618 4630 * @augments Backbone.View 4619 4631 */ 4620 4632 media.view.Button = media.View.extend({ 4621 tagName: ' a',4633 tagName: 'button', 4622 4634 className: 'media-button', 4623 attributes: { href: '#' }, 4635 attributes: { 4636 'type': 'button' 4637 }, 4624 4638 4625 4639 events: { 4626 4640 'click': 'click' … … 4682 4696 * @param {Object} event 4683 4697 */ 4684 4698 click: function( event ) { 4685 if ( '#' === this.attributes.href ) {4686 event.preventDefault();4687 }4688 4699 4689 4700 if ( this.options.click && ! this.model.get('disabled') ) { 4690 4701 this.options.click.apply( this, arguments ); … … 5082 5093 5083 5094 attributes: function() { 5084 5095 return { 5085 'tab Index': 0,5086 'role': ' checkbox',5096 'tabindex': '0', 5097 'role': 'option', 5087 5098 'aria-label': this.model.get( 'title' ), 5088 'aria- checked': false,5099 'aria-selected': false, 5089 5100 'data-id': this.model.get( 'id' ) 5090 5101 }; 5091 5102 }, … … 5097 5108 'change [data-setting] select': 'updateSetting', 5098 5109 'change [data-setting] textarea': 'updateSetting', 5099 5110 'click .close': 'removeFromLibrary', 5100 'click .check': 'checkClickHandler', 5111 'click .check': 'checkHandler', 5112 'click .edit-details': 'focusDetails', 5101 5113 'click a': 'preventDefault', 5102 5114 'keydown .close': 'removeFromLibrary', 5115 'keydown .check': 'checkHandler', 5116 'keydown .edit-details': 'focusDetails', 5103 5117 'keydown': 'toggleSelectionHandler' 5104 5118 }, 5105 5119 … … 5265 5279 method = 'toggle'; 5266 5280 } 5267 5281 5282 event.preventDefault(); 5283 5268 5284 this.toggleSelection({ 5269 5285 method: method 5270 5286 }); … … 5379 5395 return; 5380 5396 } 5381 5397 5382 // Add 'selected' class to model, set aria-checked to true. 5383 this.$el.addClass( 'selected' ).attr( 'aria-checked', true ); 5384 // Make the checkbox tabable, except in media grid (bulk select mode). 5385 if ( ! ( controller.isModeActive( 'grid' ) && controller.isModeActive( 'select' ) ) ) { 5386 this.$( '.check' ).attr( 'tabindex', '0' ); 5387 } 5398 // Add 'selected' class to model, set aria-selected to true. 5399 this.$el.addClass( 'selected' ).attr( 'aria-selected', true ); 5400 // Make the checkbox tabable, except in media grid (bulk select mode). 5401 // @todo why exclude bulk select mode? 5402 // if ( ! ( controller.isModeActive( 'grid' ) && controller.isModeActive( 'select' ) ) ) { 5403 this.$( '.check' ).attr({ 'tabindex': '0', 'aria-checked': 'true' }); 5404 // } 5388 5405 }, 5389 5406 /** 5390 5407 * @param {Backbone.Model} model … … 5399 5416 if ( ! selection || ( collection && collection !== selection ) ) { 5400 5417 return; 5401 5418 } 5402 this.$el.removeClass( 'selected' ).attr( 'aria- checked', false )5403 .find( '.check' ).attr( 'tabindex', '-1');5419 this.$el.removeClass( 'selected' ).attr( 'aria-selected', false ) 5420 .find( '.check' ).attr({ 'tabindex': '-1', 'aria-checked': 'false' }); 5404 5421 }, 5405 5422 /** 5406 5423 * @param {Backbone.Model} model … … 5541 5558 * @param {Object} event 5542 5559 */ 5543 5560 removeFromLibrary: function( event ) { 5561 5562 var that = this.$el, 5563 prev = that.prev(), 5564 menuActive = $( '.media-menu-item.active' ); 5565 5544 5566 // Catch enter and space events 5545 5567 if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { 5546 5568 return; … … 5549 5571 // Stop propagation so the model isn't selected. 5550 5572 event.stopPropagation(); 5551 5573 5574 // Move focus to previous element or fallback elements 5575 // after image is removed from selection 5576 if ( prev.length ) { 5577 prev.focus(); 5578 } else if ( menuActive.length ) { 5579 menuActive.focus(); 5580 } else { 5581 // Keep focus inside media modal 5582 this.controller.modal.focusManager.focus(); 5583 } 5584 5552 5585 this.collection.remove( this.model ); 5553 5586 }, 5554 5587 … … 5559 5592 * @param {[type]} event [description] 5560 5593 * @return {[type]} [description] 5561 5594 */ 5562 checkClickHandler: function ( event ) { 5595 checkHandler: function ( event ) { 5596 5597 // Catch enter and space events 5598 if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { 5599 return; 5600 } 5601 5563 5602 var selection = this.options.selection; 5564 5603 if ( ! selection ) { 5565 5604 return; 5566 5605 } 5606 5607 event.preventDefault(); 5567 5608 event.stopPropagation(); 5568 5609 if ( selection.where( { id: this.model.get( 'id' ) } ).length ) { 5569 5610 selection.remove( this.model ); … … 5572 5613 } else { 5573 5614 selection.add( this.model ); 5574 5615 } 5616 }, 5617 5618 /** 5619 * @param {Object} event 5620 */ 5621 focusDetails: function ( event ) { 5622 5623 var details = $( '#attachment-details' ), 5624 displaySettings = $( '.attachment-display-settings' ), 5625 detailsBgColor = details.css( 'background-color' ), 5626 mediaSidebar = $( '.media-sidebar' ), 5627 mediaSidebarBgColor = mediaSidebar.css( 'background-color' ); 5628 5629 // Catch enter and space events 5630 if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { 5631 return; 5632 } 5633 5634 var selection = this.options.selection; 5635 if ( ! selection ) { 5636 return; 5637 } 5638 5639 event.preventDefault(); 5640 event.stopPropagation(); 5641 5642 details.focus(); 5643 // details.add( displaySettings ).css({ 'background-color': "#d5edf6" }).animate({ 'background-color': detailsBgColor }, 1000 ); 5644 mediaSidebar.css({ 'background-color': "#d5edf6" }).animate({ 'background-color': mediaSidebarBgColor }, 1000 ); 5575 5645 } 5576 5646 }); 5577 5647 … … 5649 5719 className: 'attachments', 5650 5720 5651 5721 attributes: { 5652 tabIndex: -1 5722 'tabindex': '-1', 5723 'role': 'listbox', 5724 'aria-live': 'polite' 5653 5725 }, 5654 5726 5655 5727 initialize: function() { … … 5685 5757 5686 5758 this.collection.on( 'reset', this.render, this ); 5687 5759 5688 this.listenTo( this.controller, 'library:selection:add', 5760 this.listenTo( this.controller, 'library:selection:add', this.attachmentFocus ); 5689 5761 5690 5762 // Throttle the scroll handler and bind this. 5691 5763 this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value(); … … 6235 6307 tagName: 'div', 6236 6308 className: 'attachments-browser', 6237 6309 6310 attributes: { 6311 'role': 'application' 6312 }, 6313 6238 6314 initialize: function() { 6239 6315 _.defaults( this.options, { 6240 6316 filters: false, … … 6246 6322 6247 6323 this.listenTo( this.controller, 'toggle:upload:attachment', _.bind( this.toggleUploader, this ) ); 6248 6324 this.controller.on( 'edit:selection', this.editSelection ); 6325 6249 6326 this.createToolbar(); 6327 this.createUploader(); 6328 this.createAttachments(); 6329 // Sidebar placed after Attachments in the markup. 6250 6330 if ( this.options.sidebar ) { 6251 6331 this.createSidebar(); 6252 6332 } 6253 this.createUploader();6254 this.createAttachments();6255 6333 this.updateContent(); 6256 6334 6257 6335 if ( ! this.options.sidebar || 'errors' === this.options.sidebar ) { … … 6306 6384 this.toolbar.set( 'filtersLabel', new media.view.Label({ 6307 6385 value: l10n.filterByType, 6308 6386 attributes: { 6309 'for': 6387 'for': 'media-attachment-filters' 6310 6388 }, 6311 6389 priority: -80 6312 6390 }).render() ); … … 6910 6988 className: 'attachment-display-settings', 6911 6989 template: media.template('attachment-display-settings'), 6912 6990 6991 attributes: { 6992 'id': 'attachment-display-settings' 6993 }, 6994 6913 6995 initialize: function() { 6914 6996 var attachment = this.options.attachment; 6915 6997 … … 6957 7039 updateLinkTo: function() { 6958 7040 var linkTo = this.model.get('link'), 6959 7041 $input = this.$('.link-to-custom'), 7042 $inputLabel = this.$('.link-to-custom-label'), 6960 7043 attachment = this.options.attachment; 6961 7044 6962 7045 if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) { 6963 7046 $input.addClass( 'hidden' ); 7047 $inputLabel.addClass( 'hidden' ); 6964 7048 return; 6965 7049 } 6966 7050 … … 6977 7061 } 6978 7062 6979 7063 $input.removeClass( 'hidden' ); 7064 $inputLabel.removeClass( 'hidden' ); 6980 7065 6981 7066 // If the input is visible, focus and select its contents. 6982 7067 if ( ! isTouchDevice && $input.is(':visible') ) { 6983 $input.focus()[0].select(); 7068 // focuses the Custom URL field after uploading a new image 7069 // $input.focus()[0].select(); 7070 // should focus instead the first focusable element in the 7071 // attachment display settings, whatever it is 7072 this.$( ':input' ).eq( 0 ).focus(); 6984 7073 } 6985 7074 } 6986 7075 }); … … 7024 7113 */ 7025 7114 media.view.Attachment.Details = media.view.Attachment.extend({ 7026 7115 tagName: 'div', 7116 id: 'attachment-details', 7027 7117 className: 'attachment-details', 7028 7118 template: media.template('attachment-details'), 7029 7119 7030 7120 attributes: function() { 7031 7121 return { 7032 'tabIndex': 0, 7033 'data-id': this.model.get( 'id' ) 7122 'tabindex': '0', 7123 'data-id': this.model.get( 'id' ), 7124 'aria-labelledby': 'attachment-details-title' 7034 7125 }; 7035 7126 }, 7036 7127 … … 7059 7150 7060 7151 initialFocus: function() { 7061 7152 if ( ! isTouchDevice ) { 7062 this.$( ':input' ).eq( 0 ).focus(); 7153 // focuses the attachment details first available focusable element 7154 // this.$( ':input' ).eq( 0 ).focus(); 7063 7155 } 7064 7156 }, 7065 7157 /** … … 7347 7439 }, 7348 7440 7349 7441 initialize: function() { 7350 var self = this ;7442 var self = this, labelText; 7351 7443 7352 7444 this.$input = $('<input id="embed-url-field" type="url" />').val( this.model.get('url') ); 7353 7445 this.input = this.$input[0]; 7354 7446 7447 this.labelText = '<span class="screen-reader-text">' + l10n.url + '</span>'; 7355 7448 this.spinner = $('<span class="spinner" />')[0]; 7449 this.$el.prepend([ this.input, this.labelText ]); 7356 7450 this.$el.append([ this.input, this.spinner ]); 7357 7451 7358 7452 this.model.on( 'change:url', this.render, this ); -
src/wp-includes/media-template.php
148 148 149 149 <script type="text/html" id="tmpl-media-modal"> 150 150 <div class="<?php echo $class; ?>"> 151 < a class="media-modal-close" href="#"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></a>151 <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media dialog' ); ?></span></span></button> 152 152 <div class="media-modal-content"></div> 153 153 </div> 154 154 <div class="media-modal-backdrop"></div> … … 264 264 265 265 <script type="text/html" id="tmpl-edit-attachment-frame"> 266 266 <div class="edit-media-header"> 267 <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button> 267 268 <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button> 268 <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>269 269 </div> 270 270 <div class="media-frame-title"></div> 271 271 <div class="media-frame-content"></div> … … 272 272 </script> 273 273 274 274 <script type="text/html" id="tmpl-attachment-details-two-column"> 275 <h2 id="attachment-details-title" class="screen-reader-text"> 276 <?php _e('Attachment Details'); ?> 277 </h2> 278 275 279 <div class="attachment-media-view {{ data.orientation }}"> 276 280 <div class="thumbnail thumbnail-{{ data.type }}"> 277 281 <# if ( data.uploading ) { #> … … 451 455 <# } #> 452 456 </div> 453 457 <# if ( data.buttons.close ) { #> 454 <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>458 <a class="close" href="#" title="<?php esc_attr_e('Remove'); ?>" tabindex="0" role="checkbox" aria-checked="true"><div class="media-modal-icon"></div></a> 455 459 <# } #> 456 460 </div> 457 461 <# if ( data.buttons.check ) { #> 458 <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a> 462 <a class="check" href="#" tabindex="-1" role="checkbox" aria-checked="false"><div class="media-modal-icon"></div><span class="screen-reader-text"><?php esc_attr_e('Deselect'); ?></span></a> 463 <a class="edit-details" href="#attachment-details" tabindex="0"><div class="media-modal-icon"></div><span class="screen-reader-text"><?php esc_attr_e('Edit details'); ?></span></a> 459 464 <# } #> 460 465 <# 461 466 var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; … … 477 482 </script> 478 483 479 484 <script type="text/html" id="tmpl-attachment-details"> 480 <h3 >485 <h3 id="attachment-details-title"> 481 486 <?php _e('Attachment Details'); ?> 482 487 483 <span class="settings-save-status" >488 <span class="settings-save-status" aria-live="assertive"> 484 489 <span class="spinner"></span> 485 490 <span class="saved"><?php esc_html_e('Saved.'); ?></span> 486 491 </span> … … 657 662 <# } #> 658 663 </select> 659 664 </label> 660 <input type="text" class="link-to-custom" data-setting="linkUrl" /> 665 <label class="setting link-to-custom-label"> 666 <span><?php _e( 'URL' ); ?></span> 667 <input type="text" class="link-to-custom" data-setting="linkUrl" /> 668 </label> 661 669 </div> 662 670 663 671 <# if ( 'undefined' !== typeof data.sizes ) { #> … … 855 863 <?php esc_attr_e('None'); ?> 856 864 </button> 857 865 </div> 858 <input type="text" class="link-to-custom" data-setting="linkUrl" /> 866 <label class="setting link-to-custom-label"> 867 <span><?php _e( 'Enter Custom URL' ); ?></span> 868 <input type="text" class="link-to-custom" data-setting="linkUrl" /> 869 </label> 859 870 </div> 860 871 </script> 861 872 … … 947 958 <# } #> 948 959 949 960 <div class="setting link-to"> 950 <span><?php _e('Link To'); ?></span> 951 <select data-setting="link"> 952 <# if ( data.attachment ) { #> 953 <option value="file"> 954 <?php esc_attr_e('Media File'); ?> 955 </option> 956 <option value="post"> 957 <?php esc_attr_e('Attachment Page'); ?> 958 </option> 959 <# } else { #> 960 <option value="file"> 961 <?php esc_attr_e('Image URL'); ?> 962 </option> 963 <# } #> 964 <option value="custom"> 965 <?php esc_attr_e('Custom URL'); ?> 966 </option> 967 <option value="none"> 968 <?php esc_attr_e('None'); ?> 969 </option> 970 </select> 971 <input type="text" class="link-to-custom" data-setting="linkUrl" /> 961 <label class="setting"> 962 <span><?php _e('Link To'); ?></span> 963 <select data-setting="link"> 964 <# if ( data.attachment ) { #> 965 <option value="file"> 966 <?php esc_attr_e('Media File'); ?> 967 </option> 968 <option value="post"> 969 <?php esc_attr_e('Attachment Page'); ?> 970 </option> 971 <# } else { #> 972 <option value="file"> 973 <?php esc_attr_e('Image URL'); ?> 974 </option> 975 <# } #> 976 <option value="custom"> 977 <?php esc_attr_e('Custom URL'); ?> 978 </option> 979 <option value="none"> 980 <?php esc_attr_e('None'); ?> 981 </option> 982 </select> 983 </label> 984 <label class="setting link-to-custom-label"> 985 <span><?php _e( 'URL' ); ?></span> 986 <input type="text" class="link-to-custom" data-setting="linkUrl" /> 987 </label> 972 988 </div> 973 989 <div class="advanced-section"> 974 990 <h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>