fix(files): accessibility tab into recycled invisible files rows

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 1c96a7da3e17a2f04b9b2eee58727712179f67f0..b0324a6ab4a625c3c1bbfba8f126887480e40341 100644 (file)
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -51,7 +51,7 @@
                                </span>
 
                                <!-- File name -->
-                               <span>{{ displayName }}</span>
+                               <span class="files-list__row-name-text">{{ displayName }}</span>
                        </a>
                </td>
 
@@ -298,7 +298,14 @@ export default Vue.extend({
                active(active) {
                        if (active === false) {
                                this.resetState()
+
+                               // When the row is not active anymore
+                               // remove the tabindex from the row
+                               this.$el.parentNode.style.display = 'none'
+                               return
                        }
+                       // Restore default tabindex
+                       this.$el.parentNode.style.removeProperty('display')
                },
                /**
                 * When the source changes, reset the preview

diff --git a/apps/files/src/mixins/fileslist-row.scss b/apps/files/src/mixins/fileslist-row.scss
index 22364efcb46a7cf0831fc882e6eb56db257d30ad..6302fda0c74f79ab526fe56eb8251f58b0a595b5 100644 (file)
--- a/apps/files/src/mixins/fileslist-row.scss
+++ b/apps/files/src/mixins/fileslist-row.scss
@@ -112,6 +112,19 @@ td, th {
                // Fill cell height and width
                width: 100%;
                height: 100%;
+
+               // Keyboard indicator a11y
+               &:focus .files-list__row-name-text,
+               &:focus-visible .files-list__row-name-text {
+                       outline: 2px solid var(--color-main-text) !important;
+                       border-radius: 20px;
+               }
+       }
+
+       .files-list__row-name-text {
+               // Make some space for the outline
+               padding: 5px 10px;
+               margin-left: -10px;
        }
 }