WordPress.org

Making WordPress.org

Changeset 1249


Ignore:
Timestamp:
02/10/2015 10:16:17 PM (5 years ago)
Author:
obenland
Message:

WP.org Themes: Make sure all links inside the modal are focusable.

We will probably have to revisit this once we're done rearranging the modal,
but this should only be a matter of identifing the first and last focusable
element.

See http://make.wordpress.org/themes/2015/02/05/test-the-new-theme-directory/#comment-40899
Fixes #854.

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

Legend:

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

    r1240 r1249  
    6767                            <span class="counter-bar" style="width: <?php echo 92 * ( $rate_count / $theme->num_ratings ); ?>px;"></span>
    6868                        </span>
     69                        <span class="counter-count"><?php echo $rate_count; ?></span>
    6970                    </a>
    70                     <span class="counter-count"><?php echo $rate_count; ?></span>
    7171                </div>
    7272                <?php
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js

    r1247 r1249  
    357357                });
    358358            });
     359        },
     360
     361        // Keeps :focus within the theme details elements.
     362        containFocus: function( $el ) {
     363            var $target;
     364
     365            // Move focus to the primary action
     366            _.delay( function() {
     367                $( '.theme-wrap a.button-primary:visible' ).focus();
     368            }, 500 );
     369
     370            $el.on( 'keydown.wp-themes', function( event ) {
     371
     372                // Tab key
     373                if ( event.which === 9 ) {
     374                    $target = $( event.target );
     375
     376                    // Keep focus within the overlay by making the last link on theme actions
     377                    // switch focus to button.left on tabbing and vice versa
     378                    if ( $target.is( 'button.close' ) && event.shiftKey ) {
     379                        $el.find( '.theme-tags a:last-child' ).focus();
     380                        event.preventDefault();
     381                    } else if ( $target.is( '.theme-tags a:last-child' ) ) {
     382                        $el.find( 'button.close' ).focus();
     383                        event.preventDefault();
     384                    }
     385                }
     386            });
    359387        }
    360388    });
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/style.css

    r1248 r1249  
    191191    margin-right: 7%;
    192192}
    193 
     193.theme-wrap .theme-ratings .counter-container,
     194.theme-wrap .theme-ratings .counter-container a {
     195    display: inline-block;
     196}
     197.theme-wrap .theme-ratings .counter-label,
     198.theme-wrap .theme-ratings .counter-count {
     199    line-height: 1.75;
     200}
    194201.theme-wrap .theme-ratings .counter-label {
    195202    float: left;
     
    209216}
    210217.theme-wrap .theme-ratings .counter-count {
     218    float: right;
    211219    margin-left: 5px;
    212220}
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php

    r1238 r1249  
    6161                                    <span class="counter-bar" style="width: {{ 92 * data.ratings[5] / data.num_ratings }}px;"></span>
    6262                                </span>
     63                                <span class="counter-count">{{ data.ratings[5] }}</span>
    6364                            </a>
    64                             <span class="counter-count">{{ data.ratings[5] }}</span>
    6565                        </div>
    6666                        <div class="counter-container">
     
    7070                                    <span class="counter-bar" style="width: {{ 92 * data.ratings[4] / data.num_ratings }}px;"></span>
    7171                                </span>
     72                                <span class="counter-count">{{ data.ratings[4] }}</span>
    7273                            </a>
    73                             <span class="counter-count">{{ data.ratings[4] }}</span>
    7474                        </div>
    7575                        <div class="counter-container">
     
    8888                                    <span class="counter-bar" style="width: {{ 92 * data.ratings[2] / data.num_ratings }}px;"></span>
    8989                                </span>
     90                                <span class="counter-count">{{ data.ratings[2] }}</span>
    9091                            </a>
    91                             <span class="counter-count">{{ data.ratings[2] }}</span>
    9292                        </div>
    9393                        <div class="counter-container">
     
    9797                                    <span class="counter-bar" style="width: {{ 92 * data.ratings[1] / data.num_ratings }}px;"></span>
    9898                                </span>
     99                                <span class="counter-count">{{ data.ratings[1] }}</span>
    99100                            </a>
    100                             <span class="counter-count">{{ data.ratings[1] }}</span>
    101101                        </div>
    102102                    <# } #>
Note: See TracChangeset for help on using the changeset viewer.