WordPress.org

Make WordPress Core

Ticket #23560: 23560.5.diff

File 23560.5.diff, 8.2 KB (added by lessbloat, 6 years ago)
  • wp-includes/js/media-views.js

     
    13751375                                                        frame.setState( previous );
    13761376                                                else
    13771377                                                        frame.close();
     1378
     1379                                                // Keep focus inside media modal
     1380                                                // after cancelling a gallery
     1381                                                $('.media-modal-close').focus();
    13781382                                        }
    13791383                                },
    13801384                                separateCancel: new media.View({
     
    14851489                                        }) );
    14861490
    14871491                                        this.controller.setState('gallery-edit');
     1492
     1493                                        // Keep focus inside media modal
     1494                                        // after jumping to gallery view
     1495                                        $('.media-modal-close').focus();
    14881496                                }
    14891497                        });
    14901498                },
     
    16371645                        if ( ! this.views.attached || ! this.$el.is(':visible') )
    16381646                                return this;
    16391647
    1640                         this.$el.hide();
     1648                        // Hide modal and remove restricted media modal tab focus once it's closed
     1649                        this.$el.hide().undelegate( 'keydown' );
     1650
     1651                        // Put focus back in useful location once modal is closed
     1652                        $('#wpbody-content').focus();
     1653
    16411654                        this.propagate('close');
    16421655
    16431656                        // If the `freeze` option is set, restore the container's scroll position.
     
    16831696                                this.escape();
    16841697                                return;
    16851698                        }
    1686                 }
    1687         });
    16881699
    1689         // wp.media.view.FocusManager
    1690         // ----------------------------
    1691         media.view.FocusManager = media.View.extend({
    1692                 events: {
    1693                         keydown: 'recordTab',
    1694                         focusin: 'updateIndex'
    1695                 },
    1696 
    1697                 focus: function() {
    1698                         if ( _.isUndefined( this.index ) )
     1700                        if ( $.ui.keyCode.TAB !== event.keyCode )
    16991701                                return;
    17001702
    1701                         // Update our collection of `$tabbables`.
    1702                         this.$tabbables = this.$(':tabbable');
     1703                        // Keep tab focus within media modal while it's open
     1704                        this.tabbables = $( ':tabbable', this.$el );
     1705                        this.tabbableFirst = this.tabbables.filter( ':first' );
     1706                        this.tabbablesLast  = this.tabbables.filter( ':last' );
    17031707
    1704                         // If tab is saved, focus it.
    1705                         this.$tabbables.eq( this.index ).focus();
    1706                 },
    1707 
    1708                 recordTab: function( event ) {
    1709                         // Look for the tab key.
    1710                         if ( 9 !== event.keyCode )
    1711                                 return;
    1712 
    1713                         // First try to update the index.
    1714                         if ( _.isUndefined( this.index ) )
    1715                                 this.updateIndex( event );
    1716 
    1717                         // If we still don't have an index, bail.
    1718                         if ( _.isUndefined( this.index ) )
    1719                                 return;
    1720 
    1721                         var index = this.index + ( event.shiftKey ? -1 : 1 );
    1722 
    1723                         if ( index >= 0 && index < this.$tabbables.length )
    1724                                 this.index = index;
    1725                         else
    1726                                 delete this.index;
    1727                 },
    1728 
    1729                 updateIndex: function( event ) {
    1730                         this.$tabbables = this.$(':tabbable');
    1731 
    1732                         var index = this.$tabbables.index( event.target );
    1733 
    1734                         if ( -1 === index )
    1735                                 delete this.index;
    1736                         else
    1737                                 this.index = index;
     1708                        if ( event.target === this.tabbablesLast[0] && !event.shiftKey ) {
     1709                                this.tabbableFirst.focus();
     1710                                return false;
     1711                        } else if ( event.target === this.tabbableFirst[0] && event.shiftKey ) {
     1712                                this.tabbablesLast.focus();
     1713                                return false;
     1714                        }
    17381715                }
    17391716        });
    17401717
     
    24932470                className: 'attachment',
    24942471                template:  media.template('attachment'),
    24952472
     2473                attributes: {
     2474                        tabIndex: 0,
     2475                        role: 'checkbox'
     2476                },
     2477
    24962478                events: {
    24972479                        'click .attachment-preview':      'toggleSelectionHandler',
    24982480                        'change [data-setting]':          'updateSetting',
     
    25012483                        'change [data-setting] textarea': 'updateSetting',
    25022484                        'click .close':                   'removeFromLibrary',
    25032485                        'click .check':                   'removeFromSelection',
    2504                         'click a':                        'preventDefault'
     2486                        'click a':                        'preventDefault',
     2487                        'keydown':                                                'toggleSelectionHandler'
    25052488                },
    25062489
    25072490                buttons: {},
     
    25092492                initialize: function() {
    25102493                        var selection = this.options.selection;
    25112494
     2495                        this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false);
    25122496                        this.model.on( 'change:sizes change:uploading', this.render, this );
    25132497                        this.model.on( 'change:title', this._syncTitle, this );
    25142498                        this.model.on( 'change:caption', this._syncCaption, this );
     
    25992583                toggleSelectionHandler: function( event ) {
    26002584                        var method;
    26012585
     2586                        // Catch enter and space events
     2587                        if ( 'keydown' === event.type && $.ui.keyCode.ENTER !== event.keyCode && $.ui.keyCode.SPACE !== event.keyCode )
     2588                                return;
     2589
    26022590                        if ( event.shiftKey )
    26032591                                method = 'between';
    26042592                        else if ( event.ctrlKey || event.metaKey )
     
    26472635                                return;
    26482636                        }
    26492637
     2638                        // Fixes bug that loses focus when selecting a featured image
     2639                        if ( !method )
     2640                                method = 'add';
     2641
    26502642                        if ( method !== 'add' )
    26512643                                method = 'reset';
    26522644
     
    26822674                        if ( ! selection || ( collection && collection !== selection ) )
    26832675                                return;
    26842676
    2685                         this.$el.addClass('selected');
     2677                        this.$el.addClass('selected').attr('aria-checked', true);
    26862678                },
    26872679
    26882680                deselect: function( model, collection ) {
     
    26942686                        if ( ! selection || ( collection && collection !== selection ) )
    26952687                                return;
    26962688
    2697                         this.$el.removeClass('selected');
     2689                        this.$el.removeClass('selected').attr('aria-checked', false);
    26982690                },
    26992691
    27002692                details: function( model, collection ) {
     
    28762868                tagName:   'ul',
    28772869                className: 'attachments',
    28782870
     2871                attributes: {
     2872                        tabIndex: -1
     2873                },
     2874
    28792875                cssTemplate: media.template('attachments-css'),
    28802876
    28812877                events: {
     
    34883484                clear: function( event ) {
    34893485                        event.preventDefault();
    34903486                        this.collection.reset();
     3487
     3488                        // Keep focus inside media modal
     3489                        // after clear link is selected
     3490                        $('.media-modal-close').focus();
    34913491                }
    34923492        });
    34933493
     
    37313731                },
    37323732
    37333733                initialize: function() {
    3734                         this.focusManager = new media.view.FocusManager({
    3735                                 el: this.el
    3736                         });
    3737 
    37383734                        media.view.Attachment.prototype.initialize.apply( this, arguments );
    37393735                },
    37403736
    37413737                render: function() {
    37423738                        media.view.Attachment.prototype.render.apply( this, arguments );
    3743                         this.focusManager.focus();
    37443739                        return this;
    37453740                },
    37463741
     
    37493744
    37503745                        if ( confirm( l10n.warnDelete ) )
    37513746                                this.model.destroy();
     3747
     3748                        // Keep focus inside media modal
     3749                        // after image is deleted
     3750                        $('.media-modal-close').focus();
    37523751                },
    37533752
    37543753                editAttachment: function() {
     
    37773776                },
    37783777
    37793778                initialize: function() {
    3780                         this.focusManager = new media.view.FocusManager({
    3781                                 el: this.el
    3782                         });
    3783 
    37843779                        this.model.on( 'change:compat', this.render, this );
    37853780                },
    37863781
     
    38003795                        this.$el.html( compat.item );
    38013796                        this.views.render();
    38023797
    3803                         this.focusManager.focus();
    38043798                        return this;
    38053799                },
    38063800
  • 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        ?>
     
    142144                        <# } else if ( 'image' === data.type ) { #>
    143145                                <div class="thumbnail">
    144146                                        <div class="centered">
    145                                                 <img src="{{ data.size.url }}" draggable="false" />
     147                                                <img src="{{ data.size.url }}" draggable="false" alt="" />
    146148                                        </div>
    147149                                </div>
    148150                        <# } else { #>
     
    157159                        <# } #>
    158160
    159161                        <# if ( data.buttons.check ) { #>
    160                                 <a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
     162                                <a class="check" href="#" title="<?php _e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
    161163                        <# } #>
    162164                </div>
    163165                <#
  • wp-includes/css/media-views.css

     
    441441        border-right: 0;
    442442}
    443443
    444 .media-router > a:active,
    445 .media-router > a:focus {
     444.media-router > a:active {
    446445        outline: none;
    447446}
    448447
     
    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 .selected.attachment {
     653        outline: #1e8cbe solid;
     654}
     655
    644656.attachment-preview {
    645657        position: relative;
    646658        width: 199px;
     
    836848        right: 300px;
    837849        bottom: 0;
    838850        overflow: auto;
     851        outline: none;
    839852}
    840853
    841854.attachments-browser .instructions {