Fix file inputs on Gallery and Versions pages not being selectable with keyboard (#4312)

apps/frontend/src/components/ui/DropArea.vue

@@ -1,94 +0,0 @@
-<template>
-	<div
-		ref="drop_area"
-		class="drop-area"
-		@drop.stop.prevent="
-			(event) => {
-				$refs.drop_area.style.visibility = 'hidden'
-
-				if (event.dataTransfer && event.dataTransfer.files && fileAllowed) {
-					$emit('change', event.dataTransfer.files)
-				}
-			}
-		"
-		@dragenter.prevent="allowDrag"
-		@dragover.prevent="allowDrag"
-		@dragleave.prevent="$refs.drop_area.style.visibility = 'hidden'"
-	/>
-</template>
-
-<script>
-export default {
-	props: {
-		accept: {
-			type: String,
-			default: '',
-		},
-	},
-	emits: ['change'],
-	data() {
-		return {
-			fileAllowed: false,
-		}
-	},
-	mounted() {
-		document.addEventListener('dragenter', this.allowDrag)
-	},
-	methods: {
-		allowDrag(event) {
-			const file = event.dataTransfer?.items[0]
-
-			if (
-				file &&
-				this.accept
-					.split(',')
-					.reduce((acc, t) => acc || file.type.startsWith(t) || file.type === t || t === '*', false)
-			) {
-				this.fileAllowed = true
-				event.dataTransfer.dropEffect = 'copy'
-				event.preventDefault()
-
-				if (this.$refs.drop_area) {
-					this.$refs.drop_area.style.visibility = 'visible'
-				}
-			} else {
-				this.fileAllowed = false
-
-				if (this.$refs.drop_area) {
-					this.$refs.drop_area.style.visibility = 'hidden'
-				}
-			}
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.drop-area {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 10;
-	visibility: hidden;
-	background-color: hsla(0, 0%, 0%, 0.5);
-	transition:
-		visibility 0.2s ease-in-out,
-		background-color 0.1s ease-in-out;
-	display: flex;
-
-	&::before {
-		--indent: 4rem;
-
-		content: ' ';
-		position: relative;
-		top: var(--indent);
-		left: var(--indent);
-		width: calc(100% - (2 * var(--indent)));
-		height: calc(100% - (2 * var(--indent)));
-		border-radius: 1rem;
-		border: 0.25rem dashed var(--color-button-bg);
-	}
-}
-</style>

apps/frontend/src/pages/[type]/[id]/gallery.vue

@@ -295,11 +295,14 @@ import {
 	UploadIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { ConfirmModal, injectNotificationManager } from '@modrinth/ui'
+import {
+	ConfirmModal,
+	DropArea,
+	FileInput,
+	injectNotificationManager,
+	NewModal as Modal,
+} from '@modrinth/ui'
 
-import DropArea from '~/components/ui/DropArea.vue'
-import FileInput from '~/components/ui/FileInput.vue'
-import Modal from '~/components/ui/Modal.vue'
 import { isPermission } from '~/utils/permissions.ts'
 
 const props = defineProps({
@@ -765,7 +768,6 @@ export default defineNuxtComponent({
 }
 
 .modal-gallery {
-	padding: var(--spacing-card-bg);
 	display: flex;
 	flex-direction: column;
 

apps/frontend/src/pages/[type]/[id]/versions.vue

@@ -195,12 +195,12 @@ import {
 import {
 	ButtonStyled,
 	ConfirmModal,
+	DropArea,
 	FileInput,
 	OverflowMenu,
 	ProjectPageVersions,
 } from '@modrinth/ui'
 
-import DropArea from '~/components/ui/DropArea.vue'
 import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
 import { isPermission } from '~/utils/permissions.ts'
 import { reportVersion } from '~/utils/report-helpers.ts'

packages/ui/src/components/base/FileInput.vue

@@ -85,11 +85,19 @@ export default defineComponent({
 label {
 	flex-direction: unset;
 	max-height: unset;
+	&:focus-within {
+		outline: 0.25rem solid #ea80ff;
+	}
+
 	svg {
 		height: 1rem;
 	}
 	input {
-		display: none;
+		position: absolute;
+		height: 1px;
+		width: 1px;
+		overflow: hidden;
+		clip: rect(1px, 1px, 1px, 1px);
 	}
 	&.long-style {
 		display: flex;