From 2b251999a288d59242b912b6fc5634e655ddf5ad Mon Sep 17 00:00:00 2001 From: John Molakvoæ Date: Sat, 25 Mar 2023 14:33:14 +0100 Subject: fix(files): accessibility tab into recycled invisible files rows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ --- apps/files/src/components/FileEntry.vue | 9 ++++++++- apps/files/src/mixins/fileslist-row.scss | 13 +++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) (limited to 'apps/files/src') 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 @@ - {{ displayName }} + {{ displayName }} @@ -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; } } -- cgit v1.2.3