Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-03-12 11:02:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🤲 a11y: Sidebar Text Contrast (#3665)

Browse source 
* fix: use theme class for valid contrast for light/dark, conversation group names, fix type issues

* fix: searchbar text contrast styling, closes #3469

* style: add theming for prompt cards, fix a11y contrast issues

* a11y: address placeholder text contrast issues in LLM controls section

* chore: Add conditional check for pull request repository in a11y workflow

* style: Update text color contrast to WCAG standard for placeholder and focus states in AssistantPanel components
This commit is contained in:
Danny Avila 2024-08-16 13:50:47 -04:00 • committed by GitHub
parent f8a5dad265
commit 91fc89076f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 62 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/src/components/Prompts/Groups/ListCard.tsx
View file

@ -10,27 +10,25 @@ export default function ListCard({
category: string;
name: string;
snippet: string;
onClick?: React.MouseEventHandler<HTMLDivElement>;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
children?: React.ReactNode;
}) {
return (
<div
<button
onClick={onClick}
className="relative my-2 flex w-full cursor-pointer flex-col gap-2 rounded-2xl border px-3 pb-4 pt-3 text-start align-top
text-[15px] shadow-[0_0_2px_0_rgba(0,0,0,0.05),0_4px_6px_0_rgba(0,0,0,0.02)] transition-all duration-300 ease-in-out hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700"
className="relative my-2 flex w-full cursor-pointer flex-col gap-2 rounded-2xl border border-border-light px-3 pb-4 pt-3 text-start
align-top text-[15px] shadow-[0_0_2px_0_rgba(0,0,0,0.05),0_4px_6px_0_rgba(0,0,0,0.02)] transition-all duration-300 ease-in-out hover:bg-surface-tertiary"
>
<div className="flex w-full justify-between">
<div className="flex flex-row gap-2">
<CategoryIcon category={category} className="icon-md" />
<h3 className="break-word select-none text-balance text-sm font-semibold text-gray-800 dark:text-gray-200">
<h3 className="break-word select-none text-balance text-sm font-semibold text-text-primary">
{name}
</h3>
</div>
<div>{children}</div>
</div>
<div className="ellipsis select-none text-balance text-sm text-gray-600 dark:text-gray-400">
{snippet}
</div>
</div>
<div className="ellipsis select-none text-balance text-sm text-text-secondary">{snippet}</div>
</button>
);
}