Add aria props

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>

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

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