Make uploadeditor accessible

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -23,11 +23,14 @@
 
 <template>
 	<file-preview v-bind="filePreview"
+		:tabindex="wrapperTabIndex"
 		class="file-preview"
 		:class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor }"
-		@click="showPreview">
+		@click="handleClick"
+		@keydown.enter="handleClick">
 		<img v-if="(!isLoading && !failed) || hasTemporaryImageUrl"
 			:class="previewSizeClass"
+			class="file-preview__image"
 			alt=""
 			:src="previewUrl">
 		<img v-if="!isLoading && failed"
@@ -38,6 +41,8 @@
 			class="preview loading" />
 		<strong>{{ name }}</strong>
 		<button v-if="isUploadEditor"
+			tabindex="1"
+			:aria-label="removeAriaLabel"
 			class="remove-file primary">
 			<Close class="remove-file__icon" @click="$emit('remove-file', id)" />
 		</button>
@@ -200,6 +205,14 @@ export default {
 		hasTemporaryImageUrl() {
 			return this.mimetype.startsWith('image/') && this.localUrl
 		},
+
+		wrapperTabIndex() {
+			return this.isUploadEditor ? '0' : ''
+		},
+
+		removeAriaLabel() {
+			return t('spreed', 'Remove' + this.name)
+		},
 	},
 	mounted() {
 		const img = new Image()
@@ -213,7 +226,12 @@ export default {
 		img.src = this.previewUrl
 	},
 	methods: {
-		showPreview(event) {
+		handleClick(event) {
+			if (this.isUploadEditor) {
+				this.$emit('remove-file', this.id)
+				return
+			}
+
 			if (!this.isViewerAvailable) {
 				// Regular event handling by opening the link.
 				return
@@ -270,6 +288,10 @@ export default {
 		}
 	}
 
+	&__image {
+		object-fit: cover;
+	}
+
 	.preview {
 		display: block;
 		width: 128px;

src/components/UploadEditor.vue

@@ -42,7 +42,9 @@
 					@remove-file="handleRemoveFileFromSelection" />
 			</template>
 			<div :key="'addMore'" class="add-more">
-				<button class="add-more__button primary" @click="clickImportInput">
+				<button :aria-label="addMoreAriaLabel"
+					class="add-more__button primary"
+					@click="clickImportInput">
 					<Plus :size="48" class="upload-editor__plus-icon" />
 				</button>
 			</div>
@@ -103,6 +105,10 @@ export default {
 		showModal() {
 			return this.showUploadEditor && !this.modalDismissed
 		},
+
+		addMoreAriaLabel() {
+			return t('spreed', 'Add more files')
+		},
 	},
 
 	watch: {