Make WordPress Core

Changeset 29220


Ignore:
Timestamp:
07/18/2014 07:56:25 AM (10 years ago)
Author:
helen
Message:

Keyboard accessibility for the media modal:

  • Arrow keys navigate between items in the grid.
  • Transfer focus into the panel when selecting a tab along the side.
  • Transfer focus into the details sidebar when selecting an item and vice versa.
  • Set initial focus on the close button so that it is visible.

props celloexpressions, lessbloat, ericlewis. fixes #25100, #25101, #28704. see #23560.

Location:
trunk/src/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/css/media-views.css

    r29212 r29220  
    722722        0 0 0 1px #fff,
    723723        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;
    724731}
    725732
     
    914921
    915922.attachment.details .check,
     923.attachment.selected .check:focus,
    916924.media-grid-view .attachment.selected .check {
    917925    background-color: #1e8cbe;
     
    936944
    937945.attachment.details .check:hover div,
     946.attachment.selected .check:focus div,
    938947.media-grid-view .attachment.selected .check:hover div {
    939948    background-position: -60px 0;
     
    14771486    -webkit-box-shadow: none;
    14781487    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;
    14791496}
    14801497
  • trunk/src/wp-includes/js/media-views.js

    r29213 r29220  
    759759            }
    760760            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();
    761764        },
    762765
     
    32223225            }
    32233226
    3224             $el.show().focus();
     3227            $el.show().find( '.media-modal-close' ).focus();
    32253228            return this.propagate('open');
    32263229        },
     
    33033306                this.escape();
    33043307                event.stopImmediatePropagation();
    3305             } else {
    3306                 // Keep focus inside the media modal
    3307                 this.focusManager;
    33083308            }
    33093309        }
     
    44054405                this.click();
    44064406            }
     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();
    44074411        },
    44084412
     
    47364740        toggleSelectionHandler: function( event ) {
    47374741            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
    47384749            // Catch enter and space events
    47394750            if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
     
    47564767                method: method
    47574768            });
     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;
    47584817        },
    47594818        /**
     
    47934852                selection.add( models );
    47944853                selection.single( model );
     4854
     4855                // When selecting attachments, focus should be transferred to the right details panel
     4856                $('.attachment-details input').first().focus();
     4857
    47954858                return;
    47964859
     
    48004863                selection[ this.selected() ? 'remove' : 'add' ]( model );
    48014864                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
    48024871                return;
    48034872            }
     
    48514920            }
    48524921
    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();
    48544927        },
    48554928        /**
     
    48664939                return;
    48674940            }
    4868             this.$el.removeClass('selected').attr('aria-checked', false);
     4941            this.$el.removeClass( 'selected' ).attr( 'aria-checked', false )
     4942                    .find( '.check' ).attr( 'tabindex', '-1' );
    48694943        },
    48704944        /**
     
    50285102            if ( selection.where( { id: this.model.get( 'id' ) } ).length ) {
    50295103                selection.remove( this.model );
     5104                // Move focus back to the attachment tile (from the check).
     5105                this.$el.focus();
    50305106            } else {
    50315107                selection.add( this.model );
     
    62386314            'click .trash-attachment':        'trashAttachment',
    62396315            'click .edit-attachment':         'editAttachment',
    6240             'click .refresh-attachment':      'refreshAttachment'
     6316            'click .refresh-attachment':      'refreshAttachment',
     6317            'keydown':                        'toggleSelectionHandler'
    62416318        },
    62426319
     
    63016378            event.preventDefault();
    63026379            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            }
    63036391        }
    63046392
Note: See TracChangeset for help on using the changeset viewer.