diff options
Diffstat (limited to 'apps/files/src')
| -rw-r--r-- | apps/files/src/components/FileEntry.vue | 9 | ||||
| -rw-r--r-- | apps/files/src/mixins/fileslist-row.scss | 13 |
2 files changed, 21 insertions, 1 deletions
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue index 1c96a7da3e1..b0324a6ab4a 100644 --- 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 22364efcb46..6302fda0c74 100644 --- 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; } } |