fix(files): make table view a valid html table

<div> is not allowed as a <table> child Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
nextcloud · Nov 17, 2023 · e505416 · e505416
1 parent 62e355a
commit e505416
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 33 deletions.
diff --git 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
@@ -305,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;
@@ -337,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
@@ -1,40 +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>
 
- <!-- Accessibility table caption for screen readers -->
- <caption v-if="caption" class="hidden-visually">
- {{ caption }}
- </caption>
+ <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>
+  <!-- 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>
+  <!-- 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>
+ <!-- Footer -->
+ <tfoot v-show="isReady"
+ class="files-list__tfoot"
+ data-cy-files-list-tfoot>
+ <slot name="footer" />
+ </tfoot>
+ </table>
+ </div>
 </template>
 
 <script lang="ts">
@@ -244,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')
- });
+ })
  },
  },
 })