From 12da372fa0eb99aed82944f7caf0b9af9a43373a Mon Sep 17 00:00:00 2001
From: Mehak Nasir <67791278+mehaknasir@users.noreply.github.com>
Date: Fri, 22 Jul 2022 14:22:19 +0500
Subject: [PATCH] fix: accessibility fix added for the threads section (#213)

---
 src/discussions/comments/CommentsView.jsx    | 39 +++++++++++---------
 src/discussions/comments/comment/Comment.jsx |  5 ++-
 src/discussions/comments/comment/Reply.jsx   |  2 +-
 src/discussions/comments/messages.js         |  5 +++
 4 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/discussions/comments/CommentsView.jsx b/src/discussions/comments/CommentsView.jsx
index 349fe796..b26d9566 100644
--- a/src/discussions/comments/CommentsView.jsx
+++ b/src/discussions/comments/CommentsView.jsx
@@ -66,34 +66,37 @@ function DiscussionCommentsView({
     handleLoadMoreResponses,
   } = usePostComments(postId, endorsed);
   return (
-    <div className="m-3">
-      <div className="my-3">
+    <>
+      <div className="m-3" role="heading" aria-level="2">
         {endorsed === EndorsementStatus.ENDORSED
           ? intl.formatMessage(messages.endorsedResponseCount, { num: comments.length })
           : intl.formatMessage(messages.responseCount, { num: comments.length })}
       </div>
-      {comments.map(comment => (
-        <Comment comment={comment} key={comment.id} postType={postType} />
-      ))}
+      <div className="mx-3" role="list">
+        {comments.map(comment => (
+          <Comment comment={comment} key={comment.id} postType={postType} />
+        ))}
 
-      {hasMorePages && !isLoading && (
-        <Button
-          onClick={handleLoadMoreResponses}
-          variant="link"
-          block="true"
-          className="card p-4"
-          data-testid="load-more-comments"
-        >
-          {intl.formatMessage(messages.loadMoreResponses)}
-        </Button>
-      )}
-      {isLoading
+        {hasMorePages && !isLoading && (
+          <Button
+            onClick={handleLoadMoreResponses}
+            variant="link"
+            block="true"
+            className="card p-4"
+            data-testid="load-more-comments"
+          >
+            {intl.formatMessage(messages.loadMoreResponses)}
+          </Button>
+        )}
+        {isLoading
         && (
           <div className="card my-4 p-4 d-flex align-items-center">
             <Spinner animation="border" variant="primary" />
           </div>
         )}
-    </div>
+      </div>
+    </>
+
   );
 }
 
diff --git a/src/discussions/comments/comment/Comment.jsx b/src/discussions/comments/comment/Comment.jsx
index f91bc305..1c70b544 100644
--- a/src/discussions/comments/comment/Comment.jsx
+++ b/src/discussions/comments/comment/Comment.jsx
@@ -56,7 +56,7 @@ function Comment({
   const commentClasses = classNames('d-flex flex-column card', { 'my-3': showFullThread });
 
   return (
-    <div className={commentClasses} data-testid={`comment-${comment.id}`}>
+    <div className={commentClasses} data-testid={`comment-${comment.id}`} role="listitem">
       <DeleteConfirmation
         isOpen={isDeleting}
         title={intl.formatMessage(messages.deleteResponseTitle)}
@@ -81,7 +81,8 @@ function Comment({
           onLike={() => dispatch(editComment(comment.id, { voted: !comment.voted }))}
           createdAt={comment.createdAt}
         />
-        <div className="d-flex my-2 flex-column">
+        <div className="sr-only" role="heading" aria-level="3"> {intl.formatMessage(messages.replies, { count: inlineReplies.length })}</div>
+        <div className="d-flex my-2 flex-column" role="list">
           {/* Pass along intl since component used here is the one before it's injected with `injectIntl` */}
           {inlineReplies.map(inlineReply => (
             <Reply
diff --git a/src/discussions/comments/comment/Reply.jsx b/src/discussions/comments/comment/Reply.jsx
index 300125bb..f4a57077 100644
--- a/src/discussions/comments/comment/Reply.jsx
+++ b/src/discussions/comments/comment/Reply.jsx
@@ -35,7 +35,7 @@ function Reply({
   const authorAvatars = useSelector(selectAuthorAvatars(reply.author));
   const colorClass = AvatarOutlineAndLabelColors[reply.authorLabel];
   return (
-    <div className="d-flex my-2 flex-column" data-testid={`reply-${reply.id}`}>
+    <div className="d-flex my-2 flex-column" data-testid={`reply-${reply.id}`} role="listitem">
       <DeleteConfirmation
         isOpen={isDeleting}
         title={intl.formatMessage(messages.deleteCommentTitle)}
diff --git a/src/discussions/comments/messages.js b/src/discussions/comments/messages.js
index c55b1fb9..03351397 100644
--- a/src/discussions/comments/messages.js
+++ b/src/discussions/comments/messages.js
@@ -166,6 +166,11 @@ const messages = defineMessages({
     id: 'discussions.post.closedBy',
     defaultMessage: 'Post closed by',
   },
+  replies: {
+    id: 'discussion.comment.repliesHeading',
+    defaultMessage: '{count} replies for the response added',
+    description: 'Text added for screen reader to understand nesting replies.',
+  },
 });
 
 export default messages;