enh(a11y): Fix accessibility on some modals

package.json

@@ -63,6 +63,7 @@
     "qs": "^6.11.2",
     "url-parse": "^1.5.10",
     "vue": "^2.7.14",
+    "vue-frag": "^1.4.3",
     "vue-material-design-icons": "^5.2.0",
     "vue-router": "^3.6.5",
     "vue-template-compiler": "^2.7.14",

src/components/FilesPicker.vue → src/components/FilesPickerDialog.vue

@@ -19,76 +19,84 @@
  - along with this program. If not, see <http://www.gnu.org/licenses/>.
  -
  -->
-<template>
-	<div class="photos-picker">
-		<div class="photos-picker__content">
-			<nav class="photos-picker__navigation" :class="{'photos-picker__navigation--placeholder': monthsList.length === 0}">
-				<ul>
-					<li v-for="month in monthsList"
-						:key="month"
-						class="photos-picker__navigation__month"
-						:class="{selected: targetMonth === month}">
-						<NcButton type="tertiary" :aria-label="t('photos', 'Jump to {date}', {date: dateMonthAndYear(month)})" @click="targetMonth = month">
-							{{ month | dateMonthAndYear }}
-						</NcButton>
-					</li>
-				</ul>
-			</nav>
-
-			<FilesListViewer class="photos-picker__file-list"
-				:class="{'photos-picker__file-list--placeholder': monthsList.length === 0}"
-				:file-ids-by-section="fileIdsByMonth"
-				:empty-message="t('photos', 'There are no photos or videos yet!')"
-				:sections="monthsList"
-				:loading="loadingFiles"
-				:base-height="100"
-				:section-header-height="50"
-				:scroll-to-section="targetMonth"
-				@need-content="getFiles"
-				@focusout.native="onFocusOut">
-				<template slot-scope="{file, height, isHeader, distance}">
-					<h3 v-if="isHeader"
-						:id="`photos-picker-section-header-${file.id}`"
-						:style="{ height: `${height}px`}"
-						class="section-header">
-						{{ file.id | dateMonthAndYear }}
-					</h3>
-
-					<File v-else
-						:file="files[file.id]"
-						:allow-selection="true"
-						:selected="selection[file.id] === true"
-						:distance="distance"
-						@select-toggled="onFileSelectToggle" />
-				</template>
-			</FilesListViewer>
-		</div>
 
-		<div class="photos-picker__actions">
+<template>
+	<!-- TODO Adjust tests -->
+
+	<NcDialog size="large"
+		:name="t('photos', 'Add photos to {albumName}', { albumName })"
+		close-on-click-outside
+		:navigation-aria-label="t('photos', 'Months')"
+		@closing="$emit('close')">
+		<template #navigation="{ isCollapsed }">
+			<FilesPickerNavigation :is-collapsed="isCollapsed"
+				:months-list="monthsList"
+				:date-month-and-year="dateMonthAndYear"
+				:target-month.sync="targetMonth" />
+		</template>
+
+		<template #actions>
 			<UploadPicker :accept="allowedMimes"
 				:context="uploadContext"
 				:destination="photosLocationFolder"
 				:multiple="true"
 				@uploaded="refreshFiles" />
-			<NcButton type="primary" :disabled="loading || selectedFileIds.length === 0" @click="emitPickedEvent">
+
+			<NcButton type="primary"
+				:disabled="loading || selectedFileIds.length === 0"
+				@click="emitPickedEvent">
 				<template #icon>
 					<ImagePlus v-if="!loading" />
 					<NcLoadingIcon v-if="loading" />
 				</template>
 				{{ t('photos', 'Add to {destination}', { destination }) }}
 			</NcButton>
+		</template>
+
+		<div class="photos-picker">
+			<div class="photos-picker__content">
+				<FilesListViewer class="photos-picker__file-list"
+					:class="{'photos-picker__file-list--placeholder': monthsList.length === 0}"
+					:file-ids-by-section="fileIdsByMonth"
+					:empty-message="t('photos', 'There are no photos or videos yet!')"
+					:sections="monthsList"
+					:loading="loadingFiles"
+					:base-height="100"
+					:section-header-height="50"
+					:scroll-to-section="targetMonth"
+					@need-content="getFiles"
+					@focusout.native="onFocusOut">
+					<template slot-scope="{file, height, isHeader, distance}">
+						<h3 v-if="isHeader"
+							:id="`photos-picker-section-header-${file.id}`"
+							:style="{ height: `${height}px`}"
+							class="section-header">
+							{{ file.id | dateMonthAndYear }}
+						</h3>
+
+						<File v-else
+							:file="files[file.id]"
+							:allow-selection="true"
+							:selected="selection[file.id] === true"
+							:distance="distance"
+							@select-toggled="onFileSelectToggle" />
+					</template>
+				</FilesListViewer>
+			</div>
 		</div>
-	</div>
+	</NcDialog>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import { NcButton, NcLoadingIcon, useIsMobile } from '@nextcloud/vue'
+import { NcButton, NcDialog, NcLoadingIcon } from '@nextcloud/vue'
 import { UploadPicker } from '@nextcloud/upload'
 import moment from '@nextcloud/moment'
+import { useIsMobile } from '@nextcloud/vue'
 
 import ImagePlus from 'vue-material-design-icons/ImagePlus.vue'
 
+import FilesPickerNavigation from './FilesPickerNavigation.vue'
 import FilesListViewer from './FilesListViewer.vue'
 import File from './File.vue'
 
@@ -112,13 +120,15 @@
 }
 
 export default {
-	name: 'FilesPicker',
+	name: 'FilesPickerDialog',
 
 	components: {
 		File,
+		FilesPickerNavigation,
 		FilesListViewer,
 		ImagePlus,
 		NcButton,
+		NcDialog,
 		NcLoadingIcon,
 		UploadPicker,
 	},
@@ -128,10 +138,10 @@
 		 * @param {string} date - In the following format: YYYYMM
 		 */
 		dateMonthAndYear(date) {
-
 			return dateMonthAndYear(date)
 		},
 	},
+
 	mixins: [
 		FetchFilesMixin,
 		FilesByMonthMixin,
@@ -146,6 +156,12 @@
 			required: true,
 		},
 
+		// Label to show in the dialog title.
+		albumName: {
+			type: String,
+			required: true,
+		},
+
 		// List of file ids to not show.
 		blacklistIds: {
 			type: Array,
@@ -159,6 +175,11 @@
 		},
 	},
 
+	emits: [
+		'close',
+		'files-picked',
+	],
+
 	data() {
 		return {
 			allowedMimes,
@@ -204,6 +225,7 @@
 		emitPickedEvent() {
 			this.$emit('files-picked', this.selectedFileIds)
 		},
+
 		/**
 		 * @param {string} date - In the following format: YYYYMM
 		 */
@@ -218,7 +240,6 @@
 .photos-picker {
 	display: flex;
 	flex-direction: column;
-	padding: 12px;
 
 	&__content {
 		display: flex;
@@ -228,26 +249,6 @@
 		padding: 0 2px;
 	}
 
-	&__navigation {
-		flex-basis: 200px;
-		overflow: scroll;
-		height: 100%;
-		padding: 0 2px;
-
-		@media only screen and (max-width: 1200px) {
-			flex-basis: 100px;
-		}
-
-		&--placeholder {
-			background: var(--color-primary-element-light);
-			border-radius: var(--border-radius-large);
-		}
-
-		&__month {
-			margin: 4px 0;
-		}
-	}
-
 	&__file-list {
 		flex-grow: 1;
 		min-width: 0;
@@ -275,12 +276,11 @@
 			justify-content: center;
 		}
 	}
+}
 
-	&__actions {
-		display: flex;
-		justify-content: space-between;
-		justify-items: center;
-		padding-top: 16px;
+:deep {
+	.dialog__navigation {
+		padding-bottom: 12px;
 	}
 }
 </style>

src/components/FilesPickerNavigation.vue

@@ -0,0 +1,109 @@
+<!--
+  - @copyright 2024 Christopher Ng <[email protected]>
+  -
+  - @author Christopher Ng <[email protected]>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+-->
+
+<template>
+	<Fragment>
+		<ul v-if="!isCollapsed">
+			<li v-for="month in monthsList"
+				:key="month"
+				class="photos-picker__navigation__month"
+				:class="{selected: targetMonth === month}">
+				<NcButton type="tertiary"
+					:aria-label="t('photos', 'Jump to {date}', { date: dateMonthAndYear(month) })"
+					@click="$emit('update:target-month', month)">
+					{{ dateMonthAndYear(month) }}
+				</NcButton>
+			</li>
+		</ul>
+
+		<NcSelect v-else
+			:input-label="t('photos', 'Current month')"
+			:aria-label-listbox="t('photos', 'Months')"
+			:searchable="false"
+			:clearable="false"
+			:options="monthOptions"
+			:value="targetMonthOption"
+			@option:selected="option => $emit('update:target-month', option.id)" />
+	</Fragment>
+</template>
+
+<script>
+import { Fragment } from 'vue-frag'
+import { NcButton, NcSelect } from '@nextcloud/vue'
+
+export default {
+	name: 'FilesPickerNavigation',
+
+	components: {
+		Fragment,
+		NcButton,
+		NcSelect,
+	},
+
+	props: {
+		isCollapsed: {
+			type: Boolean,
+			default: false,
+		},
+
+		monthsList: {
+			type: Array,
+			default: () => [],
+		},
+
+		targetMonth: {
+			type: String,
+			default: null,
+		},
+
+		dateMonthAndYear: {
+			type: Function,
+			default: () => null,
+		},
+	},
+
+	emits: [
+		'update:target-month',
+	],
+
+	computed: {
+		targetMonthOption() {
+			return this.monthOptions.find(option => option.id === this.targetMonth)
+		},
+
+		monthOptions() {
+			return this.monthsList.map(id => ({
+				id,
+				label: this.dateMonthAndYear(id),
+			}))
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.photos-picker__navigation {
+	&__month {
+		margin: 4px 0;
+	}
+}
+</style>