Making WordPress.org

Changeset 1250


Ignore:
Timestamp:
02/11/2015 12:04:00 AM (9 years ago)
Author:
obenland
Message:

WP.org Themes: Contain focus on navigational links when navigating.

Fixes #855.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js

    r1249 r1250  
    55        el: '#themes .theme-browser',
    66        searchContainer: ''
     7    });
     8
     9    _.extend( wp.themes.view.Themes.prototype, {
     10
     11        // Renders the overlay with the ThemeDetails view.
     12        // Uses the current model data.
     13        expand: function( id ) {
     14            var self = this;
     15
     16            // Set the current theme model
     17            this.model = self.collection.get( id );
     18
     19            // Trigger a route update for the current model
     20            wp.themes.router.navigate( wp.themes.router.baseUrl( wp.themes.router.themePath + this.model.id ) );
     21
     22            // Sets this.view to 'detail'
     23            this.setView( 'detail' );
     24            $( 'body' ).addClass( 'modal-open' );
     25
     26            // Set up the theme details view
     27            this.overlay = new wp.themes.view.Details({
     28                model: self.model
     29            });
     30
     31            this.overlay.render();
     32            this.$overlay.html( this.overlay.el );
     33
     34            // Bind to theme:next and theme:previous
     35            // triggered by the arrow keys
     36            //
     37            // Keep track of the current model so we
     38            // can infer an index position
     39            this.listenTo( this.overlay, 'theme:next', function() {
     40                // Renders the next theme on the overlay
     41                self.next( [ self.model.cid ] );
     42                $( '.theme-header' ).find( '.right' ).focus();
     43
     44            })
     45            .listenTo( this.overlay, 'theme:previous', function() {
     46                // Renders the previous theme on the overlay
     47                self.previous( [ self.model.cid ] );
     48                $( '.theme-header' ).find( '.left' ).focus();
     49            });
     50        }
    751    });
    852
     
    128172
    129173            // Set focused theme to current element
    130             themes.focusedTheme = this.$el;
     174            wp.themes.focusedTheme = this.$el;
    131175
    132176            this.trigger( 'theme:expand', self.model.cid );
     
    363407            var $target;
    364408
    365             // Move focus to the primary action
    366             _.delay( function() {
    367                 $( '.theme-wrap a.button-primary:visible' ).focus();
    368             }, 500 );
     409            // On first load of the modal, move focus to the primary action.
     410            if ( 1 === $( window.event.target ).closest( '.theme' ).length ) {
     411                _.delay( function() {
     412                    $( '.theme-wrap a.button-primary:visible' ).focus();
     413                }, 500 );
     414            }
    369415
    370416            $el.on( 'keydown.wp-themes', function( event ) {
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme.php

    r1238 r1250  
    77    <div class="theme-screenshot blank"></div>
    88    <# } #>
    9     <a class="more-details url" href="{{{ data.permalink }}}" rel="bookmark"><?php _ex( 'More Info', 'theme' ); ?></a>
     9    <a class="more-details url" href="{{{ data.permalink }}}" rel="bookmark" tabindex="-1"><?php _ex( 'More Info', 'theme' ); ?></a>
    1010    <div class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">{{ data.author }}</span>' ); ?></div>
    1111    <h3 class="theme-name entry-title">{{{ data.name }}}</h3>
Note: See TracChangeset for help on using the changeset viewer.