Ticket #23560: 23560.15.diff
File 23560.15.diff, 6.8 KB (added by , 5 years ago) |
---|
-
src/wp-includes/css/media-views.css
723 723 0 0 0 3px #ccc; 724 724 } 725 725 726 .selected.attachment:focus { 727 -webkit-box-shadow: 0 0 0 1px #fff, 728 0 0 0 5px #1e8cbe; 729 box-shadow: 0 0 0 1px #fff, 730 0 0 0 5px #1e8cbe; 731 } 732 726 733 .attachment-preview { 727 734 position: relative; 728 735 width: 199px; … … 913 920 } 914 921 915 922 .attachment.details .check, 923 .attachment.selected .check:focus, 916 924 .media-grid-view .attachment.selected .check { 917 925 background-color: #1e8cbe; 918 926 -webkit-box-shadow: 0 0 0 1px #fff, … … 935 943 } 936 944 937 945 .attachment.details .check:hover div, 946 .attachment.selected .check:focus div, 938 947 .media-grid-view .attachment.selected .check:hover div { 939 948 background-position: -60px 0; 940 949 } … … 1478 1487 box-shadow: none; 1479 1488 } 1480 1489 1490 .attachment.selection.selected:focus { 1491 webkit-box-shadow: 0 0 0 1px #5b9dd9, 1492 0 0 2px 2px #5b9dd9; 1493 box-shadow: 0 0 0 1px #5b9dd9, 1494 0 0 2px 2px #5b9dd9; 1495 outline: none; 1496 } 1497 1481 1498 .attachment.selection.details { 1482 1499 -webkit-box-shadow: 1483 1500 0 0 0 1px #fff, -
src/wp-includes/js/media-views.js
758 758 this.frame.content.mode('browse'); 759 759 } 760 760 this.get('selection').add( attachment ); 761 762 // Set focus back to where it goes when an attachment is selected. 763 $( '.attachments-browser .attachments .attachment' ).first().focus(); 761 764 }, 762 765 763 766 /** … … 3221 3227 }; 3222 3228 } 3223 3229 3224 $el.show().f ocus();3230 $el.show().find( '.media-modal-close' ).focus(); 3225 3231 return this.propagate('open'); 3226 3232 }, 3227 3233 … … 3302 3308 if ( 27 === event.which && this.$el.is(':visible') ) { 3303 3309 this.escape(); 3304 3310 event.stopImmediatePropagation(); 3305 } else {3306 // Keep focus inside the media modal3307 this.focusManager;3308 3311 } 3309 3312 } 3310 3313 }); … … 4404 4407 } else { 4405 4408 this.click(); 4406 4409 } 4410 4411 // When selecting a tab along the left side, 4412 // focus should be transferred into the main panel 4413 $('.media-frame-content input').first().focus(); 4407 4414 }, 4408 4415 4409 4416 click: function() { … … 4735 4742 */ 4736 4743 toggleSelectionHandler: function( event ) { 4737 4744 var method; 4745 4746 // Catch arrow events 4747 if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) { 4748 this.arrowEvent(event); 4749 return; 4750 } 4751 4738 4752 // Catch enter and space events 4739 4753 if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { 4740 4754 return; … … 4757 4771 }); 4758 4772 }, 4759 4773 /** 4774 * @param {Object} event 4775 */ 4776 arrowEvent: function( event ) { 4777 var attachment = $('.attachments-browser .attachment'), 4778 attachmentsWidth = $('.attachments-browser .attachments').width(), 4779 thumbnailWidth = attachment.first().innerWidth() + 16, 4780 thumbnailsPerRow = Math.floor(attachmentsWidth/thumbnailWidth), 4781 totalThumnails = attachment.length, 4782 totalRows = Math.ceil(totalThumnails/thumbnailsPerRow), 4783 thisIndex = attachment.filter( ':focus' ).index(), 4784 thisIndexAdjusted = thisIndex + 1, 4785 thisRow = thisIndexAdjusted <= thumbnailsPerRow ? 1 : Math.ceil(thisIndexAdjusted/thumbnailsPerRow); 4786 4787 // Left arrow 4788 if ( 37 === event.keyCode ) { 4789 if ( 0 === thisIndex ) { 4790 return; 4791 } 4792 attachment.eq( thisIndex - 1 ).focus(); 4793 } 4794 4795 // Up arrow 4796 if ( 38 === event.keyCode ) { 4797 if ( 1 === thisRow ) { 4798 return; 4799 } 4800 attachment.eq( thisIndex - thumbnailsPerRow ).focus(); 4801 } 4802 4803 // Right arrow 4804 if ( 39 === event.keyCode ) { 4805 if ( totalThumnails === thisIndex ) { 4806 return; 4807 } 4808 attachment.eq( thisIndex + 1 ).focus(); 4809 } 4810 4811 // Down arrow 4812 if ( 40 === event.keyCode ) { 4813 if ( totalRows === thisRow ) { 4814 return; 4815 } 4816 attachment.eq( thisIndex + thumbnailsPerRow ).focus(); 4817 } 4818 4819 return false; 4820 }, 4821 /** 4760 4822 * @param {Object} options 4761 4823 */ 4762 4824 toggleSelection: function( options ) { … … 4792 4854 4793 4855 selection.add( models ); 4794 4856 selection.single( model ); 4857 4858 // When selecting attachments, focus should be transferred to the right details panel 4859 $('.attachment-details input').first().focus(); 4860 4795 4861 return; 4796 4862 4797 4863 // If the `method` is set to `toggle`, just flip the selection … … 4799 4865 } else if ( 'toggle' === method ) { 4800 4866 selection[ this.selected() ? 'remove' : 'add' ]( model ); 4801 4867 selection.single( model ); 4868 4869 if ( this.selected() ) { 4870 // When selecting an attachment, focus should be transferred to the right details panel 4871 $('.attachment-details input').first().focus(); 4872 } 4873 4802 4874 return; 4803 4875 } 4804 4876 … … 4850 4922 return; 4851 4923 } 4852 4924 4853 this.$el.addClass('selected').attr('aria-checked', true); 4925 this.$el.addClass( 'selected' ).attr( 'aria-checked', true ) 4926 .find( '.check' ).attr( 'tabindex', '0' ); 4927 4928 // When selecting an attachment, focus should be transferred to the right details panel 4929 $('.attachment-details input').first().focus(); 4854 4930 }, 4855 4931 /** 4856 4932 * @param {Backbone.Model} model … … 4865 4941 if ( ! selection || ( collection && collection !== selection ) ) { 4866 4942 return; 4867 4943 } 4868 this.$el.removeClass('selected').attr('aria-checked', false); 4944 this.$el.removeClass( 'selected' ).attr( 'aria-checked', false ) 4945 .find( '.check' ).attr( 'tabindex', '-1' ); 4869 4946 }, 4870 4947 /** 4871 4948 * @param {Backbone.Model} model … … 5027 5104 event.stopPropagation(); 5028 5105 if ( selection.where( { id: this.model.get( 'id' ) } ).length ) { 5029 5106 selection.remove( this.model ); 5107 // Move focus back to the attachment tile (from the check). 5108 this.$el.focus(); 5030 5109 } else { 5031 5110 selection.add( this.model ); 5032 5111 } … … 6237 6316 'click .delete-attachment': 'deleteAttachment', 6238 6317 'click .trash-attachment': 'trashAttachment', 6239 6318 'click .edit-attachment': 'editAttachment', 6240 'click .refresh-attachment': 'refreshAttachment' 6319 'click .refresh-attachment': 'refreshAttachment', 6320 'keydown': 'toggleSelectionHandler' 6241 6321 }, 6242 6322 6243 6323 initialize: function() { … … 6300 6380 this.$el.removeClass('needs-refresh'); 6301 6381 event.preventDefault(); 6302 6382 this.model.fetch(); 6383 }, 6384 /** 6385 * @param {Object} event 6386 */ 6387 toggleSelectionHandler: function( event ) { 6388 // Reverse tabbing out of the right details panel 6389 // should take me back to the item in the list that was being edited. 6390 if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === $( ':tabbable', this.$el ).filter( ':first' )[0] ) { 6391 $('.attachments-browser .details').focus(); 6392 return false; 6393 } 6303 6394 } 6304 6395 6305 6396 });