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.

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"

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;