WordPress.org

Make WordPress Core

Ticket #23560: 23560.4.diff

File 23560.4.diff, 5.1 KB (added by atimmer, 6 years ago)
  • src/wp-includes/css/media-views.css

     
    431431        border-right: 0;
    432432}
    433433
    434 .media-router > a:active,
    435 .media-router > a:focus {
     434.media-router > a:active {
    436435        outline: none;
    437436}
    438437
     
    635634        user-select:         none;
    636635}
    637636
     637.attachment:focus {
     638        box-shadow: 0px 0px 2pt 2pt #1e8cbe;
     639        outline: none;
     640}
     641
     642.isIE .attachment:focus {
     643        outline: #1e8cbe solid;
     644}
     645
    638646.selected.attachment {
    639647        box-shadow:
    640648                0 0 0 1px #fff,
    641649                0 0 0 3px #ccc;
    642650}
    643651
     652.isIE .attachment.selected {
     653        outline: #1e8cbe solid;
     654}
     655
    644656.details.attachment {
    645657        box-shadow:
    646658                0 0 0 1px #fff,
     
    864876        right: 300px;
    865877        bottom: 0;
    866878        overflow: auto;
     879        outline: none;
    867880}
    868881
    869882.attachments-browser .instructions {
  • src/wp-includes/js/media-views.js

     
    16381638                        if ( ! this.views.attached || ! this.$el.is(':visible') )
    16391639                                return this;
    16401640
    1641                         this.$el.hide();
     1641                        // Hide modal and remove restricted media modal tab focus once it's closed
     1642                        this.$el.hide().undelegate( 'keydown' );
     1643
     1644                        // Put focus back in useful location once modal is closed
     1645                        $('#wpbody-content').focus();
     1646
    16421647                        this.propagate('close');
    16431648
    16441649                        // If the `freeze` option is set, restore the container's scroll position.
     
    16841689                                this.escape();
    16851690                                return;
    16861691                        }
     1692
     1693                        // Keep tab focus within media modal while it's open
     1694                        if ( $.ui.keyCode.TAB !== event.keyCode )
     1695                                return;
     1696
     1697                        var tabbables = $( ':tabbable', this.$el ),
     1698                                first = tabbables.filter( ':first' ),
     1699                                last  = tabbables.filter( ':last' );
     1700
     1701                        if ( event.target === last[0] && !event.shiftKey ) {
     1702                                first.focus();
     1703                                return false;
     1704                        } else if ( event.target === first[0] && event.shiftKey ) {
     1705                                last.focus();
     1706                                return false;
     1707                        }
    16871708                }
    16881709        });
    16891710
     
    24972518                className: 'attachment',
    24982519                template:  media.template('attachment'),
    24992520
     2521                attributes: {
     2522                        tabIndex: 0,
     2523                        role: 'checkbox'
     2524                },
     2525
    25002526                events: {
    25012527                        'click .attachment-preview':      'toggleSelectionHandler',
    25022528                        'change [data-setting]':          'updateSetting',
     
    25052531                        'change [data-setting] textarea': 'updateSetting',
    25062532                        'click .close':                   'removeFromLibrary',
    25072533                        'click .check':                   'removeFromSelection',
    2508                         'click a':                        'preventDefault'
     2534                        'click a':                        'preventDefault',
     2535                        'keydown':                                                'toggleSelectionHandler'
    25092536                },
    25102537
    25112538                buttons: {},
     
    25132540                initialize: function() {
    25142541                        var selection = this.options.selection;
    25152542
     2543                        this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false);
     2544
    25162545                        this.model.on( 'change:sizes change:uploading', this.render, this );
    25172546                        this.model.on( 'change:title', this._syncTitle, this );
    25182547                        this.model.on( 'change:caption', this._syncCaption, this );
     
    26032632                toggleSelectionHandler: function( event ) {
    26042633                        var method;
    26052634
     2635                        if ( 'keydown' === event.type && $.ui.keyCode.ENTER !== event.keyCode && $.ui.keyCode.SPACE !== event.keyCode )
     2636                                return;
     2637
    26062638                        if ( event.shiftKey )
    26072639                                method = 'between';
    26082640                        else if ( event.ctrlKey || event.metaKey )
     
    26862718                        if ( ! selection || ( collection && collection !== selection ) )
    26872719                                return;
    26882720
    2689                         this.$el.addClass('selected');
     2721                        this.$el.addClass('selected').attr('aria-checked', true);
    26902722                },
    26912723
    26922724                deselect: function( model, collection ) {
     
    26982730                        if ( ! selection || ( collection && collection !== selection ) )
    26992731                                return;
    27002732
    2701                         this.$el.removeClass('selected');
     2733                        this.$el.removeClass('selected').attr('aria-checked', false);
    27022734                },
    27032735
    27042736                details: function( model, collection ) {
     
    28802912                tagName:   'ul',
    28812913                className: 'attachments',
    28822914
     2915                attributes: {
     2916                        tabIndex: -1
     2917                },
     2918
    28832919                cssTemplate: media.template('attachments-css'),
    28842920
    28852921                events: {
  • src/wp-includes/media-template.php

     
    1515function wp_print_media_templates() {
    1616        global $is_IE;
    1717        $class = 'media-modal wp-core-ui';
     18        if ( $is_IE )
     19                $class .= ' isIE';
    1820        if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
    1921                $class .= ' ie7';
    2022        ?>
     
    134136                        <# } else if ( 'image' === data.type ) { #>
    135137                                <div class="thumbnail">
    136138                                        <div class="centered">
    137                                                 <img src="{{ data.size.url }}" draggable="false" />
     139                                                <img src="{{ data.size.url }}" draggable="false" alt="" />
    138140                                        </div>
    139141                                </div>
    140142                        <# } else { #>
     
    149151                        <# } #>
    150152
    151153                        <# if ( data.buttons.check ) { #>
    152                                 <a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
     154                                <a class="check" href="#" title="<?php _e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
    153155                        <# } #>
    154156                </div>
    155157                <#