diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/files/src/components/FileEntry/FileEntryActions.vue | 2 | ||||
| -rw-r--r-- | apps/files/src/components/FilesListVirtual.vue | 22 | ||||
| -rw-r--r-- | apps/files/src/components/VirtualList.vue | 70 |
3 files changed, 56 insertions, 38 deletions
diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue index de790b0b78c..fa15a5f8d59 100644 --- a/apps/files/src/components/FileEntry/FileEntryActions.vue +++ b/apps/files/src/components/FileEntry/FileEntryActions.vue @@ -251,7 +251,7 @@ export default Vue.extend({ * sure there is one at the time we call it. */ getBoundariesElement() { - return document.querySelector('.app-content > table.files-list') + return document.querySelector('.app-content > .files-list') }, }, diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue index dea427afff7..a196836f3f9 100644 --- a/apps/files/src/components/FilesListVirtual.vue +++ b/apps/files/src/components/FilesListVirtual.vue @@ -39,15 +39,9 @@ filesListWidth, }" :scroll-to-index="scrollToIndex" + :caption="caption" @scroll="onScroll"> - <!-- Accessibility description and headers --> <template #before> - <!-- Accessibility description --> - <caption class="hidden-visually"> - {{ currentView.caption || t('files', 'List of files and folders.') }} - {{ t('files', 'This list is not fully rendered for performance reasons. The files will be rendered as you navigate through the list.') }} - </caption> - <!-- Headers --> <FilesListHeader v-for="header in sortedHeaders" :key="header.id" @@ -200,6 +194,13 @@ export default Vue.extend({ canUpload() { return this.currentFolder && (this.currentFolder.permissions & Permission.CREATE) !== 0 }, + + caption() { + const defaultCaption = t('files', 'List of files and folders.') + const viewCaption = this.currentView.caption || defaultCaption + const virtualListNote = t('files', 'This list is not fully rendered for performance reasons. The files will be rendered as you navigate through the list.') + return viewCaption + '\n' + virtualListNote + }, }, watch: { @@ -304,12 +305,11 @@ export default Vue.extend({ --clickable-area: 44px; --icon-preview-size: 32px; - display: block; overflow: auto; height: 100%; will-change: scroll-position; - &::v-deep { + & :deep() { // Table head, body and footer tbody { will-change: padding; @@ -336,6 +336,10 @@ export default Vue.extend({ flex-direction: column; } + .files-list__table { + display: block; + } + .files-list__thead, .files-list__tfoot { display: flex; diff --git a/apps/files/src/components/VirtualList.vue b/apps/files/src/components/VirtualList.vue index a579cfcc8f3..2191d7904f5 100644 --- a/apps/files/src/components/VirtualList.vue +++ b/apps/files/src/components/VirtualList.vue @@ -1,35 +1,42 @@ <template> - <table class="files-list" data-cy-files-list> + <div class="files-list" data-cy-files-list> <!-- Header --> <div ref="before" class="files-list__before"> <slot name="before" /> </div> - <!-- Header --> - <thead ref="thead" class="files-list__thead" data-cy-files-list-thead> - <slot name="header" /> - </thead> - - <!-- Body --> - <tbody :style="tbodyStyle" - class="files-list__tbody" - :class="gridMode ? 'files-list__tbody--grid' : 'files-list__tbody--list'" - data-cy-files-list-tbody> - <component :is="dataComponent" - v-for="({key, item}, i) in renderedItems" - :key="key" - :source="item" - :index="i" - v-bind="extraProps" /> - </tbody> - - <!-- Footer --> - <tfoot v-show="isReady" - class="files-list__tfoot" - data-cy-files-list-tfoot> - <slot name="footer" /> - </tfoot> - </table> + <table class="files-list__table"> + <!-- Accessibility table caption for screen readers --> + <caption v-if="caption" class="hidden-visually"> + {{ caption }} + </caption> + + <!-- Header --> + <thead ref="thead" class="files-list__thead" data-cy-files-list-thead> + <slot name="header" /> + </thead> + + <!-- Body --> + <tbody :style="tbodyStyle" + class="files-list__tbody" + :class="gridMode ? 'files-list__tbody--grid' : 'files-list__tbody--list'" + data-cy-files-list-tbody> + <component :is="dataComponent" + v-for="({key, item}, i) in renderedItems" + :key="key" + :source="item" + :index="i" + v-bind="extraProps" /> + </tbody> + + <!-- Footer --> + <tfoot v-show="isReady" + class="files-list__tfoot" + data-cy-files-list-tfoot> + <slot name="footer" /> + </tfoot> + </table> + </div> </template> <script lang="ts"> @@ -75,6 +82,13 @@ export default Vue.extend({ type: Boolean, default: false, }, + /** + * Visually hidden caption for the table accesibility + */ + caption: { + type: String, + default: '', + }, }, data() { @@ -232,13 +246,13 @@ export default Vue.extend({ onScroll() { this._onScrollHandle ??= requestAnimationFrame(() => { - this._onScrollHandle = null; + this._onScrollHandle = null const topScroll = this.$el.scrollTop - this.beforeHeight const index = Math.floor(topScroll / this.itemHeight) * this.columnCount // Max 0 to prevent negative index this.index = Math.max(0, index) this.$emit('scroll') - }); + }) }, }, }) |