fix(files): Fix checkbox state semantics

Signed-off-by: Christopher Ng <[email protected]>
nextcloud · Jan 20, 2024 · 1ee9dad · 1ee9dad
1 parent ea2ba8b
commit 1ee9dad
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 17 deletions.
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
@@ -32,10 +32,10 @@
 		<span v-if="source.attributes.failed" class="files-list__row--failed" />
 
 		<!-- Checkbox -->
-		<FileEntryCheckbox :display-name="displayName"
-			:fileid="fileid"
+		<FileEntryCheckbox :fileid="fileid"
 			:is-loading="isLoading"
-			:nodes="nodes" />
+			:nodes="nodes"
+			:source="source" />
 
 		<!-- Link to file -->
 		<td class="files-list__row-name" data-cy-files-list-row-name>

diff --git a/apps/files/src/components/FileEntry/FileEntryCheckbox.vue b/apps/files/src/components/FileEntry/FileEntryCheckbox.vue
@@ -24,14 +24,14 @@
 		@keyup.esc.exact="resetSelection">
 		<NcLoadingIcon v-if="isLoading" />
 		<NcCheckboxRadioSwitch v-else
-			:aria-label="t('files', 'Select the row for {displayName}', { displayName })"
+			:aria-label="ariaLabel"
 			:checked="isSelected"
 			@update:checked="onSelectionChange" />
 	</td>
 </template>
 
 <script lang="ts">
-import { Node } from '@nextcloud/files'
+import { Node, FileType } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
 import Vue, { PropType } from 'vue'
 
@@ -51,10 +51,6 @@ export default Vue.extend({
 	},
 
 	props: {
-		displayName: {
-			type: String,
-			required: true,
-		},
 		fileid: {
 			type: String,
 			required: true,
@@ -67,6 +63,10 @@ export default Vue.extend({
 			type: Array as PropType<Node[]>,
 			required: true,
 		},
+		source: {
+			type: Object as PropType<Node>,
+			required: true,
+		},
 	},
 
 	setup() {
@@ -88,6 +88,14 @@ export default Vue.extend({
 		index() {
 			return this.nodes.findIndex((node: Node) => node.fileid === parseInt(this.fileid))
 		},
+		isFile() {
+			return this.source.type === FileType.File
+		},
+		ariaLabel() {
+			return this.isFile
+				? t('files', 'Toggle selection for file "{displayName}"', { displayName: this.source.basename })
+				: t('files', 'Toggle selection for folder "{displayName}"', { displayName: this.source.basename })
+		},
 	},
 
 	methods: {

diff --git a/apps/files/src/components/FileEntryGrid.vue b/apps/files/src/components/FileEntryGrid.vue
@@ -37,10 +37,10 @@
 		<span v-if="source.attributes.failed" class="files-list__row--failed" />
 
 		<!-- Checkbox -->
-		<FileEntryCheckbox :display-name="displayName"
-			:fileid="fileid"
+		<FileEntryCheckbox :fileid="fileid"
 			:is-loading="isLoading"
-			:nodes="nodes" />
+			:nodes="nodes"
+			:source="source" />
 
 		<!-- Link to file -->
 		<td class="files-list__row-name" data-cy-files-list-row-name>

diff --git a/apps/files/src/components/FilesListTableHeader.vue b/apps/files/src/components/FilesListTableHeader.vue
@@ -71,7 +71,7 @@
 </template>
 
 <script lang="ts">
-import { translate } from '@nextcloud/l10n'
+import { translate as t } from '@nextcloud/l10n'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import Vue from 'vue'
 
@@ -142,9 +142,7 @@ export default Vue.extend({
 		},
 
 		selectAllBind() {
-			const label = this.isNoneSelected || this.isSomeSelected
-				? this.t('files', 'Select all')
-				: this.t('files', 'Unselect all')
+			const label = t('files', 'Toggle selection for all files and folders')
 			return {
 				'aria-label': label,
 				checked: this.isAllSelected,
@@ -203,7 +201,7 @@ export default Vue.extend({
 			this.selectionStore.reset()
 		},
 
-		t: translate,
+		t,
 	},
 })
 </script>