Tab accessibility (#44)

* feat: add tab accessibility

* chore: bump version

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",

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": {

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';
+	}
+}

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() {

src/svelte/app/components/grid-card.svelte

@@ -108,13 +108,16 @@
 
 <div class="vault-explorer-grid-card">
 	<div class="vault-explorer-grid-card__header">
-		<a
-			href="empty"
+		<div
+			tabindex="0"
+			role="link"
 			class="vault-explorer-grid-card__title"
 			on:click={handleTitleClick}
+			on:keydown={(e) =>
+				(e.key === "Enter" || e.key === " ") && handleTitleClick()}
 		>
 			{name}
-		</a>
+		</div>
 		{#if url !== null}
 			<IconButton iconId="external-link" on:click={handleUrlClick} />
 		{/if}
@@ -128,6 +131,7 @@
 						class="vault-explorer-scroll-button vault-explorer-scroll-button--left"
 					>
 						<IconButton
+							isTabbable={false}
 							ariaLabel="Scroll left"
 							noPadding
 							iconId="chevron-left"
@@ -148,6 +152,7 @@
 						class="vault-explorer-scroll-button vault-explorer-scroll-button--right"
 					>
 						<IconButton
+							isTabbable={false}
 							ariaLabel="Scroll right"
 							noPadding
 							iconId="chevron-right"
@@ -157,6 +162,9 @@
 				{/if}
 			</Stack>
 		{/if}
+		<!-- {#if custom1 !== null || custom2 !== null || custom3 !== null}
+			<Spacer size="sm" direction="vertical" />
+		{/if} -->
 		<Wrap spacingX="xs" spacingY="xs"
 			>{#if custom1 !== null}<Property
 					name={plugin.settings.properties.custom1}
@@ -196,11 +204,14 @@
 	}
 
 	.vault-explorer-grid-card__title {
-		all: unset;
 		cursor: pointer;
 		color: var(--text-accent);
 	}
 
+	.vault-explorer-grid-card__title:focus-visible {
+		box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
+	}
+
 	.vault-explorer-grid-card__tags {
 		display: flex;
 		column-gap: 0.25rem;
@@ -212,15 +223,13 @@
 		display: none;
 	}
 
-	/* .vault-explorer-grid-card__labels {
-		display: flex;
-	}
-
+	/**
 	.vault-explorer-property-label {
 		margin-left: 8px;
 		font-size: var(--font-smallest);
 		color: var(--text-muted);
 	} */
+
 	.vault-explorer-scroll-button {
 		position: absolute;
 		background-color: var(--background-primary);

src/svelte/app/components/group-tag.svelte

@@ -56,6 +56,10 @@
 		background-color: var(--background-primary);
 	}
 
+	.vault-explorer-group-tag:focus-visible {
+		box-shadow: inset 0 0 0 2px var(--background-modifier-border-focus);
+	}
+
 	.vault-explorer-group-tag--active {
 		background-color: var(--tag-background);
 		border: 1px solid var(--tag-border-color);

src/svelte/app/components/list-item.svelte

@@ -26,13 +26,16 @@
 </script>
 
 <div class="vault-explorer-list-item">
-	<a
-		href="empty"
+	<div
+		tabindex="0"
+		role="link"
 		class="vault-explorer-list-item__title"
 		on:click={handleTitleClick}
+		on:keydown={(e) =>
+			(e.key === "Enter" || e.key === " ") && handleTitleClick()}
 	>
 		{name}
-	</a>
+	</div>
 </div>
 
 <style>
@@ -43,8 +46,11 @@
 		margin-bottom: 10px;
 	}
 
+	.vault-explorer-list-item__title:focus-visible {
+		box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
+	}
+
 	.vault-explorer-list-item__title {
-		all: unset;
 		cursor: pointer;
 		color: var(--text-accent);
 	}

src/svelte/properties-filter-app/components/group-list-item.svelte

@@ -48,6 +48,10 @@
 		padding: 4px 6px;
 	}
 
+	.vault-explorer-group-item:focus-visible {
+		box-shadow: inset 0 0 0 3px var(--background-modifier-border-focus);
+	}
+
 	.vault-explorer-group-item:hover {
 		background-color: var(--background-modifier-hover);
 	}

src/svelte/shared/components/icon-button.svelte

@@ -6,6 +6,7 @@
 	export let iconId = "";
 	export let disabled = false;
 	export let noPadding = false;
+	export let isTabbable = true;
 
 	$: svgData = getSvgData(iconId);
 
@@ -36,6 +37,7 @@
 
 <button
 	class={className}
+	tabindex={isTabbable ? 0 : -1}
 	{disabled}
 	aria-label={ariaLabel}
 	bind:this={ref}

src/svelte/shared/components/property.svelte

@@ -53,4 +53,8 @@
 	.vault-explorer-property:hover {
 		background-color: var(--color-base-30) !important;
 	}
+
+	.vault-explorer-property:focus-visible {
+		box-shadow: inset 0 0 0 2px var(--background-modifier-border-focus);
+	}
 </style>

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);
 	}

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);
+	}
 </style>

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"
+