Changeset 4467

Timestamp:

12/04/2016 05:14:43 PM (8 years ago)

Author:

obenland

Message:

Plugin Directory: Provide focus styles and context for favorite button.

Fixes #2294.

Location:

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

Files:

• client/components/plugin/favorite-button/button.jsx (modified) (5 diffs)
• client/components/plugin/favorite-button/index.jsx (modified) (3 diffs)
• client/components/plugin/favorite-button/style.scss (modified) (1 diff)
• css/style-rtl.css (modified) (1 diff)
• css/style.css (modified) (1 diff)
• template-parts/plugin-single.php (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/favorite-button/button.jsx

@@ -1 +1 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import includes from 'lodash/includes';
 
-export default React.createClass( {
+const FavoriteButton = React.createClass( {
     displayName: 'FavoriteButton',
 
-    getInitialState: function() {
-        return {
-            favorite: this.props.initialFavorite
-        };
-    },
-
     toggleFavorite( event ) {
-        const component = this,
-            $button = jQuery( event.target );
+        const $button = jQuery( event.target );
 
         this.props.toggleFavorite( event );
@@ -18 +13 @@
         $button.addClass( 'is-animating' ).one( 'animationend', function() {
             $button.toggleClass( 'is-animating favorited' );
-            component.setState( { favorite: ! component.state.favorite } );
         } );
     },
@@ -25 +19 @@
         let classNames = [ 'plugin-favorite-heart' ];
 
-        if ( this.state.favorite ) {
+        if ( this.props.favorite ) {
             classNames.push( 'favorited' );
         }
@@ -32 +26 @@
             <div className="plugin-favorite">
                 <button type="button" className={ classNames.join( ' ' ) } onClick={ this.toggleFavorite } >
-                    <span className="screen-reader-text">{ `Favorite ${ this.props.plugin.name }` }</span>
+                    <span className="screen-reader-text">
+                        { this.props.favorite
+                            ? `Unfavorite ${ this.props.plugin.name }`
+                            : `Favorite ${ this.props.plugin.name }`
+                        }
+                    </span>
                 </button>
             </div>
@@ -38 +37 @@
     }
 } );
+
+export default connect(
+    ( state, { plugin } ) => ( {
+        favorite: includes( state.favorites, plugin.slug )
+    } ),
+)( FavoriteButton );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/favorite-button/index.jsx

@@ -1 +1 @@
 import React from 'react';
-import { connect } from 'react-redux';
-import includes from 'lodash/includes';
 
 import FavoriteButton from './button';
@@ -10 +8 @@
 } from 'actions/index';
 
-const FavoriteButtonContainer = React.createClass( {
+export default React.createClass( {
     componentDidMount() {
         this.getFavorites();
@@ -34 +32 @@
 
     render() {
-        return <FavoriteButton { ...this.props } toggleFavorite={ this.toggleFavorite } />;
+        return <FavoriteButton toggleFavorite={ this.toggleFavorite } />;
     }
 } );
-
-const mapStateToProps = ( state, ownProps ) => ( {
-    initialFavorite: includes( state.favorites, ownProps.plugin.slug )
-} );
-
-export default connect( mapStateToProps )( FavoriteButtonContainer );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/favorite-button/style.scss

@@ -69 +69 @@
         }
 
+        &:focus {
+            outline: thin dotted;
+        }
+
         &:hover,
         &:focus {

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

@@ -2171 +2171 @@
 }
 
+.plugin-favorite .plugin-favorite-heart:focus {
+  outline: thin dotted;
+}
+
 .plugin-favorite .plugin-favorite-heart:hover, .plugin-favorite .plugin-favorite-heart:focus {
   text-decoration: none;

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

@@ -2171 +2171 @@
 }
 
+.plugin-favorite .plugin-favorite-heart:focus {
+  outline: thin dotted;
+}
+
 .plugin-favorite .plugin-favorite-heart:hover, .plugin-favorite .plugin-favorite-heart:focus {
   text-decoration: none;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin-single.php

@@ -68 +68 @@
             if ( is_user_logged_in() ) :
                 $url = Template::get_favourite_link( $post );
+                $is_favorited = Tools::favorited_plugin( $post );
                 ?>
                 <div class="plugin-favorite">
-                    <a href="<?php echo esc_url( $url ); ?>" class="plugin-favorite-heart<?php echo Tools::favorited_plugin( $post ) ? ' favorited' : ''; ?>"></a>
+                    <a href="<?php echo esc_url( $url ); ?>" class="plugin-favorite-heart<?php echo $is_favorited ? ' favorited' : ''; ?>">
+                        <span class="screen-reader-text">
+                            <?php printf( $is_favorited ? __( 'Favorite %s' ) : __( 'Unfavorite %s' ), get_the_title() ); ?>
+                        </span>
+                    </a>
                     <script>
                         jQuery( '.plugin-favorite-heart' )