Changeset 26956

Timestamp:

01/15/2014 08:28:04 AM (13 years ago)

Author:

nacin

Message:

Keyboard navigation friendliness for themes.php.

Merges [26922] to the 3.8 branch.

props matveb, azaozz, jorbin.
fixes #26527.

Location:

branches/3.8

Files:

• . (modified) (1 prop)
• src/wp-admin/css/wp-admin.css (modified) (4 diffs)
• src/wp-admin/js/theme.js (modified) (8 diffs)
• src/wp-admin/themes.php (modified) (2 diffs)

branches/3.8/src/wp-admin/css/wp-admin.css

@@ -6495 +6495 @@
         transition:         opacity 0.1s ease-in-out;
 }
+.theme-browser .theme:focus {
+        outline: 1px dotted #222;
+}
+/* Hide shortcut actions and hover feedback when using tab navigation */
+.theme-browser .theme:focus .theme-actions {
+        display: none;
+}
+/* Restore display of theme controls if you hover a focused theme */
+.theme-browser .theme:focus:hover .theme-actions {
+        display: block;
+}
+.theme-browser .theme:focus .more-details {
+        opacity: 1;
+}
+/* Current theme needs to have its action always on view */
+.theme-browser .theme.active:focus .theme-actions {
+        display: block;
+}
 
 .theme-browser.rendered .theme:hover .more-details {
@@ -6720 +6738 @@
         text-align: center;
         float: right;
+        border: 0;
         border-left: 1px solid #ddd;
-}
-
-.theme-overlay .theme-header .close:hover:before {
+        background-color: transparent;
+}
+
+.theme-overlay .theme-header .close:hover:before,
+.theme-overlay .theme-header .close:focus:before {
         color: #fff;
 }
@@ -6740 +6761 @@
         cursor: pointer;
         color: #777;
+        background-color: transparent;
         height: 48px;
         width: 54px;
         float: left;
         text-align: center;
+        border: 0;
         border-right: 1px solid #ddd;
-        -webkit-user-select: none;
-        -moz-user-select:    none;
-        -ms-user-select:     none;
-        user-select:         none;
 }
 
 .theme-overlay .theme-header .close:hover,
 .theme-overlay .theme-header .right:hover,
-.theme-overlay .theme-header .left:hover {
+.theme-overlay .theme-header .left:hover,
+.theme-overlay .theme-header .close:focus,
+.theme-overlay .theme-header .right:focus,
+.theme-overlay .theme-header .left:focus {
         background: #0074a2;
         color: #fff;
@@ -6862 +6884 @@
 }
 
-.theme-overlay .theme-actions .delete-theme:hover {
+.theme-overlay .theme-actions .delete-theme:hover,
+.theme-overlay .theme-actions .delete-theme:focus {
         background: #d54e21;
         color: #fff;

branches/3.8/src/wp-admin/js/theme.js

@@ -189 +189 @@
         events: {
                 'click': 'expand',
+                'keydown': 'expand',
                 'touchend': 'expand',
                 'touchmove': 'preventExpand'
@@ -198 +199 @@
                 var data = this.model.toJSON();
                 // Render themes using the html template
-                this.$el.html( this.html( data ) );
+                this.$el.html( this.html( data ) ).attr( 'tabindex', 0 );
+
                 // Renders active theme styles
                 this.activeTheme();
@@ -220 +222 @@
                 var self = this;
 
+                event = event || window.event;
+
+                // 'enter' and 'space' keys expand the details view when a theme is :focused
+                if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
+                        return;
+                }
+
                 // Bail if the user scrolled on a touch device
                 if ( this.touchDrag === true ) {
                         return this.touchDrag = false;
                 }
-
-                event = event || window.event;
 
                 // Prevent the modal from showing when the user clicks
@@ -232 +239 @@
                         return;
                 }
+
+                // Set focused theme to current element
+                themes.focusedTheme = this.$el;
 
                 this.trigger( 'theme:expand', self.model.cid );
@@ -267 +277 @@
                 // Checks screenshot size
                 this.screenshotCheck( this.$el );
+                // Contain "tabbing" inside the overlay
+                this.containFocus( this.$el );
         },
 
@@ -276 +288 @@
         },
 
+        // 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.left' ) && event.shiftKey ) {
+                                        $el.find( '.theme-actions a:last-child' ).focus();
+                                        event.preventDefault();
+                                } else if ( $target.is( '.theme-actions a:last-child' ) ) {
+                                        $el.find( 'button.left' ).focus();
+                                        event.preventDefault();
+                                }
+                        }
+                });
+        },
+
         // Single theme overlay screen
         // It's shown when clicking a theme
@@ -292 +332 @@
                 // and don't close it unless the target was
                 // the div.back button
-                if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( 'div.close' ) || event.keyCode === 27 ) {
+                if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) {
 
                         // Add a temporary closing class while overlay fades out
@@ -312 +352 @@
                                 // Restore scroll position
                                 document.body.scrollTop = scroll;
+
+                                // Return focus to the theme div
+                                if ( themes.focusedTheme ) {
+                                        themes.focusedTheme.focus();
+                                }
                         });
                 }

branches/3.8/src/wp-admin/themes.php

@@ -193 +193 @@
 
 foreach ( $themes as $theme ) : ?>
-<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>">
+<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0">
         <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
                 <div class="theme-screenshot">
@@ -310 +310 @@
         <div class="theme-wrap">
                 <div class="theme-header">
-                        <div alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></div>
-                        <div alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></div>
-                        <div alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></div>
+                        <button alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></button>
+                        <button alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></button>
+                        <button alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></button>
                 </div>
                 <div class="theme-about">