Indicate best comments. Add some aria labels

client/coral-embed-stream/src/Comment.js

@@ -17,7 +17,7 @@ import PubDate from 'coral-plugin-pubdate/PubDate';
 import {ReplyBox, ReplyButton} from 'coral-plugin-replies';
 import FlagComment from 'coral-plugin-flags/FlagComment';
 import LikeButton from 'coral-plugin-likes/LikeButton';
-import {BestButton, IfUserCanModifyBest, BEST_TAG, commentIsBest} from 'coral-plugin-best/BestButton';
+import {BestButton, IfUserCanModifyBest, BEST_TAG, commentIsBest, BestIndicator} from 'coral-plugin-best/BestButton';
 import LoadMore from 'coral-embed-stream/src/LoadMore';
 
 import styles from './Comment.css';
@@ -127,11 +127,15 @@ class Comment extends React.Component {
         <AuthorName
           author={comment.user}/>
         { isStaff(comment.tags)
-          ? <TagLabel isStaff={true}/>
+          ? <TagLabel>Staff</TagLabel>
+          : null }
+
+        { commentIsBest(comment)
+          ? <TagLabel><BestIndicator /></TagLabel>
           : null }
         <PubDate created_at={comment.created_at} />
         <Content body={comment.body} />
-          <div className="commentActionsLeft">
+          <div className="commentActionsLeft comment__action-container">
               <LikeButton
                 like={like}
                 id={comment.id}
@@ -151,7 +155,7 @@ class Comment extends React.Component {
                   removeBest={removeBestTag} />
               </IfUserCanModifyBest>
             </div>
-        <div className="commentActionsRight">
+        <div className="commentActionsRight comment__action-container">
           <PermalinkButton articleURL={asset.url} commentId={comment.id} />
           <FlagComment
             flag={flag && flag.current_user ? flag : dontagree}

client/coral-plugin-best/BestButton.js

@@ -16,6 +16,13 @@ const lang = new I18n(translations);
 // It would be best if the backend/api held this business logic
 const canModifyBestTag = ({roles = []} = {}) => roles && ['ADMIN', 'MODERATOR'].some(role => roles.includes(role));
 
+// Put this on a comment to show that it is best
+export const BestIndicator = ({children = <i className={'material-icons'} aria-hidden={true}>favorite</i>}) => (
+  <span aria-label={lang.t('commentIsBest')}>
+    { children } 
+  </span>
+);
+
 /**
  * Component that only renders children if the provided user prop can modify best tags
  */
@@ -94,8 +101,8 @@ export class BestButton extends Component {
               disabled={disabled}
               className={classnames('comment__action-button', `${name}-button`,
                                     'comment__action-button--nowrap', /* Can I do this to all buttons? 'comment__action-button--cursor-pointer', */
-                                    `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}>
-        <span className={`${name}-button-text`}>/* {lang.t(isBest ? 'unsetBest' : 'setBest')} */</span>
+                                    `e2e__${isBest ? 'unset' : 'set'}-best-comment`)}
+              aria-label={lang.t(isBest ? 'unsetBest' : 'setBest')}>
         <i className={`${name}-icon material-icons`} aria-hidden={true}>
           { isBest ? 'favorite' : 'favorite_border' }
         </i>

client/coral-plugin-best/translations.json

@@ -1,10 +1,12 @@
 {
   "en": {
     "setBest": "Tag as Best",
-    "unsetBest": "Untag as Best"
+    "unsetBest": "Untag as Best",
+    "commentIsBest": "This comment is one of the best"
   },
   "es": {
     "like": "Establecer como mejor",
-    "liked": "Desarmado como mejor"
+    "liked": "Desarmado como mejor",
+    "commentIsBest": "Este comentario es uno de los mejores"
   }
 }

client/coral-plugin-tag-label/TagLabel.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const TagLabel = ({isStaff}) => <div className='coral-plugin-tag-label'>
-  {isStaff ? 'Staff' : ''}
+const TagLabel = ({children}) => <div className='coral-plugin-tag-label'>
+  {children}
 </div>;
 
 export default TagLabel;