Make goTo link accessible

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;
-}
+}

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>