Skip to content

Commit

Permalink
fix(files): Fix checkbox state semantics
Browse files Browse the repository at this point in the history
Signed-off-by: Christopher Ng <[email protected]>
  • Loading branch information
Pytal authored and emoral435 committed Jan 20, 2024
1 parent ea2ba8b commit 1ee9dad
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 17 deletions.
6 changes: 3 additions & 3 deletions apps/files/src/components/FileEntry.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
20 changes: 14 additions & 6 deletions apps/files/src/components/FileEntry/FileEntryCheckbox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -51,10 +51,6 @@ export default Vue.extend({
},

props: {
displayName: {
type: String,
required: true,
},
fileid: {
type: String,
required: true,
Expand All @@ -67,6 +63,10 @@ export default Vue.extend({
type: Array as PropType<Node[]>,
required: true,
},
source: {
type: Object as PropType<Node>,
required: true,
},
},

setup() {
Expand All @@ -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: {
Expand Down
6 changes: 3 additions & 3 deletions apps/files/src/components/FileEntryGrid.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 3 additions & 5 deletions apps/files/src/components/FilesListTableHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -203,7 +201,7 @@ export default Vue.extend({
this.selectionStore.reset()
},

t: translate,
t,
},
})
</script>
Expand Down

0 comments on commit 1ee9dad

Please sign in to comment.