Ticket #23560: 23560.12.diff
File 23560.12.diff, 4.4 KB (added by , 5 years ago) |
---|
-
src/wp-includes/css/media-views.css
1478 1478 box-shadow: none; 1479 1479 } 1480 1480 1481 .attachment.selection.selected:focus { 1482 webkit-box-shadow: 0 0 0 1px #5b9dd9, 1483 0 0 2px 2px #5b9dd9; 1484 box-shadow: 0 0 0 1px #5b9dd9, 1485 0 0 2px 2px #5b9dd9; 1486 outline: none; 1487 } 1488 1481 1489 .attachment.selection.details { 1482 1490 -webkit-box-shadow: 1483 1491 0 0 0 1px #fff, -
src/wp-includes/js/media-views.js
3221 3221 }; 3222 3222 } 3223 3223 3224 $el.show().f ocus();3224 $el.show().find( '.media-modal-close' ).focus(); 3225 3225 return this.propagate('open'); 3226 3226 }, 3227 3227 … … 3302 3302 if ( 27 === event.which && this.$el.is(':visible') ) { 3303 3303 this.escape(); 3304 3304 event.stopImmediatePropagation(); 3305 } else {3306 // Keep focus inside the media modal3307 this.focusManager;3308 3305 } 3309 3306 } 3310 3307 }); … … 4404 4401 } else { 4405 4402 this.click(); 4406 4403 } 4404 4405 // When selecting a tab along the left side, 4406 // focus should be transferred into the main panel 4407 $('.media-frame-content').find( ':focusable' ).first().focus(); 4407 4408 }, 4408 4409 4409 4410 click: function() { … … 4735 4736 */ 4736 4737 toggleSelectionHandler: function( event ) { 4737 4738 var method; 4739 4740 // Catch arrow events 4741 if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) { 4742 this.arrowEvent(event); 4743 return; 4744 } 4745 4738 4746 // Catch enter and space events 4739 4747 if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { 4740 4748 return; … … 4755 4763 this.toggleSelection({ 4756 4764 method: method 4757 4765 }); 4766 4767 // When selecting an image, focus should be transferred to the right details panel 4768 $('.attachment-details').find( ':focusable' ).first().focus(); 4758 4769 }, 4759 4770 /** 4771 * @param {Object} event 4772 */ 4773 arrowEvent: function( event ) { 4774 var attachment = $('.attachments-browser .attachment'), 4775 attachmentsWidth = $('.attachments-browser .attachments').width(), 4776 thumbnailWidth = attachment.first().innerWidth() + 16, 4777 thumbnailsPerRow = Math.floor(attachmentsWidth/thumbnailWidth), 4778 totalThumnails = attachment.length, 4779 totalRows = Math.ceil(totalThumnails/thumbnailsPerRow), 4780 thisIndex = attachment.filter( ':focus' ).index(), 4781 thisIndexAdjusted = thisIndex + 1, 4782 thisRow = thisIndexAdjusted <= thumbnailsPerRow ? 1 : Math.ceil(thisIndexAdjusted/thumbnailsPerRow); 4783 4784 // Left arrow 4785 if ( 37 === event.keyCode ) { 4786 if ( 0 === thisIndex ) { 4787 return; 4788 } 4789 attachment.eq( thisIndex - 1 ).focus(); 4790 } 4791 4792 // Up arrow 4793 if ( 38 === event.keyCode ) { 4794 if ( 1 === thisRow ) { 4795 return; 4796 } 4797 attachment.eq( thisIndex - thumbnailsPerRow ).focus(); 4798 } 4799 4800 // Right arrow 4801 if ( 39 === event.keyCode ) { 4802 if ( totalThumnails === thisIndex ) { 4803 return; 4804 } 4805 attachment.eq( thisIndex + 1 ).focus(); 4806 } 4807 4808 // Down arrow 4809 if ( 40 === event.keyCode ) { 4810 if ( totalRows === thisRow ) { 4811 return; 4812 } 4813 attachment.eq( thisIndex + thumbnailsPerRow ).focus(); 4814 } 4815 4816 return false; 4817 }, 4818 /** 4760 4819 * @param {Object} options 4761 4820 */ 4762 4821 toggleSelection: function( options ) { … … 6237 6296 'click .delete-attachment': 'deleteAttachment', 6238 6297 'click .trash-attachment': 'trashAttachment', 6239 6298 'click .edit-attachment': 'editAttachment', 6240 'click .refresh-attachment': 'refreshAttachment' 6299 'click .refresh-attachment': 'refreshAttachment', 6300 'keydown': 'toggleSelectionHandler' 6241 6301 }, 6242 6302 6243 6303 initialize: function() { … … 6300 6360 this.$el.removeClass('needs-refresh'); 6301 6361 event.preventDefault(); 6302 6362 this.model.fetch(); 6363 }, 6364 /** 6365 * @param {Object} event 6366 */ 6367 toggleSelectionHandler: function( event ) { 6368 // Reverse tabbing out of the right details panel 6369 // should take me back to the item in the list that was being edited. 6370 if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === $( ':tabbable', this.$el ).filter( ':first' )[0] ) { 6371 $('.attachments-browser .details').focus(); 6372 return false; 6373 } 6303 6374 } 6304 6375 6305 6376 });