fix(a11y): Fix focus loop on tab in Add to album modal

Signed-off-by: Christopher Ng <[email protected]>

[skip ci]

src/components/File.vue

@@ -233,7 +233,9 @@ export default {
 	box-sizing: border-box;
 
 	// Selection border.
-	&.selected, &:focus-within {
+	&.selected,
+	&:focus-within,
+	&:has(:focus) {
 		&::after {
 			position: absolute;
 			top: 0;
@@ -246,6 +248,9 @@ export default {
 			outline-offset: -4px;
 			pointer-events: none;
 		}
+		.selection-checkbox {
+			opacity: 1;
+		}
 	}
 
 	.file {

src/components/FilesPicker.vue

@@ -44,7 +44,8 @@
 				:base-height="100"
 				:section-header-height="50"
 				:scroll-to-section="targetMonth"
-				@need-content="getFiles">
+				@need-content="getFiles"
+				@focusout.native="onFocusOut">
 				<template slot-scope="{file, height, isHeader, distance}">
 					<h3 v-if="isHeader"
 						:id="`photos-picker-section-header-${file.id}`"
@@ -183,6 +184,15 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * @param {FocusEvent} event The focus event
+		 */
+		onFocusOut(event) {
+			if (event.relatedTarget === null) { // Focus escaping to body
+				event.target.focus({ preventScroll: true })
+			}
+		},
+
 		getFiles() {
 			this.fetchFiles('', {}, this.blacklistIds)
 		},