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

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

Browse source 
Fixes #747
This commit is contained in:
Eric Liu 2021-07-14 08:47:08 -07:00 • committed by GitHub
commit ed395e42b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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> <script>
// TODO: add function to programmatically expand/collapse parent nodes
/** /**
* @typedef {string | number} TreeNodeId * @typedef {string | number} TreeNodeId
* @typedef {{ id: TreeNodeId; text: string; icon?: typeof import("carbon-icons-svelte").CarbonIcon; disabled?: boolean; expanded?: boolean; }} TreeNode * @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 */ /** Set to `true` to visually hide the label text */
export let hideLabel = false; export let hideLabel = false;
import { createEventDispatcher, setContext } from "svelte"; import { createEventDispatcher, setContext, onMount } from "svelte";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
import TreeViewNodeList from "./TreeViewNodeList.svelte"; 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); $: activeNodeId.set(activeId);
$: selectedNodeIds.set(selectedIds); $: selectedNodeIds.set(selectedIds);
$: if (ref) { $: if (ref) {