Changeset 29220
- Timestamp:
- 07/18/2014 07:56:25 AM (10 years ago)
- Location:
- trunk/src/wp-includes
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-includes/css/media-views.css
r29212 r29220 722 722 0 0 0 1px #fff, 723 723 0 0 0 3px #ccc; 724 } 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; 724 731 } 725 732 … … 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; … … 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; … … 1477 1486 -webkit-box-shadow: none; 1478 1487 box-shadow: none; 1488 } 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; 1479 1496 } 1480 1497 -
trunk/src/wp-includes/js/media-views.js
r29213 r29220 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 … … 3222 3225 } 3223 3226 3224 $el.show().f ocus();3227 $el.show().find( '.media-modal-close' ).focus(); 3225 3228 return this.propagate('open'); 3226 3229 }, … … 3303 3306 this.escape(); 3304 3307 event.stopImmediatePropagation(); 3305 } else {3306 // Keep focus inside the media modal3307 this.focusManager;3308 3308 } 3309 3309 } … … 4405 4405 this.click(); 4406 4406 } 4407 4408 // When selecting a tab along the left side, 4409 // focus should be transferred into the main panel 4410 $('.media-frame-content input').first().focus(); 4407 4411 }, 4408 4412 … … 4736 4740 toggleSelectionHandler: function( event ) { 4737 4741 var method; 4742 4743 // Catch arrow events 4744 if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) { 4745 this.arrowEvent(event); 4746 return; 4747 } 4748 4738 4749 // Catch enter and space events 4739 4750 if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { … … 4756 4767 method: method 4757 4768 }); 4769 }, 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; 4758 4817 }, 4759 4818 /** … … 4793 4852 selection.add( models ); 4794 4853 selection.single( model ); 4854 4855 // When selecting attachments, focus should be transferred to the right details panel 4856 $('.attachment-details input').first().focus(); 4857 4795 4858 return; 4796 4859 … … 4800 4863 selection[ this.selected() ? 'remove' : 'add' ]( model ); 4801 4864 selection.single( model ); 4865 4866 if ( this.selected() ) { 4867 // When selecting an attachment, focus should be transferred to the right details panel 4868 $('.attachment-details input').first().focus(); 4869 } 4870 4802 4871 return; 4803 4872 } … … 4851 4920 } 4852 4921 4853 this.$el.addClass('selected').attr('aria-checked', true); 4922 this.$el.addClass( 'selected' ).attr( 'aria-checked', true ) 4923 .find( '.check' ).attr( 'tabindex', '0' ); 4924 4925 // When selecting an attachment, focus should be transferred to the right details panel 4926 $('.attachment-details input').first().focus(); 4854 4927 }, 4855 4928 /** … … 4866 4939 return; 4867 4940 } 4868 this.$el.removeClass('selected').attr('aria-checked', false); 4941 this.$el.removeClass( 'selected' ).attr( 'aria-checked', false ) 4942 .find( '.check' ).attr( 'tabindex', '-1' ); 4869 4943 }, 4870 4944 /** … … 5028 5102 if ( selection.where( { id: this.model.get( 'id' ) } ).length ) { 5029 5103 selection.remove( this.model ); 5104 // Move focus back to the attachment tile (from the check). 5105 this.$el.focus(); 5030 5106 } else { 5031 5107 selection.add( this.model ); … … 6238 6314 'click .trash-attachment': 'trashAttachment', 6239 6315 'click .edit-attachment': 'editAttachment', 6240 'click .refresh-attachment': 'refreshAttachment' 6316 'click .refresh-attachment': 'refreshAttachment', 6317 'keydown': 'toggleSelectionHandler' 6241 6318 }, 6242 6319 … … 6301 6378 event.preventDefault(); 6302 6379 this.model.fetch(); 6380 }, 6381 /** 6382 * @param {Object} event 6383 */ 6384 toggleSelectionHandler: function( event ) { 6385 // Reverse tabbing out of the right details panel 6386 // should take me back to the item in the list that was being edited. 6387 if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === $( ':tabbable', this.$el ).filter( ':first' )[0] ) { 6388 $('.attachments-browser .details').focus(); 6389 return false; 6390 } 6303 6391 } 6304 6392
Note: See TracChangeset
for help on using the changeset viewer.