From be1a2ccaab90a4066826cb021cca00a4866aac75 Mon Sep 17 00:00:00 2001
From: ayesha waris <73840786+ayeshoali@users.noreply.github.com>
Date: Wed, 1 Mar 2023 21:46:23 +0500
Subject: [PATCH] fix: fixed post coment actions menu accessibilty for keyboard
 (#456)

---
 src/discussions/post-comments/comments/comment/Comment.jsx | 2 +-
 src/discussions/posts/post/Post.jsx                        | 3 ++-
 src/index.scss                                             | 6 ++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/discussions/post-comments/comments/comment/Comment.jsx b/src/discussions/post-comments/comments/comment/Comment.jsx
index be1fa8c1..4bcb71bd 100644
--- a/src/discussions/post-comments/comments/comment/Comment.jsx
+++ b/src/discussions/post-comments/comments/comment/Comment.jsx
@@ -119,7 +119,7 @@ function Comment({
           />
         )}
         <EndorsedAlertBanner postType={postType} content={comment} />
-        <div className="d-flex flex-column post-card-comment px-4 pt-3.5 pb-10px" aria-level={5}>
+        <div className="d-flex flex-column post-card-comment px-4 pt-3.5 pb-10px" tabIndex="0">
           <HoverCard
             commentOrPost={comment}
             actionHandlers={actionHandlers}
diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx
index db0d642b..e84c3b78 100644
--- a/src/discussions/posts/post/Post.jsx
+++ b/src/discussions/posts/post/Post.jsx
@@ -90,8 +90,9 @@ function Post({
   return (
     <div
       className="d-flex flex-column w-100 mw-100 post-card-comment"
-      aria-level={5}
       data-testid={`post-${post.id}`}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex="0"
     >
       <Confirmation
         isOpen={isDeleting}
diff --git a/src/index.scss b/src/index.scss
index 1659150e..8fc9abe9 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -433,7 +433,7 @@ header {
   pointer-events: none;
 }
 
-.on-focus:focus-visible {
+.on-focus:focus-within {
   outline: 2px solid black;
 }
 
@@ -442,6 +442,8 @@ header {
 }
 
 .post-card-comment {
+  outline: none;
+
   &:not(:hover),
   &:not(:focus) {
     .hover-card {
@@ -450,7 +452,7 @@ header {
   }
 
   &:hover,
-  &:focus {
+  &:focus-within {
     .hover-card {
       display: flex;
     }