👐 a11y: Accessible Conversation Menu Options (#3864)

* fix: type issues

* feat: Fix document title setting in Conversation component

* style: new chat theme

* fix: No keyboard access to chat menus in the chat history #3788

* fix: Menu button in the chat history area does not indicate its state #3823

* refactor: use ariakit for DropdownPopup

* style: update sticky z-index in NewChat component

* style: update ConvoOptions menu button styling
This commit is contained in:
Danny Avila 2024-08-30 13:39:30 -04:00 committed by GitHub
parent 2ce4f66218
commit 0a359aa705
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 122 additions and 131 deletions

View file

@ -38,7 +38,7 @@ const NewChatButtonIcon = ({ conversation }: { conversation: TConversation | nul
<ConvoIconURL preset={conversation} endpointIconURL={iconURL} context="nav" />
) : (
<div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black">
{endpoint && Icon && (
{endpoint && Icon != null && (
<Icon
size={41}
context="nav"
@ -82,7 +82,7 @@ export default function NewChat({
return (
<TooltipProvider delayDuration={250}>
<Tooltip>
<div className="sticky left-0 right-0 top-0 z-20 bg-surface-primary-alt pt-3.5">
<div className="sticky left-0 right-0 top-0 z-50 bg-surface-primary-alt pt-3.5">
<div className="pb-0.5 last:pb-0" style={{ transform: 'none' }}>
<a
href="/"
@ -93,7 +93,7 @@ export default function NewChat({
aria-label={localize('com_ui_new_chat')}
>
<NewChatButtonIcon conversation={conversation} />
<div className="text-token-text-primary grow overflow-hidden text-ellipsis whitespace-nowrap text-sm">
<div className="grow overflow-hidden text-ellipsis whitespace-nowrap text-sm text-text-primary">
{localize('com_ui_new_chat')}
</div>
<div className="flex gap-3">
@ -102,7 +102,7 @@ export default function NewChat({
<button
id="nav-new-chat-btn"
aria-label="nav-new-chat-btn"
className="text-token-text-primary"
className="text-text-primary"
>
<NewChatIcon className="size-5" />
</button>