Compare commits

...

1 Commits

Author SHA1 Message Date
ayeshoali
07ec3486a0 fix: fixed post coment actions menu accessibilty for keyboard 2023-03-01 18:09:35 +05:00
3 changed files with 7 additions and 4 deletions

View File

@@ -119,7 +119,7 @@ function Comment({
/> />
)} )}
<EndorsedAlertBanner postType={postType} content={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 <HoverCard
commentOrPost={comment} commentOrPost={comment}
actionHandlers={actionHandlers} actionHandlers={actionHandlers}

View File

@@ -90,8 +90,9 @@ function Post({
return ( return (
<div <div
className="d-flex flex-column w-100 mw-100 post-card-comment" className="d-flex flex-column w-100 mw-100 post-card-comment"
aria-level={5}
data-testid={`post-${post.id}`} data-testid={`post-${post.id}`}
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex="0"
> >
<Confirmation <Confirmation
isOpen={isDeleting} isOpen={isDeleting}

View File

@@ -433,7 +433,7 @@ header {
pointer-events: none; pointer-events: none;
} }
.on-focus:focus-visible { .on-focus:focus-within {
outline: 2px solid black; outline: 2px solid black;
} }
@@ -442,6 +442,8 @@ header {
} }
.post-card-comment { .post-card-comment {
outline: none;
&:not(:hover), &:not(:hover),
&:not(:focus) { &:not(:focus) {
.hover-card { .hover-card {
@@ -450,7 +452,7 @@ header {
} }
&:hover, &:hover,
&:focus { &:focus-within {
.hover-card { .hover-card {
display: flex; display: flex;
} }