From dfd7d25de8560395565f35b7a9a993f865fc7689 Mon Sep 17 00:00:00 2001
From: Jonas Brunvoll Larsson <59939294+jonasbrunvoll@users.noreply.github.com>
Date: Wed, 2 Oct 2024 07:39:07 +0200
Subject: [PATCH] chore: minor improvements of FileInput component. (#374)

* Extend icon to use theme colors.

* Make FileInput reachable by using TAB, and possible to open using both space and enter.

* Add over to radioBox, iconsButton and FileInput.
---
 .../contact/components/input/file.tsx         | 20 +++++++++++++++----
 .../contact/components/input/input.module.css | 20 +++++++++++++++++--
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/page-modules/contact/components/input/file.tsx b/src/page-modules/contact/components/input/file.tsx
index b09362a0..269a7d04 100644
--- a/src/page-modules/contact/components/input/file.tsx
+++ b/src/page-modules/contact/components/input/file.tsx
@@ -4,6 +4,7 @@ import { Typo } from '@atb/components/typography';
 import { Button } from '@atb/components/button';
 import { MonoIcon } from '@atb/components/icon';
 import { PageText, useTranslation } from '@atb/translations';
+import { useTheme } from '@atb/modules/theme';
 
 export type FileInputProps = {
   label: string;
@@ -15,6 +16,7 @@ const MAX_ALLOWED_FILE_SIZE = 10 * 1024 * 1024; // 10MB
 export function FileInput({ onChange, label, name }: FileInputProps) {
   const { t } = useTranslation();
   const id = useId();
+  const { static: staticColors } = useTheme();
   const [files, setFiles] = useState<File[]>([]);
 
   const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -78,8 +80,18 @@ export function FileInput({ onChange, label, name }: FileInputProps) {
         accept="image/*,.pdf,.doc,docx,.txt"
       />
 
-      <label htmlFor={id} className={style.label__file}>
-        <FileIcon />
+      <label
+        htmlFor={id}
+        className={style.label__file}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            (e.target as HTMLElement).click();
+          }
+        }}
+      >
+        <FileIcon color={staticColors.background.background_0.text} />
         <Typo.span textType="body__primary">{label}</Typo.span>
       </label>
 
@@ -103,7 +115,7 @@ export function FileInput({ onChange, label, name }: FileInputProps) {
   );
 }
 
-function FileIcon() {
+function FileIcon({ color }: { color: string }): JSX.Element {
   return (
     <svg
       width="20"
@@ -114,7 +126,7 @@ function FileIcon() {
     >
       <path
         d="M17.6222 9.08056L10.1092 16.5936C8.40066 18.3021 5.63057 18.3021 3.92203 16.5936C2.21349 14.885 2.21349 12.1149 3.92203 10.4063L11.4351 2.89333C12.5741 1.75431 14.4208 1.75431 15.5598 2.89333C16.6988 4.03236 16.6988 5.8791 15.5598 7.01812L8.34149 14.2365C7.77193 14.8061 6.84856 14.8061 6.27906 14.2365C5.70954 13.667 5.70954 12.7436 6.27906 12.1741L12.6136 5.83961"
-        stroke="black"
+        stroke={color}
         strokeWidth="1.66667"
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/src/page-modules/contact/components/input/input.module.css b/src/page-modules/contact/components/input/input.module.css
index f07696a4..b68a3df9 100644
--- a/src/page-modules/contact/components/input/input.module.css
+++ b/src/page-modules/contact/components/input/input.module.css
@@ -61,6 +61,12 @@
   outline: 2px solid var(--interactive-interactive_2-outline-background);
   outline-offset: 2px;
 }
+
+.label__radioBox:hover {
+  background-color: var(--interactive-interactive_2-hover-background);
+  color: var(--interactive-interactive_2-hover-text);
+}
+
 .label__radioBox {
   display: block;
   border-radius: 50%;
@@ -126,12 +132,16 @@
   border-radius: 50%;
 }
 
-.iconButton:focus,
-.iconButton:hover {
+.iconButton:focus {
   outline: 2px solid var(--interactive-interactive_2-outline-background);
   outline-offset: 2px;
 }
 
+.iconButton:hover {
+  background-color: var(--interactive-interactive_2-hover-background);
+  color: var(--interactive-interactive_2-hover-text);
+}
+
 /* Checkbox */
 .checkbox {
   display: block;
@@ -268,6 +278,12 @@
   border-radius: var(--border-radius-small);
   cursor: pointer;
 }
+
+.label__file:hover {
+  background-color: var(--interactive-interactive_2-hover-background);
+  color: var(--interactive-interactive_2-hover-text);
+}
+
 .fileList {
   display: flex;
   flex-direction: column;