mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(tree-view): TreeView should be tab focusable if no active id is provided #747

Browse source 
Fixes #747
This commit is contained in:
Eric Y Liu 2021-07-14 08:36:58 -07:00
commit bdd78855bc
1 changed files with 13 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/TreeView/TreeView.svelte
View file

@ -1,6 +1,4 @@
<script>
// TODO: add function to programmatically expand/collapse parent nodes
/**
* @typedef {string | number} TreeNodeId
* @typedef {{ id: TreeNodeId; text: string; icon?: typeof import("carbon-icons-svelte").CarbonIcon; disabled?: boolean; expanded?: boolean; }} TreeNode
@ -40,7 +38,7 @@
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
import { createEventDispatcher, setContext } from "svelte";
import { createEventDispatcher, setContext, onMount } from "svelte";
import { writable } from "svelte/store";
import TreeViewNodeList from "./TreeViewNodeList.svelte";
@ -82,6 +80,18 @@
}
}
onMount(() => {
if ($activeNodeId === "") {
const firstFocusableNode = ref.querySelector(
"li.bx--tree-node:not(.bx--tree-node--disabled)"
);
if (firstFocusableNode != null) {
firstFocusableNode.tabIndex = "0";
}
}
});
$: activeNodeId.set(activeId);
$: selectedNodeIds.set(selectedIds);
$: if (ref) {