Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-20 10:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🔘 a11y: Switch Contrast and File Input Key Events to WCAG (#4536)

Browse source 
* 🔘 a11y: Improve Contrast of Switch/Toggles to WCAG Standard

* refactor: Improve file attachment accessibility in Chat Input component

* refactor: clear input ref value before clicks
This commit is contained in:
Danny Avila 2024-10-24 09:12:49 -04:00 • committed by GitHub
parent 655f63714b
commit 2996058fa2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 46 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

54
client/src/components/ui/FileUpload.tsx
View file

@ -1,43 +1,29 @@
import React, { useRef } from 'react';
import React, { forwardRef } from 'react';
type FileUploadProps = {
handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
onClick?: () => void;
className?: string;
onClick?: () => void;
children: React.ReactNode;
handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
};
const FileUpload: React.FC<FileUploadProps> = ({
handleFileChange,
children,
onClick,
className = '',
}) => {
const fileInputRef = useRef<HTMLInputElement>(null);
const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
({ children, handleFileChange }, ref) => {
return (
<>
{children}
<input
ref={ref}
multiple
type="file"
style={{ display: 'none' }}
onChange={handleFileChange}
/>
</>
);
},
);
const handleButtonClick = () => {
if (onClick) {
onClick();
}
// necessary to reset the input
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
fileInputRef.current?.click();
};
return (
<div onClick={handleButtonClick} style={{ cursor: 'pointer' }} className={className}>
{children}
<input
ref={fileInputRef}
multiple
type="file"
style={{ display: 'none' }}
onChange={handleFileChange}
/>
</div>
);
};
FileUpload.displayName = 'FileUpload';
export default FileUpload;

2
client/src/components/ui/Switch.tsx
View file

@ -8,7 +8,7 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-unchecked',
className,
)}
{...props}