Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-09-22 08:12:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🤲 a11y: Add landmark to footer, labels updates, and sidebar text contrast (#3630)

Browse source 
* add landmark contentinfo to footer

* fix aria-label ai model menuitem for issue #3587

* changed group/today text color to #535353
This commit is contained in:
Vesna Tan 2024-08-16 03:27:56 -04:00 • committed by GitHub
parent 93cf7bab02
commit 7f50d2f7c0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 6 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Auth/Footer.tsx
View file

@ -32,7 +32,7 @@ function Footer({ startupConfig }: { startupConfig: TStartupConfig | null | unde
); );
return ( return (
<div className="align-end m-4 flex justify-center gap-2"> <div className="align-end m-4 flex justify-center gap-2" role="contentinfo">
{privacyPolicyRender} {privacyPolicyRender}
{privacyPolicyRender && termsOfServiceRender && ( {privacyPolicyRender && termsOfServiceRender && (
<div className="border-r-[1px] border-gray-300 dark:border-gray-600" /> <div className="border-r-[1px] border-gray-300 dark:border-gray-600" />

1
client/src/components/Chat/Footer.tsx
View file

@ -84,6 +84,7 @@ export default function Footer({ className }: { className?: string }) {
className || className ||
'relative flex items-center justify-center gap-2 px-2 py-2 text-center text-xs text-gray-600 dark:text-gray-300 md:px-[60px]' 'relative flex items-center justify-center gap-2 px-2 py-2 text-center text-xs text-gray-600 dark:text-gray-300 md:px-[60px]'
} }
role="contentinfo"
> >
{footerElements.map((contentRender, index) => { {footerElements.map((contentRender, index) => {
const isLastElement = index === footerElements.length - 1; const isLastElement = index === footerElements.length - 1;

3
client/src/components/Chat/Menus/Models/ModelSpec.tsx
View file

@ -56,9 +56,10 @@ const MenuItem: FC<MenuItemProps> = ({
<div <div
role="menuitem" role="menuitem"
className="group m-1.5 flex cursor-pointer gap-2 rounded px-1 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5" className="group m-1.5 flex cursor-pointer gap-2 rounded px-1 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
tabIndex={-1} tabIndex={0}
{...rest} {...rest}
onClick={clickHandler} onClick={clickHandler}
aria-label={title}
> >
<div className="flex grow items-center justify-between gap-2"> <div className="flex grow items-center justify-between gap-2">
<div> <div>

2
client/src/components/Chat/Menus/UI/MenuItem.tsx
View file

@ -33,7 +33,7 @@ const MenuItem: FC<MenuItemProps> = ({
return ( return (
<div <div
role="menuitem" role="menuitem"
aria-label={`menu item for ${title} ${description}`} aria-label={title}
data-testid="chat-menu-item" data-testid="chat-menu-item"
className={cn( className={cn(
'group m-1.5 flex cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 md:min-w-[240px]', 'group m-1.5 flex cursor-pointer gap-2 rounded px-5 py-2.5 !pr-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 md:min-w-[240px]',

2
client/src/components/Conversations/Conversations.tsx
View file

@ -34,7 +34,7 @@ const Conversations = ({
<div key={groupName}> <div key={groupName}>
<div <div
style={{ style={{
color: '#aaa', color: '#535353',
fontSize: '0.7rem', fontSize: '0.7rem',
marginTop: '20px', marginTop: '20px',
marginBottom: '5px', marginBottom: '5px',