From 9be71ff92ed52ba0d47eb3b9514ebb0894465b49 Mon Sep 17 00:00:00 2001
From: Mehak Nasir <67791278+mehaknasir@users.noreply.github.com>
Date: Tue, 23 Aug 2022 13:19:36 +0500
Subject: [PATCH] fix: anonymous user is not clickable (#258)

* fix: anonymous user is not clickable

* fix: link handled for anonymous user everywhere
---
 src/discussions/common/AuthorLabel.jsx               |  2 +-
 src/discussions/discussions-home/DiscussionsHome.jsx |  2 +-
 .../learners/learner/LearnerFilterBar.jsx            |  2 +-
 src/discussions/messages.js                          |  5 +++++
 .../posts/post-filter-bar/PostFilterBar.jsx          |  2 +-
 src/discussions/posts/post/PostHeader.jsx            |  2 +-
 src/discussions/posts/post/PostLink.test.jsx         | 12 ++++++++++++
 7 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/discussions/common/AuthorLabel.jsx b/src/discussions/common/AuthorLabel.jsx
index 83f6629c..b6a54160 100644
--- a/src/discussions/common/AuthorLabel.jsx
+++ b/src/discussions/common/AuthorLabel.jsx
@@ -75,7 +75,7 @@ function AuthorLabel({
     </div>
   );
 
-  return linkToProfile && author && learnersTabEnabled
+  return linkToProfile && author && learnersTabEnabled && author !== messages.anonymous
     ? (
       <Link
         data-testid="learner-posts-link"
diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx
index 2d6ea0d5..4a66739d 100644
--- a/src/discussions/discussions-home/DiscussionsHome.jsx
+++ b/src/discussions/discussions-home/DiscussionsHome.jsx
@@ -77,7 +77,7 @@ export default function DiscussionsHome() {
     }}
     >
       {!inIframe && <Header />}
-      <main className="container-fluid d-flex flex-column p-0 h-100 w-100 overflow-hidden" id="main" tabIndex={-1}>
+      <main className="container-fluid d-flex flex-column p-0 h-100 w-100 overflow-hidden" id="main" tabIndex="-1">
         {!inIframe
           && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
         <div
diff --git a/src/discussions/learners/learner/LearnerFilterBar.jsx b/src/discussions/learners/learner/LearnerFilterBar.jsx
index 5e993108..49d4522b 100644
--- a/src/discussions/learners/learner/LearnerFilterBar.jsx
+++ b/src/discussions/learners/learner/LearnerFilterBar.jsx
@@ -28,7 +28,7 @@ const ActionItem = ({
     aria-checked={value === selected}
   >
     <Icon src={Check} className={classNames('text-success mr-2', { invisible: value !== selected })} />
-    <Form.Radio id={id} className="sr-only sr-only-focusable" value={value} tabIndex={0}>
+    <Form.Radio id={id} className="sr-only sr-only-focusable" value={value} tabIndex="0">
       {label}
     </Form.Radio>
     <span aria-hidden className="text-truncate">
diff --git a/src/discussions/messages.js b/src/discussions/messages.js
index e78880af..5ab58a84 100644
--- a/src/discussions/messages.js
+++ b/src/discussions/messages.js
@@ -153,6 +153,11 @@ const messages = defineMessages({
     defaultMessage: 'Load more posts',
     description: 'Text on button for loading more posts by a user',
   },
+  anonymous: {
+    id: 'discussions.post.anonymous.author',
+    defaultMessage: 'anonymous',
+    description: 'Author name displayed when a post is anonymous',
+  },
 });
 
 export default messages;
diff --git a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
index e69b4acd..3ce4e52a 100644
--- a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
+++ b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
@@ -39,7 +39,7 @@ const ActionItem = ({
     aria-checked={value === selected}
   >
     <Icon src={Check} className={classNames('text-success mr-2', { invisible: value !== selected })} />
-    <Form.Radio id={id} className="sr-only sr-only-focusable" value={value} tabIndex={0}>
+    <Form.Radio id={id} className="sr-only sr-only-focusable" value={value} tabIndex="0">
       {label}
     </Form.Radio>
     <span aria-hidden className="text-truncate">
diff --git a/src/discussions/posts/post/PostHeader.jsx b/src/discussions/posts/post/PostHeader.jsx
index bc71d32b..1784f400 100644
--- a/src/discussions/posts/post/PostHeader.jsx
+++ b/src/discussions/posts/post/PostHeader.jsx
@@ -109,7 +109,7 @@ function PostHeader({
                   && <Badge variant="success">{intl.formatMessage(messages.answered)}</Badge>}
               </div>
             )
-            : <h4 className="mb-0" style={{ lineHeight: '28px' }} aria-level="1" tabIndex={-1} accessKey="h">{post.title}</h4>}
+            : <h4 className="mb-0" style={{ lineHeight: '28px' }} aria-level="1" tabIndex="-1" accessKey="h">{post.title}</h4>}
           <AuthorLabel
             author={post.author || intl.formatMessage(messages.anonymous)}
             authorLabel={post.authorLabel}
diff --git a/src/discussions/posts/post/PostLink.test.jsx b/src/discussions/posts/post/PostLink.test.jsx
index 6d9bfeb7..e0c80f6f 100644
--- a/src/discussions/posts/post/PostLink.test.jsx
+++ b/src/discussions/posts/post/PostLink.test.jsx
@@ -106,4 +106,16 @@ describe('Post username', () => {
       expect(screen.queryByTestId('learner-posts-link')).toBeInTheDocument();
     }
   });
+
+  it.each([
+    true,
+    false,
+  ])('is only clickable if user is not anonymous', async (isAnonymous) => {
+    renderComponent({ ...mockPost, author: isAnonymous ? null : 'test-user' });
+    if (isAnonymous) {
+      expect(screen.queryByTestId('learner-posts-link')).not.toBeInTheDocument();
+    } else {
+      expect(screen.queryByTestId('learner-posts-link')).toBeInTheDocument();
+    }
+  });
 });