Changeset 1249

Timestamp:

02/10/2015 10:16:17 PM (10 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:

• content-single.php (modified) (1 diff)
• js/theme.js (modified) (1 diff)
• style.css (modified) (2 diffs)
• view-templates/theme-single.php (modified) (4 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/content-single.php

@@ -67 +67 @@
                             <span class="counter-bar" style="width: <?php echo 92 * ( $rate_count / $theme->num_ratings ); ?>px;"></span>
                         </span>
+                        <span class="counter-count"><?php echo $rate_count; ?></span>
                     </a>
-                    <span class="counter-count"><?php echo $rate_count; ?></span>
                 </div>
                 <?php

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js

@@ -357 +357 @@
                 });
             });
+        },
+
+        // Keeps :focus within the theme details elements.
+        containFocus: function( $el ) {
+            var $target;
+
+            // Move focus to the primary action
+            _.delay( function() {
+                $( '.theme-wrap a.button-primary:visible' ).focus();
+            }, 500 );
+
+            $el.on( 'keydown.wp-themes', function( event ) {
+
+                // Tab key
+                if ( event.which === 9 ) {
+                    $target = $( event.target );
+
+                    // Keep focus within the overlay by making the last link on theme actions
+                    // switch focus to button.left on tabbing and vice versa
+                    if ( $target.is( 'button.close' ) && event.shiftKey ) {
+                        $el.find( '.theme-tags a:last-child' ).focus();
+                        event.preventDefault();
+                    } else if ( $target.is( '.theme-tags a:last-child' ) ) {
+                        $el.find( 'button.close' ).focus();
+                        event.preventDefault();
+                    }
+                }
+            });
         }
     });

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/style.css

@@ -191 +191 @@
     margin-right: 7%;
 }
-
+.theme-wrap .theme-ratings .counter-container,
+.theme-wrap .theme-ratings .counter-container a {
+    display: inline-block;
+}
+.theme-wrap .theme-ratings .counter-label,
+.theme-wrap .theme-ratings .counter-count {
+    line-height: 1.75;
+}
 .theme-wrap .theme-ratings .counter-label {
     float: left;
@@ -209 +216 @@
 }
 .theme-wrap .theme-ratings .counter-count {
+    float: right;
     margin-left: 5px;
 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php

@@ -61 +61 @@
                                     <span class="counter-bar" style="width: {{ 92 * data.ratings[5] / data.num_ratings }}px;"></span>
                                 </span>
+                                <span class="counter-count">{{ data.ratings[5] }}</span>
                             </a>
-                            <span class="counter-count">{{ data.ratings[5] }}</span>
                         </div>
                         <div class="counter-container">
@@ -70 +70 @@
                                     <span class="counter-bar" style="width: {{ 92 * data.ratings[4] / data.num_ratings }}px;"></span>
                                 </span>
+                                <span class="counter-count">{{ data.ratings[4] }}</span>
                             </a>
-                            <span class="counter-count">{{ data.ratings[4] }}</span>
                         </div>
                         <div class="counter-container">
@@ -88 +88 @@
                                     <span class="counter-bar" style="width: {{ 92 * data.ratings[2] / data.num_ratings }}px;"></span>
                                 </span>
+                                <span class="counter-count">{{ data.ratings[2] }}</span>
                             </a>
-                            <span class="counter-count">{{ data.ratings[2] }}</span>
                         </div>
                         <div class="counter-container">
@@ -97 +97 @@
                                     <span class="counter-bar" style="width: {{ 92 * data.ratings[1] / data.num_ratings }}px;"></span>
                                 </span>
+                                <span class="counter-count">{{ data.ratings[1] }}</span>
                             </a>
-                            <span class="counter-count">{{ data.ratings[1] }}</span>
                         </div>
                     <# } #>