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

* 🔘 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
danny-avila · Oct 24, 2024 · 2996058 · 2996058
1 parent 655f637
commit 2996058
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 39 deletions.
diff --git a/client/src/components/Chat/Input/Files/AttachFile.tsx b/client/src/components/Chat/Input/Files/AttachFile.tsx
@@ -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 />

diff --git a/client/src/components/ui/FileUpload.tsx b/client/src/components/ui/FileUpload.tsx
@@ -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 handleButtonClick = () => {
-    if (onClick) {
-      onClick();
-    }
-    // necessary to reset the input
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-    fileInputRef.current?.click();
-  };
+const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
+  ({ children, handleFileChange }, ref) => {
+    return (
+      <>
+        {children}
+        <input
+          ref={ref}
+          multiple
+          type="file"
+          style={{ display: 'none' }}
+          onChange={handleFileChange}
+        />
+      </>
+    );
+  },
+);
 
-  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;
diff --git a/client/src/components/ui/Switch.tsx b/client/src/components/ui/Switch.tsx
@@ -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}

diff --git a/client/src/style.css b/client/src/style.css
@@ -88,6 +88,7 @@ html {
   --chart-3: 197 37% 24%;
   --chart-4: 43 74% 66%;
   --chart-5: 27 87% 67%;
+  --switch-unchecked: 0 0% 58%;
 }
 .dark {
   --text-primary: var(--gray-100);
@@ -137,6 +138,7 @@ html {
   --chart-3: 30 80% 55%;
   --chart-4: 280 65% 60%;
   --chart-5: 340 75% 55%;
+  --switch-unchecked: 0 0% 40%;
 }
 .gizmo {
   --text-primary: var(--gizmo-gray-950);

diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs
@@ -88,6 +88,7 @@ module.exports = {
         /* These are test styles */
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
+        ['switch-unchecked']: 'hsl(var(--switch-unchecked))',
         ring: 'hsl(var(--ring))',
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',