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

@@ -75,7 +75,7 @@ function AuthorLabel({
     </div>
   );
 
-  return linkToProfile && author && learnersTabEnabled
+  return linkToProfile && author && learnersTabEnabled && author !== messages.anonymous
     ? (
       <Link
         data-testid="learner-posts-link"

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

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">

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;

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">

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}

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