From 5328374b731a6c98b2f726c5431b3a411aa355db Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 20 Jul 2017 03:51:34 +0700
Subject: [PATCH] Make goTo link accessible

---
 .../client/components/Comment.css             | 29 +++++++++++--------
 .../client/components/Comment.js              |  7 ++---
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.css b/plugins/talk-plugin-featured-comments/client/components/Comment.css
index 640d572f6..36f3e790e 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Comment.css
+++ b/plugins/talk-plugin-featured-comments/client/components/Comment.css
@@ -1,38 +1,43 @@
-.featuredComment {
+.root {
   margin: 10px 0 35px;
 }
 
-.featuredComment:last-child {
+.root:last-child {
   margin: 10px 0;
 }
 
-.featuredComment .goTo {
+.goTo {
   color: #1d5294;
   font-size: 13px;
   padding: 5px 0;
   display: inline-block;
 }
 
-.featuredComment .repliesIcon {
+.repliesIcon {
   font-size: 16px;
   vertical-align: middle;
   line-height: 13px;
   font-weight: bold;
 }
 
-.featuredComment .goToIcon {
+.goToIcon {
   font-size: 16px;
   vertical-align: middle;
   line-height: 13px;
   font-weight: bold;
 }
 
-.featuredComment .goTo:hover {
-  cursor: pointer;
+.goTo {
+
+  /* TODO: figure out the best location to include the `reset.css` */
+  composes: buttonReset from "coral-framework/styles/reset.css";
+}
+
+.goTo:hover {
   text-decoration: underline;
 }
 
-.featuredComment .quote {
+.quote {
   line-height: 20px;
   text-align: left;
   letter-spacing: 0.1px;
@@ -41,11 +46,11 @@
   margin-bottom: 10px;
 }
 
-.featuredComment .quote:before {
-  content: open-quote; 
+.quote:before {
+  content: open-quote;
 }
 
-.featuredComment .quote:after  {
+.quote:after  {
   content: close-quote;
 }
 
@@ -59,4 +64,4 @@
 
 .actionsContainer {
   text-align: right;
-}
\ No newline at end of file
+}
diff --git a/plugins/talk-plugin-featured-comments/client/components/Comment.js b/plugins/talk-plugin-featured-comments/client/components/Comment.js
index 2878351df..01b5f864c 100644
--- a/plugins/talk-plugin-featured-comments/client/components/Comment.js
+++ b/plugins/talk-plugin-featured-comments/client/components/Comment.js
@@ -15,7 +15,7 @@ class Comment extends React.Component {
   render() {
     const {comment, asset, root, data} = this.props;
     return (
-      <div className={cn(styles.featuredComment, `${pluginName}-comment`)}>
+      <div className={cn(styles.root, `${pluginName}-comment`)}>
 
         <blockquote className={cn(styles.quote, `${pluginName}-comment-body`)}>
           {comment.body}
@@ -43,10 +43,9 @@ class Comment extends React.Component {
             />
           </div>
           <div className={cn(styles.actionsContainer, `${pluginName}-comment-actions`)}>
-            <a className={cn(styles.goTo, `${pluginName}-comment-go-to`)}
-              onClick={this.viewComment}>
+            <button className={cn(styles.goTo, `${pluginName}-comment-go-to`)} onClick={this.viewComment}>
               <Icon name="forum" className={styles.repliesIcon} /> {comment.replyCount} | {t('talk-plugin-featured-comments.go_to_conversation')} <Icon name="keyboard_arrow_right" className={styles.goToIcon} />
-            </a>
+            </button>
           </div>
         </footer>
       </div>