From ecc80756d5bf50e7e2ff18f8af33de7cd846d3fc Mon Sep 17 00:00:00 2001
From: RachelElysia <rachel@fleetdm.com>
Date: Mon, 14 Oct 2024 17:26:33 -0400
Subject: [PATCH] Brand buttons show focus state when tabbing, file uploader
 opens when pressing enter

---
 .../components/FileUploader/FileUploader.tsx  | 22 +++++++++++++++++--
 frontend/components/buttons/Button/Button.tsx |  3 +++
 .../DeleteHostModal/DeleteHostModal.tsx       |  8 +------
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/frontend/components/FileUploader/FileUploader.tsx b/frontend/components/FileUploader/FileUploader.tsx
index 6ba3bfa42f02..3190a8d708e8 100644
--- a/frontend/components/FileUploader/FileUploader.tsx
+++ b/frontend/components/FileUploader/FileUploader.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import classnames from "classnames";
 
 import Button from "components/buttons/Button";
@@ -74,18 +74,32 @@ export const FileUploader = ({
   fileDetails,
 }: IFileUploaderProps) => {
   const [isFileSelected, setIsFileSelected] = useState(!!fileDetails);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const classes = classnames(baseClass, className, {
     [`${baseClass}__file-preview`]: isFileSelected,
   });
   const buttonVariant = buttonType === "button" ? "brand" : "text-icon";
 
+  const triggerFileInput = () => {
+    fileInputRef.current?.click();
+  };
+
   const onFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     onFileUpload(files);
     setIsFileSelected(true);
 
-    e.target.value = "";
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      triggerFileInput();
+    }
   };
 
   const renderGraphics = () => {
@@ -113,6 +127,9 @@ export const FileUploader = ({
           variant={buttonVariant}
           isLoading={isLoading}
           disabled={disabled}
+          onKeyDown={handleKeyDown}
+          tabIndex={0}
+          onClick={triggerFileInput}
         >
           <label htmlFor="upload-file">
             {buttonType === "link" && <Icon name="upload" />}
@@ -120,6 +137,7 @@ export const FileUploader = ({
           </label>
         </Button>
         <input
+          ref={fileInputRef}
           accept={accept}
           id="upload-file"
           type="file"
diff --git a/frontend/components/buttons/Button/Button.tsx b/frontend/components/buttons/Button/Button.tsx
index daa4ac674b1c..93783f501c65 100644
--- a/frontend/components/buttons/Button/Button.tsx
+++ b/frontend/components/buttons/Button/Button.tsx
@@ -39,6 +39,7 @@ export interface IButtonProps {
   onClick?:
     | ((value?: any) => void)
     | ((evt: React.MouseEvent<HTMLButtonElement>) => void);
+  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
   isLoading?: boolean;
 }
 
@@ -101,6 +102,7 @@ class Button extends React.Component<IButtonProps, IButtonState> {
       title,
       variant,
       isLoading,
+      onKeyDown,
     } = this.props;
     const fullClassName = classnames(
       baseClass,
@@ -122,6 +124,7 @@ class Button extends React.Component<IButtonProps, IButtonState> {
         className={fullClassName}
         disabled={disabled}
         onClick={handleClick}
+        onKeyDown={onKeyDown}
         tabIndex={tabIndex}
         type={type}
         title={title}
diff --git a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx
index b30c79a4da23..003b167c745b 100644
--- a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx
+++ b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx
@@ -4,7 +4,6 @@ import strUtils from "utilities/strings";
 
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";
-import CustomLink from "components/CustomLink";
 
 const baseClass = "delete-host-modal";
 
@@ -59,12 +58,7 @@ const DeleteHostModal = ({
   };
 
   return (
-    <Modal
-      title="Delete host"
-      onExit={onCancel}
-      onEnter={onSubmit}
-      className={baseClass}
-    >
+    <Modal title="Delete host" onExit={onCancel} className={baseClass}>
       <>
         <p>
           This will remove the record of <b>{hostText()}</b>.{largeVolumeText()}