From 5e5b0a3888f9b2940dc38a5dbde304b00f909a32 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 10 Jul 2018 16:29:07 -0300
Subject: [PATCH] Add aria props

---
 src/core/client/stream/components/Comment.tsx |  2 +-
 .../client/stream/components/ReplyList.tsx    | 33 +++++++++-------
 src/core/client/stream/components/Stream.tsx  | 39 ++++++++++---------
 3 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/src/core/client/stream/components/Comment.tsx b/src/core/client/stream/components/Comment.tsx
index f293a0fe0..bd22c4ffc 100644
--- a/src/core/client/stream/components/Comment.tsx
+++ b/src/core/client/stream/components/Comment.tsx
@@ -21,7 +21,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
     [styles.gutterBottom]: props.gutterBottom,
   });
   return (
-    <div className={rootClassName}>
+    <div className={rootClassName} role="article">
       <div className={styles.topBar}>
         {props.author && <Username>{props.author.username}</Username>}
       </div>
diff --git a/src/core/client/stream/components/ReplyList.tsx b/src/core/client/stream/components/ReplyList.tsx
index 61ec5c314..c712c4124 100644
--- a/src/core/client/stream/components/ReplyList.tsx
+++ b/src/core/client/stream/components/ReplyList.tsx
@@ -17,21 +17,24 @@ export interface ReplyListProps {
 const ReplyList: StatelessComponent<ReplyListProps> = props => {
   return (
     <Indent>
-      {props.comments.map(comment => (
-        <CommentContainer key={comment.id} data={comment} gutterBottom />
-      ))}
-      {props.hasMore && (
-        <Button
-          id={`talk-reply-list--show-all--${props.commentID}`}
-          onClick={props.onShowAll}
-          disabled={props.disableShowAll}
-          secondary
-          invert
-          fullWidth
-        >
-          Show All Replies
-        </Button>
-      )}
+      <div id={`talk-reply-list--log--${props.commentID}`} role="log">
+        {props.comments.map(comment => (
+          <CommentContainer key={comment.id} data={comment} gutterBottom />
+        ))}
+        {props.hasMore && (
+          <Button
+            id={`talk-reply-list--show-all--${props.commentID}`}
+            onClick={props.onShowAll}
+            disabled={props.disableShowAll}
+            secondary
+            invert
+            fullWidth
+            aria-controls={`talk-reply-list--log--${props.commentID}`}
+          >
+            Show All Replies
+          </Button>
+        )}
+      </div>
     </Indent>
   );
 };
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index e57fe5772..e1dc28231 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -26,24 +26,27 @@ const Stream: StatelessComponent<StreamProps> = props => {
     <div>
       <Logo gutterBottom />
       <PostCommentFormContainer assetID={props.assetID} />
-      {props.comments.map(comment => (
-        <div key={comment.id}>
-          <CommentContainer data={comment} gutterBottom />
-          <ReplyListContainer comment={comment} />
-        </div>
-      ))}
-      {props.hasMore && (
-        <Button
-          id={"talk-stream--load-more"}
-          onClick={props.onLoadMore}
-          secondary
-          invert
-          fullWidth
-          disabled={props.disableLoadMore}
-        >
-          Load More
-        </Button>
-      )}
+      <div id="talk-stream--log" role="log" aria-live="polite">
+        {props.comments.map(comment => (
+          <div key={comment.id}>
+            <CommentContainer data={comment} gutterBottom />
+            <ReplyListContainer comment={comment} />
+          </div>
+        ))}
+        {props.hasMore && (
+          <Button
+            id={"talk-stream--load-more"}
+            onClick={props.onLoadMore}
+            secondary
+            invert
+            fullWidth
+            disabled={props.disableLoadMore}
+            aria-controls="talk-stream--log"
+          >
+            Load More
+          </Button>
+        )}
+      </div>
     </div>
   );
 };