frontend: DropZoneBox: Remove role=button from label element

Author: Vaishnav-Dhaval

frontend/src/components/common/DropZoneBox.stories.tsx

@@ -34,7 +34,6 @@ UploadFiles.args = {
       <Typography sx={{ m: 2 }}>{'Select a file or drag and drop here'}</Typography>
       <Button
         variant="contained"
-        component="label"
         startIcon={<InlineIcon icon="mdi:upload" width={32} />}
         sx={{ fontWeight: 500 }}
       >

frontend/src/components/common/Resource/UploadDialog.tsx

@@ -70,6 +70,7 @@ const UploadFromFilesystem = ({
   const [files, setFiles] = React.useState<File[]>([]);
   const [dragOver, setDragOver] = React.useState(false);
   const [error, setError] = React.useState('');
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
 
   const onFilesPicked = (picked: FileList | null) => {
     setError('');
@@ -123,19 +124,20 @@ const UploadFromFilesystem = ({
         </Typography>
         <Button
           variant="contained"
-          component="label"
           startIcon={<InlineIcon icon="mdi:upload" width={32} />}
           sx={{ fontWeight: 500 }}
+          onClick={() => fileInputRef.current?.click()}
         >
           {t('translation|Select File')}
-          <input
-            type="file"
-            accept=".yaml,.yml,application/yaml"
-            multiple
-            hidden
-            onChange={e => onFilesPicked(e.target.files)}
-          />
         </Button>
+        <input
+          type="file"
+          accept=".yaml,.yml,application/yaml"
+          multiple
+          hidden
+          ref={fileInputRef}
+          onChange={e => onFilesPicked(e.target.files)}
+        />
       </DropZoneBox>
       {!!files.length && (
         <Box

frontend/src/components/common/__snapshots__/DropZoneBox.UploadFiles.stories.storyshot

@@ -8,10 +8,10 @@
       >
         Select a file or drag and drop here
       </p>
-      <label
+      <button
         class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-disableElevation css-17g4n8r-MuiButtonBase-root-MuiButton-root"
-        role="button"
         tabindex="0"
+        type="button"
       >
         <span
           class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
@@ -20,7 +20,7 @@
         <span
           class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
         />
-      </label>
+      </button>
     </div>
   </div>
 </body>