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

🔘 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

26
client/src/components/Chat/Input/Files/AttachFile.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useRef } from 'react';
import { FileUpload, TooltipAnchor } from '~/components/ui';
import { AttachmentIcon } from '~/components/svg';
import { useLocalize } from '~/hooks';
@ -14,19 +14,37 @@ const AttachFile = ({
handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}) => {
const localize = useLocalize();
const inputRef = useRef<HTMLInputElement>(null);
const isUploadDisabled = disabled ?? false;
return (
<FileUpload handleFileChange={handleFileChange} className="flex">
<FileUpload ref={inputRef} handleFileChange={handleFileChange}>
<TooltipAnchor
id="audio-recorder"
role="button"
id="attach-file"
aria-label={localize('com_sidepanel_attach_files')}
disabled={isUploadDisabled}
className={cn(
'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover',
'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50',
isRTL ? 'bottom-2 right-2' : 'bottom-2 left-1 md:left-2',
)}
description={localize('com_sidepanel_attach_files')}
onKeyDownCapture={(e) => {
if (!inputRef.current) {
return;
}
if (e.key === 'Enter' || e.key === ' ') {
inputRef.current.value = '';
inputRef.current.click();
}
}}
onClick={() => {
if (!inputRef.current) {
return;
}
inputRef.current.value = '';
inputRef.current.click();
}}
>
<div className="flex w-full items-center justify-center gap-2">
<AttachmentIcon />