From bd4afe8547eb51e02f449f505aaa4304d4af8879 Mon Sep 17 00:00:00 2001 From: DecafDev <40307803+decaf-dev@users.noreply.github.com> Date: Tue, 28 May 2024 17:42:25 -0600 Subject: [PATCH] Tab accessibility (#44) * feat: add tab accessibility * chore: bump version --- manifest.json | 2 +- package.json | 2 +- src/focus-utils.ts | 24 ++++++++++++++++++ src/main.ts | 10 ++++++++ src/svelte/app/components/grid-card.svelte | 25 +++++++++++++------ src/svelte/app/components/group-tag.svelte | 4 +++ src/svelte/app/components/list-item.svelte | 14 ++++++++--- .../components/group-list-item.svelte | 4 +++ .../shared/components/icon-button.svelte | 2 ++ src/svelte/shared/components/property.svelte | 4 +++ src/svelte/shared/components/tab.svelte | 4 +++ src/svelte/shared/components/tag.svelte | 4 +++ versions.json | 5 ++-- 13 files changed, 88 insertions(+), 16 deletions(-) create mode 100644 src/focus-utils.ts diff --git a/manifest.json b/manifest.json index 9063476..d6d0b78 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "vault-explorer", "name": "Vault Explorer", - "version": "1.1.0", + "version": "1.2.0", "minAppVersion": "1.4.13", "description": "Explore your vault in visual format", "author": "DecafDev", diff --git a/package.json b/package.json index 54607f0..09f2cb2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obsidian-vault-explorer", - "version": "1.1.0", + "version": "1.2.0", "description": "Explore your vault in visual format", "main": "main.js", "scripts": { diff --git a/src/focus-utils.ts b/src/focus-utils.ts new file mode 100644 index 0000000..ce8648d --- /dev/null +++ b/src/focus-utils.ts @@ -0,0 +1,24 @@ +export const moveFocus = (direction: "previous" | "next") => { + const focusedEl = document.activeElement; + if (focusedEl instanceof HTMLElement) { + const rootEl = focusedEl.closest('.vault-explorer, .vault-explorer-property-filter-app'); + if (!rootEl) return; + + const inputEls = rootEl.querySelectorAll('a, button, input, select, textarea, [role="button"], [role="link"]') + const focusableEls = Array.from(inputEls).filter(isElementTabble); + const currentIndex = focusableEls.indexOf(focusedEl); + + const newIndex = direction === "previous" ? currentIndex - 1 : currentIndex + 1; + if (newIndex >= 0 && newIndex < focusableEls.length) { + (focusableEls[newIndex] as HTMLElement).focus(); + } else if (newIndex > focusableEls.length - 1) { + (focusableEls[0] as HTMLElement).focus(); + } else if (newIndex < 0) { + (focusableEls[focusableEls.length - 1] as HTMLElement).focus(); + } + } + + function isElementTabble(element: Element) { + return element.getAttribute('disabled') == null && element.getAttribute('tabindex') !== '-1'; + } +} diff --git a/src/main.ts b/src/main.ts index 23ee8a2..b8f84f9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -14,6 +14,7 @@ import Logger from 'js-logger'; import { formatMessageForLogger, stringToLogLevel } from './logger'; import { LOG_LEVEL_WARN } from './logger/constants'; import { VaultExplorerPluginSettings_1_0_1 } from './types/types-1.0.1'; +import { moveFocus } from './focus-utils'; export default class VaultExplorerPlugin extends Plugin { settings: VaultExplorerPluginSettings = DEFAULT_SETTINGS; @@ -108,6 +109,15 @@ export default class VaultExplorerPlugin extends Plugin { if (file.extension !== "md") return; EventManager.getInstance().emit("metadata-change", file); })); + + this.registerDomEvent(document, "keydown", (event) => { + if (event.key === "ArrowLeft") { + moveFocus("previous"); + } else if (event.key === "ArrowRight") { + moveFocus("next"); + } + }); + } onunload() { diff --git a/src/svelte/app/components/grid-card.svelte b/src/svelte/app/components/grid-card.svelte index bcd3c22..52151fb 100644 --- a/src/svelte/app/components/grid-card.svelte +++ b/src/svelte/app/components/grid-card.svelte @@ -108,13 +108,16 @@
- + (e.key === "Enter" || e.key === " ") && handleTitleClick()} > {name} - +
{#if url !== null} {/if} @@ -128,6 +131,7 @@ class="vault-explorer-scroll-button vault-explorer-scroll-button--left" > {/if} + {#if custom1 !== null}
- + (e.key === "Enter" || e.key === " ") && handleTitleClick()} > {name} - +
diff --git a/src/svelte/shared/components/tab.svelte b/src/svelte/shared/components/tab.svelte index 5c43721..8ebbd40 100644 --- a/src/svelte/shared/components/tab.svelte +++ b/src/svelte/shared/components/tab.svelte @@ -81,6 +81,10 @@ white-space: nowrap; } + .vault-explorer-tab:focus-visible { + box-shadow: inset 0 0 0 2px var(--background-modifier-border-focus); + } + .vault-explorer-tab__line { color: var(--text-faint); } diff --git a/src/svelte/shared/components/tag.svelte b/src/svelte/shared/components/tag.svelte index 7237522..efd3624 100644 --- a/src/svelte/shared/components/tag.svelte +++ b/src/svelte/shared/components/tag.svelte @@ -33,4 +33,8 @@ .vault-explorer-tag { white-space: nowrap; } + + .vault-explorer-tag:focus-visible { + box-shadow: inset 0 0 0 2px var(--background-modifier-border-focus); + } diff --git a/versions.json b/versions.json index c9fda9d..d1fdb28 100644 --- a/versions.json +++ b/versions.json @@ -45,5 +45,6 @@ "0.5.5": "1.4.13", "1.0.0": "1.4.13", "1.0.1": "1.4.13", - "1.1.0": "1.4.13" -} + "1.1.0": "1.4.13", + "1.2.0": "1.4.13" +