WordPress.org

Make WordPress Core

Ticket #23560: 23560.12.diff

File 23560.12.diff, 4.4 KB (added by celloexpressions, 5 years ago)

merge previous outstanding patches, selection focus, initial focus fix

  • src/wp-includes/css/media-views.css

     
    14781478        box-shadow: none;
    14791479}
    14801480
     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
    14811489.attachment.selection.details {
    14821490        -webkit-box-shadow:
    14831491                0 0 0 1px #fff,
  • src/wp-includes/js/media-views.js

     
    32213221                                };
    32223222                        }
    32233223
    3224                         $el.show().focus();
     3224                        $el.show().find( '.media-modal-close' ).focus();
    32253225                        return this.propagate('open');
    32263226                },
    32273227
     
    33023302                        if ( 27 === event.which && this.$el.is(':visible') ) {
    33033303                                this.escape();
    33043304                                event.stopImmediatePropagation();
    3305                         } else {
    3306                                 // Keep focus inside the media modal
    3307                                 this.focusManager;
    33083305                        }
    33093306                }
    33103307        });
     
    44044401                        } else {
    44054402                                this.click();
    44064403                        }
     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();
    44074408                },
    44084409
    44094410                click: function() {
     
    47354736                 */
    47364737                toggleSelectionHandler: function( event ) {
    47374738                        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                       
    47384746                        // Catch enter and space events
    47394747                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
    47404748                                return;
     
    47554763                        this.toggleSelection({
    47564764                                method: method
    47574765                        });
     4766                       
     4767                        // When selecting an image, focus should be transferred to the right details panel
     4768                        $('.attachment-details').find( ':focusable' ).first().focus();
    47584769                },
    47594770                /**
     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                /**
    47604819                 * @param {Object} options
    47614820                 */
    47624821                toggleSelection: function( options ) {
     
    62376296                        'click .delete-attachment':       'deleteAttachment',
    62386297                        'click .trash-attachment':        'trashAttachment',
    62396298                        'click .edit-attachment':         'editAttachment',
    6240                         'click .refresh-attachment':      'refreshAttachment'
     6299                        'click .refresh-attachment':      'refreshAttachment',
     6300                        'keydown':                        'toggleSelectionHandler'
    62416301                },
    62426302
    62436303                initialize: function() {
     
    63006360                        this.$el.removeClass('needs-refresh');
    63016361                        event.preventDefault();
    63026362                        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                        }
    63036374                }
    63046375
    63056376        });