🛠️ fix: Improve Accessibility and Display of Conversation Menu (#6913)

* 📦 chore: update @ariakit/react-core to version 0.4.17 in package.json and package-lock.json

* refactor: add additional ariakit menu props and unmount menu if state changes

* fix: accessibility issues and incompatibility issues due to non-portaled menu

* fix: improve visibility and accessibility of conversation options, making sure to expand dynamically when becoming active

* fix: adjust max width for conversation options popover to improve visibility
This commit is contained in:
Danny Avila 2025-04-16 04:28:46 -04:00 committed by GitHub
parent 000f3a3733
commit 16aa5ed466
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 153 additions and 113 deletions

View file

@ -184,11 +184,12 @@ export default function Conversation({
)}
<div
className={cn(
'mr-2',
'mr-2 flex origin-left',
isPopoverActive || isActiveConvo
? 'flex'
: 'hidden group-focus-within:flex group-hover:flex',
? 'pointer-events-auto max-w-[28px] scale-x-100 opacity-100'
: 'pointer-events-none max-w-0 scale-x-0 opacity-0 group-focus-within:pointer-events-auto group-focus-within:max-w-[28px] group-focus-within:scale-x-100 group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:max-w-[28px] group-hover:scale-x-100 group-hover:opacity-100',
)}
aria-hidden={!(isPopoverActive || isActiveConvo)}
>
{!renaming && <ConvoOptions {...convoOptionsProps} />}
</div>