diff --git a/.changeset/pink-paws-refuse.md b/.changeset/pink-paws-refuse.md new file mode 100644 index 000000000..5fc9084b2 --- /dev/null +++ b/.changeset/pink-paws-refuse.md @@ -0,0 +1,5 @@ +--- +"@itwin/presentation-hierarchies-react": patch +--- + +Clicking on tree node buttons now visually show focus on node. diff --git a/packages/hierarchies-react/src/presentation-hierarchies-react/itwinui/TreeNodeRenderer.css b/packages/hierarchies-react/src/presentation-hierarchies-react/itwinui/TreeNodeRenderer.css index 8aa3d60de..2fb31b2da 100644 --- a/packages/hierarchies-react/src/presentation-hierarchies-react/itwinui/TreeNodeRenderer.css +++ b/packages/hierarchies-react/src/presentation-hierarchies-react/itwinui/TreeNodeRenderer.css @@ -17,6 +17,12 @@ visibility: visible; } +.stateless-tree-node:focus-within { + outline: 1px solid var(--iui-color-border-accent); + outline-offset: -1px; + border-radius: var(--iui-border-radius-1); +} + .stateless-tree-node-small-spinner { height: var(--iui-size-s); width: var(--iui-size-s);