fix(a11y): fixed accessibility in notifications#380
Conversation
PosikBoy
requested review from
Ruminat,
ValeraS,
amje and
korvin89
as code owners
|
Preview is ready. |
|
The notification's content can now overlap with side actions — needs fixing 
Here's the main branch version: 
|
|
The side actions became misaligned in the top placement — needs fixing 
Here's the main branch version: 
|
|
There's a redundant top border if there's no unread notification above now — needs fixing 
Here's the main branch version 
|
|
The redundant border problem persists 
|
|
There's an eslint warning — needs fixing 
|
|
Hm, this looks weird... Screen.Recording.2026-05-25.at.16.25.15.movYou probably forgot to add some selector in css |
|
I agree, it looks weird. The same behaviour appears in the main branch. I suppose we should remove hiding borders while hovering, but we probably need to clarify this with the designer first. |
Oh, true... All right then, this needs fixing in a different PR I suppose Let's fix the other issues and merge this PR then |
all other issues are closed, so can we merge? |
|
|
||
| &__actions { | ||
| &__left { | ||
| position: absolute; |
There was a problem hiding this comment.
Let's not use position: absolute where we can avoid it
It leads to problems like z-index conflicts
| height: 36px; | ||
| } | ||
|
|
||
| &__visually-hidden { |
There was a problem hiding this comment.
This looks way too complex
Do we really need it?
Dosn't title attribute solve this?
Or what is this used for?
| onMouseLeave={notification.onMouseLeave} | ||
| onClick={handleLinkClick} | ||
| className={clickableClassName} | ||
| onClick={notification.onClick as React.MouseEventHandler<HTMLAnchorElement>} |
There was a problem hiding this comment.
I don't think we need this as
| <button | ||
| type="button" | ||
| className={clickableClassName} | ||
| onClick={notification.onClick as React.MouseEventHandler<HTMLButtonElement>} |
There was a problem hiding this comment.
I don't think we need this as
3 participants
Closes #379