From e34ebdbeed2919071959846189846c9699fb4ffe Mon Sep 17 00:00:00 2001
From: Mehak Nasir <67791278+mehaknasir@users.noreply.github.com>
Date: Sun, 7 Aug 2022 01:10:35 +0500
Subject: [PATCH] fix: accessibility fixes (#236)

---
 .eslintrc.js                                  |  1 +
 src/discussions/learners/LearnerPostsView.jsx |  3 +-
 .../learners/learner/LearnerFilterBar.jsx     |  5 +-
 src/discussions/posts/PostsList.jsx           |  5 +-
 src/discussions/posts/PostsView.jsx           | 16 +++++-
 .../posts/post-filter-bar/PostFilterBar.jsx   |  5 +-
 src/discussions/posts/post/PostLink.jsx       | 50 +++++++++++--------
 src/index.scss                                |  4 ++
 8 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index b2bb6d16..00cdceb7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,6 +6,7 @@ module.exports = createConfig('eslint',
     "rules": {
       'import/no-extraneous-dependencies': 'off',
       'react-hooks/exhaustive-deps': 'off',
+      'jsx-a11y/no-noninteractive-element-interactions': 'off',
       'simple-import-sort/imports': [
         'error', {
           groups: [
diff --git a/src/discussions/learners/LearnerPostsView.jsx b/src/discussions/learners/LearnerPostsView.jsx
index 828c01e3..a3d7352c 100644
--- a/src/discussions/learners/LearnerPostsView.jsx
+++ b/src/discussions/learners/LearnerPostsView.jsx
@@ -54,8 +54,7 @@ function LearnerPostsView({ intl }) {
       // Add a spacing after the group of pinned posts
       return (
         <React.Fragment key={post.id}>
-          <div className="p-1 bg-light-400" />
-          <PostLink post={post} key={post.id} isSelected={checkIsSelected} learnerTab />
+          <PostLink post={post} key={post.id} isSelected={checkIsSelected} learnerTab showDivider />
         </React.Fragment>
       );
     }
diff --git a/src/discussions/learners/learner/LearnerFilterBar.jsx b/src/discussions/learners/learner/LearnerFilterBar.jsx
index f0ca59f8..5e993108 100644
--- a/src/discussions/learners/learner/LearnerFilterBar.jsx
+++ b/src/discussions/learners/learner/LearnerFilterBar.jsx
@@ -22,8 +22,10 @@ const ActionItem = ({
 }) => (
   <label
     htmlFor={id}
-    className="focus border-bottom-0 d-flex align-items-center w-100 py-2 m-0 font-weight-500"
+    className="focus border-bottom-0 d-flex align-items-center w-100 py-2 m-0 font-weight-500 filter-menu"
     data-testid={value === selected ? 'selected' : null}
+    style={{ cursor: 'pointer' }}
+    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}>
@@ -56,7 +58,6 @@ function LearnerFilterBar({
     if (name === 'sort') {
       dispatch(setSortedBy(value));
     }
-    setOpen(false);
   };
 
   return (
diff --git a/src/discussions/posts/PostsList.jsx b/src/discussions/posts/PostsList.jsx
index 4b35f6f5..4c9265d0 100644
--- a/src/discussions/posts/PostsList.jsx
+++ b/src/discussions/posts/PostsList.jsx
@@ -62,12 +62,11 @@ function PostsList({ posts, topics, intl }) {
       // Add a spacing after the group of pinned posts
       return (
         <React.Fragment key={post.id}>
-          <div className="p-1 bg-light-400" />
-          <PostLink post={post} key={post.id} isSelected={checkIsSelected} />
+          <PostLink post={post} key={post.id} isSelected={checkIsSelected} showDivider idx={idx} />
         </React.Fragment>
       );
     }
-    return (<PostLink post={post} key={post.id} isSelected={checkIsSelected} />);
+    return (<PostLink post={post} key={post.id} isSelected={checkIsSelected} idx={idx} />);
   });
 
   return (
diff --git a/src/discussions/posts/PostsView.jsx b/src/discussions/posts/PostsView.jsx
index 8213543a..66fca0fd 100644
--- a/src/discussions/posts/PostsView.jsx
+++ b/src/discussions/posts/PostsView.jsx
@@ -59,13 +59,27 @@ function PostsView() {
     postsListComponent = <AllPostsList />;
   }
 
+  const handleKeyDown = (event) => {
+    const { key } = event;
+    if (key !== 'ArrowDown' && key !== 'ArrowUp') { return; }
+    const option = event.target;
+
+    let selectedOption;
+    if (key === 'ArrowDown') { selectedOption = option.nextElementSibling; }
+    if (key === 'ArrowUp') { selectedOption = option.previousElementSibling; }
+
+    if (selectedOption) {
+      selectedOption.focus();
+    }
+  };
+
   return (
     <div className="discussion-posts d-flex flex-column">
       {
         searchString && <SearchInfo count={resultsFound} text={searchString} onClear={() => dispatch(setSearchQuery(''))} />
       }
       <PostFilterBar filterSelfPosts={showOwnPosts} />
-      <div className="list-group list-group-flush" role="list">
+      <div className="list-group list-group-flush" role="list" onKeyDown={e => handleKeyDown(e)}>
         {postsListComponent}
       </div>
     </div>
diff --git a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
index c2bdaa70..e69b4acd 100644
--- a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
+++ b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
@@ -33,8 +33,10 @@ const ActionItem = ({
 }) => (
   <label
     htmlFor={id}
-    className="focus border-bottom-0 d-flex align-items-center w-100 py-2 m-0 font-weight-500"
+    className="focus border-bottom-0 d-flex align-items-center w-100 py-2 m-0 font-weight-500 filter-menu"
     data-testid={value === selected ? 'selected' : null}
+    style={{ cursor: 'pointer' }}
+    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}>
@@ -101,7 +103,6 @@ function PostFilterBar({
     if (name === 'cohort') {
       dispatch(setCohortFilter(value));
     }
-    setOpen(false);
   };
 
   useEffect(() => {
diff --git a/src/discussions/posts/post/PostLink.jsx b/src/discussions/posts/post/PostLink.jsx
index 5a63d4b2..1c0057ef 100644
--- a/src/discussions/posts/post/PostLink.jsx
+++ b/src/discussions/posts/post/PostLink.jsx
@@ -22,6 +22,8 @@ function PostLink({
   isSelected,
   intl,
   learnerTab,
+  showDivider,
+  idx,
 }) {
   const {
     page,
@@ -41,20 +43,24 @@ function PostLink({
   const showAnsweredBadge = post.hasEndorsed && post.type === ThreadType.QUESTION;
   const authorLabelColor = AvatarOutlineAndLabelColors[post.authorLabel];
   const postReported = post.abuseFlagged || post.abuseFlaggedCount;
+
   return (
+
     <Link
       className="discussion-post list-group-item list-group-item-action p-0 text-decoration-none text-gray-900"
       to={linkUrl}
-      aria-current={isSelected(post.id) ? 'page' : undefined}
       onClick={() => isSelected(post.id)}
       style={{ lineHeight: '21px' }}
-      role="listitem"
+      aria-current={isSelected(post.id) ? 'page' : undefined}
+      role="option"
+      tabindex={(isSelected(post.id) || idx === 0) ? 0 : -1}
     >
+      {showDivider && <div className="p-1 bg-light-400" /> }
       <div
         className={
-          classNames('d-flex flex-row pt-2.5 pb-2 px-4 border-primary-500',
-            { 'bg-light-300': post.read })
-        }
+            classNames('d-flex flex-row pt-2.5 pb-2 px-4 border-primary-500',
+              { 'bg-light-300': post.read })
+          }
         style={post.id === postId ? {
           borderRightWidth: '4px',
           borderRightStyle: 'solid',
@@ -66,33 +72,33 @@ function PostLink({
             <div className="d-flex align-items-center pb-0 mb-0 flex-fill font-weight-500">
               <div
                 className={
-                  classNames('text-truncate font-weight-500 font-size-14 text-primary-500 font-style-normal font-family-inter',
-                    { 'font-weight-bolder': !post.read })
+                    classNames('text-truncate font-weight-500 font-size-14 text-primary-500 font-style-normal font-family-inter',
+                      { 'font-weight-bolder': !post.read })
                   }
               >
                 {post.title}
               </div>
 
               {showAnsweredBadge && (
-                <Badge variant="success" className="font-weight-500 ml-auto badge-padding">
-                  {intl.formatMessage(messages.answered)}
-                  <span className="sr-only">{' '}answered</span>
-                </Badge>
+              <Badge variant="success" className="font-weight-500 ml-auto badge-padding">
+                {intl.formatMessage(messages.answered)}
+                <span className="sr-only">{' '}answered</span>
+              </Badge>
               )}
 
               {postReported && (
-                <Badge
-                  variant="danger"
-                  data-testid="reported-post"
-                  className={`font-weight-500 badge-padding ${showAnsweredBadge ? 'ml-2' : 'ml-auto'}`}
-                >
-                  {intl.formatMessage(messages.contentReported)}
-                  <span className="sr-only">{' '}reported</span>
-                </Badge>
+              <Badge
+                variant="danger"
+                data-testid="reported-post"
+                className={`font-weight-500 badge-padding ${showAnsweredBadge ? 'ml-2' : 'ml-auto'}`}
+              >
+                {intl.formatMessage(messages.contentReported)}
+                <span className="sr-only">{' '}reported</span>
+              </Badge>
               )}
 
               {post.pinned && (
-                <Icon src={PushPin} className={`icon-size ${postReported || showAnsweredBadge ? 'ml-2' : 'ml-auto'}`} />
+              <Icon src={PushPin} className={`icon-size ${postReported || showAnsweredBadge ? 'ml-2' : 'ml-auto'}`} />
               )}
             </div>
           </div>
@@ -124,10 +130,14 @@ PostLink.propTypes = {
   isSelected: PropTypes.func.isRequired,
   intl: intlShape.isRequired,
   learnerTab: PropTypes.bool,
+  showDivider: PropTypes.bool,
+  idx: PropTypes.number,
 };
 
 PostLink.defaultProps = {
   learnerTab: false,
+  showDivider: false,
+  idx: -1,
 };
 
 export default injectIntl(PostLink);
diff --git a/src/index.scss b/src/index.scss
index 72408f7f..312d6b63 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -126,3 +126,7 @@ header nav.nav.secondary-menu-container {
 .sidebar-XL-width {
   min-width: 29rem;
 }
+
+.filter-menu:focus-within {
+  background-color: #e9e6e4 !important;
+}