openproject-primer_view_components 0.66.1 → 0.67.0

data/app/components/primer/open_project/border_box/collapsible_header.rb

@@ -12,6 +12,8 @@ module Primer
         #
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :title, lambda { |**system_arguments, &block|
+          raise ArgumentError, "Title must be a string" unless block.call.is_a?(String)
+
           system_arguments[:mr] ||= 2
 
           Primer::Beta::Text.new(**system_arguments, &block)
@@ -31,6 +33,7 @@ module Primer
         #
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :description, lambda { |**system_arguments, &block|
+          raise ArgumentError, "Description must be a string" unless block.call.is_a?(String)
           system_arguments[:color] ||= :subtle
           system_arguments[:hidden] = @collapsed
 

data/app/components/primer/open_project/collapsible_section.rb

@@ -15,6 +15,8 @@ module Primer
       # @param tag [Symbol] Customize the element type of the rendered title container.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :title, lambda { |tag: TITLE_TAG_FALLBACK, **system_arguments, &block|
+        raise ArgumentError, "Title must be a string" unless block.call.is_a?(String)
+
         system_arguments[:tag] = fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_FALLBACK)
         system_arguments[:font_size] ||= 3
         system_arguments[:mr] ||= 2
@@ -26,6 +28,8 @@ module Primer
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :caption, lambda { |**system_arguments, &block|
+        raise ArgumentError, "Caption must be a string" unless block.call.is_a?(String)
+
         system_arguments[:color] ||= :subtle
         system_arguments[:mr] ||= 2
         system_arguments[:display] ||= [:none, :block]
@@ -36,7 +40,9 @@ module Primer
       # Optional right-side content
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :additional_information, lambda { |**system_arguments|
+      renders_one :additional_information, lambda { |**system_arguments, &block|
+        raise ArgumentError, "The additional information must be a string" unless block.call.is_a?(String)
+
         Primer::BaseComponent.new(tag: :div, **system_arguments)
       }
 

data/app/components/primer/open_project/tree_view/node.html.erb

@@ -13,7 +13,7 @@
     <% if leading_action? %>
       <%= leading_action %>
     <% end %>
-    <div id="<%= content_id %>" class="TreeViewItemContent">
+    <%= render(Primer::BaseComponent.new(**@content_arguments)) do %>
       <% if @select_variant == :multiple %>
         <div aria-hidden="true" class="TreeViewItemCheckbox" tabindex="-1">
           <div class="FormControl-checkbox"></div>
@@ -26,7 +26,7 @@
       <% if trailing_visual? %>
         <%= trailing_visual %>
       <% end %>
-    </div>
+    <% end %>
   </div>
   <%= content %>
 <% end %>

data/app/components/primer/open_project/tree_view/node.rb

@@ -8,6 +8,10 @@ module Primer
       # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
       # not be used directly.
       class Node < Primer::Component
+        DEFAULT_NODE_VARIANT = Primer::OpenProject::TreeView::DEFAULT_NODE_VARIANT
+        NODE_VARIANT_TAG_MAP = { DEFAULT_NODE_VARIANT => :div, :button => :button, :anchor => :a }.freeze
+        NODE_VARIANT_TAG_OPTIONS = NODE_VARIANT_TAG_MAP.keys.freeze
+
         # Generic leading action slot
         renders_one :leading_action
 
@@ -39,6 +43,11 @@ module Primer
         # @return [Symbol]
         attr_reader :select_variant
 
+        # This node's variant, eg. `:button`, `:div`, etc.
+        #
+        # @return [Symbol]
+        attr_reader :node_variant
+
         DEFAULT_SELECT_VARIANT = :none
         SELECT_VARIANT_OPTIONS = [
           :multiple,
@@ -53,34 +62,47 @@ module Primer
         ]
 
         # @param path [Array<String>] The node's "path," i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path.
+        # @param node_variant [Symbol] The node variant to use for the node's content, i.e. the `:button` or `:div`. <%= one_of(Primer::OpenProject::TreeView::NODE_VARIANT_OPTIONS) %>
+        # @param href [String] The URL to use as the `href` attribute for this node. If set to a truthy value, the `tag:` parameter is ignored and assumed to be `:a`.
         # @param current [Boolean] Whether or not this node is the current node. The current node is styled differently than regular nodes and is the first element that receives focus when tabbing to the `TreeView` component.
         # @param select_variant [Symbol] Controls the type of checkbox that appears. <%= one_of(Primer::OpenProject::TreeView::Node::SELECT_VARIANT_OPTIONS) %>
         # @param checked [Boolean | String] The checked state of the node's checkbox. <%= one_of(Primer::OpenProject::TreeView::Node::CHECKED_STATES) %>
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>.
+        # @param content_arguments [Hash] Arguments attached to the node's content, i.e the `<button>` or `<a>` element. <%= link_to_system_arguments_docs %>
         def initialize(
           path:,
+          node_variant:,
+          href: nil,
           current: false,
           select_variant: DEFAULT_SELECT_VARIANT,
           checked: DEFAULT_CHECKED_STATE,
-          **system_arguments
+          **content_arguments
         )
-          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments = {
+            tag: :li,
+            role: :none,
+            classes: "TreeViewItem"
+          }
+
+          @content_arguments = content_arguments
 
           @path = path
           @current = current
           @select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
           @checked = fetch_or_fallback(CHECKED_STATES, checked, DEFAULT_CHECKED_STATE)
-
-          @system_arguments[:tag] = :li
-          @system_arguments[:role] = :treeitem
-          @system_arguments[:tabindex] = current? ? 0 : -1
-          @system_arguments[:classes] = class_names(
-            @system_arguments.delete(:classes),
-            "TreeViewItem"
+          @node_variant = fetch_or_fallback(NODE_VARIANT_TAG_OPTIONS, node_variant, DEFAULT_NODE_VARIANT)
+
+          @content_arguments[:tag] = NODE_VARIANT_TAG_MAP[@node_variant]
+          @content_arguments[:href] = href if href
+          @content_arguments[:id] = content_id
+          @content_arguments[:role] = :treeitem
+          @content_arguments[:tabindex] = current? ? 0 : -1
+          @content_arguments[:classes] = class_names(
+            @content_arguments.delete(:classes),
+            "TreeViewItemContent"
           )
 
-          @system_arguments[:aria] = merge_aria(
-            @system_arguments, {
+          @content_arguments[:aria] = merge_aria(
+            @content_arguments, {
               aria: {
                 level: level,
                 selected: false,
@@ -90,15 +112,15 @@ module Primer
             }
           )
 
-          @system_arguments[:data] = merge_data(
-            @system_arguments,
+          @content_arguments[:data] = merge_data(
+            @content_arguments,
             { data: { path: @path.to_json } }
           )
 
           return unless current?
 
-          @system_arguments[:aria] = merge_aria(
-            @system_arguments,
+          @content_arguments[:aria] = merge_aria(
+            @content_arguments,
             { aria: { current: true } }
           )
         end
@@ -115,31 +137,32 @@ module Primer
         #
         # @param other_arguments [Hash] The other hash of system arguments to merge into the current one.
         def merge_system_arguments!(**other_arguments)
-          @system_arguments[:aria] = merge_aria(
-            @system_arguments,
+          @content_arguments[:aria] = merge_aria(
+            @content_arguments,
             other_arguments
           )
 
-          @system_arguments[:data] = merge_data(
-            @system_arguments,
+          @content_arguments[:data] = merge_data(
+            @content_arguments,
             other_arguments
           )
 
-          @system_arguments.merge!(**other_arguments)
+          @content_arguments.merge!(**other_arguments)
         end
 
         private
 
         def before_render
-          if leading_visual?
-          end
-
           if leading_action?
-            @system_arguments[:data] = merge_data(
-              @system_arguments,
+            @content_arguments[:data] = merge_data(
+              @content_arguments,
               { data: { "has-leading-action": true } }
             )
           end
+
+          if select_variant != :none && node_variant != :div
+            raise ArgumentError, "TreeView nodes do not support select variants for tags other than :div."
+          end
         end
 
         def content_id

data/app/components/primer/open_project/tree_view/skeleton_loader.html.erb

@@ -4,7 +4,7 @@
 
 <%= render(Primer::BaseComponent.new(tag: :"tree-view-include-fragment", src: @src, loading: :lazy, data: { target: "tree-view-sub-tree-node.subTree tree-view-sub-tree-node.includeFragment", path: @container.path.to_json }, hidden: @container.expanded?, accept: "text/fragment+html")) do %>
   <%= render(@container) do %>
-    <%= render(Primer::OpenProject::TreeView::Node.new(path: [*@container.path, :loader])) do |node| %>
+    <%= render(Primer::OpenProject::TreeView::Node.new(path: [*@container.path, :loader], node_variant: :div)) do |node| %>
       <% node.with_text_content do %>
         <div data-target="tree-view-sub-tree-node.loadingIndicator">
           <% @count.times do %>

data/app/components/primer/open_project/tree_view/spinner_loader.html.erb

@@ -4,14 +4,14 @@
 
 <%= render(Primer::BaseComponent.new(tag: :"tree-view-include-fragment", src: @src, loading: :lazy, data: { target: "tree-view-sub-tree-node.subTree tree-view-sub-tree-node.includeFragment", path: @container.path.to_json }, hidden: @container.expanded?, accept: "text/fragment+html")) do %>
   <%= render(@container) do %>
-    <%= render(Primer::OpenProject::TreeView::Node.new(path: [*@container.path, :loader], data: { target: "tree-view-sub-tree-node.loadingIndicator" })) do |node| %>
+    <%= render(Primer::OpenProject::TreeView::Node.new(path: [*@container.path, :loader], data: { target: "tree-view-sub-tree-node.loadingIndicator" }, node_variant: :div)) do |node| %>
       <% node.with_text_content { "Loading..." } %>
       <% node.with_leading_visual do %>
         <%= render(Primer::Beta::Spinner.new(size: :small, wrapper_arguments: { classes: "TreeViewItemVisual" })) %>
       <% end %>
     <% end %>
 
-    <%= render(Primer::OpenProject::TreeView::Node.new(path: [*@container.path, :failure_msg], data: { target: "tree-view-sub-tree-node.loadingFailureMessage" }, hidden: true)) do |node| %>
+    <%= render(Primer::OpenProject::TreeView::Node.new(path: [*@container.path, :failure_msg], data: { target: "tree-view-sub-tree-node.loadingFailureMessage" }, hidden: true, node_variant: :div)) do |node| %>
       <% node.with_text_content do %>
         <%= loading_failure_message %>
       <% end %>

data/app/components/primer/open_project/tree_view/sub_tree.html.erb

@@ -7,7 +7,7 @@
 
   <%= render(@container) do %>
     <% if nodes.empty? %>
-      <%= render(Primer::OpenProject::TreeView::Node.new(path: path, data: { "no-items": true })) do |node| %>
+      <%= render(Primer::OpenProject::TreeView::Node.new(path: path, data: { "no-items": true }, node_variant: :div)) do |node| %>
         <% node.with_text_content do %>
           <%= no_items_message %>
         <% end %>

data/app/components/primer/open_project/tree_view/sub_tree.rb

@@ -29,6 +29,7 @@ module Primer
             renders: lambda { |component_klass: LeafNode, label:, **system_arguments|
               component_klass.new(
                 **system_arguments,
+                node_variant: node_variant,
                 path: [*path, label],
                 label: label
               )
@@ -41,6 +42,7 @@ module Primer
             renders: lambda { |component_klass: SubTreeNode, label:, **system_arguments|
               component_klass.new(
                 **system_arguments,
+                node_variant: node_variant,
                 path: [*path, label],
                 label: label
               )
@@ -87,8 +89,13 @@ module Primer
 
         delegate :path, :expanded?, to: :@container
 
+        attr_reader :node_variant
+
+        # @param node_variant [Symbol] The variant to use for this node. <%= one_of(Primer::OpenProject::TreeView::NODE_VARIANT_OPTIONS) %>
         # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::SubTreeContainer) %>.
-        def initialize(**system_arguments)
+        def initialize(node_variant:, **system_arguments)
+          @node_variant = node_variant
+
           system_arguments[:data] = merge_data(
             system_arguments,
             { data: { target: "tree-view-sub-tree-node.subTree" } }

data/app/components/primer/open_project/tree_view/sub_tree_node.rb

@@ -102,15 +102,16 @@ module Primer
           }
         }
 
-        delegate :with_leaf, :with_sub_tree, :with_loading_spinner, :with_loading_skeleton, to: :@sub_tree
+        delegate :with_leaf, :with_sub_tree, :with_loading_spinner, :with_loading_skeleton, :nodes, to: :@sub_tree
         delegate :current?, :merge_system_arguments!, to: :@node
 
         # @param label [String] The node's label, i.e. it's textual content.
         # @param path [Array<String>] The node's "path," i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path.
+        # @param node_variant [Symbol] The variant to use for this node. <%= one_of(Primer::OpenProject::TreeView::NODE_VARIANT_OPTIONS) %>
         # @param expanded [Boolean] Whether or not this sub-tree should be rendered expanded.
         # @param select_strategy [Symbol] What should happen when this sub-tree node is checked. <%= one_of(Primer::OpenProject::TreeView::SubTreeNode::SELECT_STRATEGIES) %>
         # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Node) %>.
-        def initialize(label:, path:, expanded: false, select_strategy: DEFAULT_SELECT_STRATEGY, **system_arguments)
+        def initialize(label:, path:, node_variant:, expanded: false, select_strategy: DEFAULT_SELECT_STRATEGY, **system_arguments)
           @label = label
           @system_arguments = system_arguments
           @select_strategy = fetch_or_fallback(SELECT_STRATEGIES, select_strategy, DEFAULT_SELECT_STRATEGY)
@@ -134,10 +135,15 @@ module Primer
           @sub_tree = SubTree.new(
             expanded: expanded,
             path: path,
+            node_variant: node_variant,
             **sub_tree_arguments
           )
 
-          @node = Primer::OpenProject::TreeView::Node.new(**@system_arguments, path: @sub_tree.path)
+          @node = Primer::OpenProject::TreeView::Node.new(
+            **@system_arguments,
+            path: @sub_tree.path,
+            node_variant: node_variant
+          )
 
           return if @node.select_variant == :none
 

data/app/components/primer/open_project/tree_view/tree_view.d.ts

@@ -20,6 +20,8 @@ export declare class TreeViewElement extends HTMLElement {
     subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null;
     leafAtPath(path: string[]): HTMLLIElement | null;
     getNodeCheckedValue(node: Element): TreeViewCheckedValue;
+    nodeHasCheckBox(node: Element): boolean;
+    nodeHasNativeAction(node: Element): boolean;
     infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null;
 }
 declare global {

data/app/components/primer/open_project/tree_view/tree_view.js

@@ -126,6 +126,12 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
     getNodeCheckedValue(node) {
         return (node.getAttribute('aria-checked') || 'false');
     }
+    nodeHasCheckBox(node) {
+        return node.querySelector('.TreeViewItemCheckbox') !== null;
+    }
+    nodeHasNativeAction(node) {
+        return node instanceof HTMLAnchorElement || node instanceof HTMLButtonElement;
+    }
     // PRIVATE API METHOD
     //
     // This would normally be marked private, but it's called by TreeViewSubTreeNodes
@@ -161,7 +167,7 @@ _TreeViewElement_nodeForEvent = function _TreeViewElement_nodeForEvent(event) {
     return node;
 };
 _TreeViewElement_handleNodeEvent = function _TreeViewElement_handleNodeEvent(node, event) {
-    if (__classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_eventIsCheckboxToggle).call(this, event)) {
+    if (__classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_eventIsCheckboxToggle).call(this, event, node)) {
         __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleCheckboxToggle).call(this, node);
     }
     else if (__classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_eventIsActivation).call(this, event)) {
@@ -174,8 +180,8 @@ _TreeViewElement_handleNodeEvent = function _TreeViewElement_handleNodeEvent(nod
         __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_handleNodeKeyboardEvent).call(this, event, node);
     }
 };
-_TreeViewElement_eventIsCheckboxToggle = function _TreeViewElement_eventIsCheckboxToggle(event) {
-    return event.type === 'click' && event.target.closest('.TreeViewItemCheckbox') !== null;
+_TreeViewElement_eventIsCheckboxToggle = function _TreeViewElement_eventIsCheckboxToggle(event, node) {
+    return event.type === 'click' && this.nodeHasCheckBox(node);
 };
 _TreeViewElement_handleCheckboxToggle = function _TreeViewElement_handleCheckboxToggle(node) {
     // only handle checking of leaf nodes
@@ -190,6 +196,10 @@ _TreeViewElement_handleCheckboxToggle = function _TreeViewElement_handleCheckbox
     }
 };
 _TreeViewElement_handleNodeActivated = function _TreeViewElement_handleNodeActivated(node) {
+    // do not emit activation events for buttons and anchors, since it is assumed any activation
+    // behavior for these element types is user- or browser-defined
+    if (!(node instanceof HTMLDivElement))
+        return;
     const path = this.getNodePath(node);
     const activationSuccess = this.dispatchEvent(new CustomEvent('treeViewBeforeNodeActivated', {
         bubbles: true,
@@ -198,7 +208,10 @@ _TreeViewElement_handleNodeActivated = function _TreeViewElement_handleNodeActiv
     }));
     if (!activationSuccess)
         return;
-    this.toggleAtPath(path);
+    // navigate or trigger button, don't toggle
+    if (!this.nodeHasNativeAction(node)) {
+        this.toggleAtPath(path);
+    }
     this.dispatchEvent(new CustomEvent('treeViewNodeActivated', {
         bubbles: true,
         detail: this.infoFromNode(node),
@@ -215,12 +228,19 @@ _TreeViewElement_handleNodeKeyboardEvent = function _TreeViewElement_handleNodeK
     }
     switch (event.key) {
         case ' ':
-            event.preventDefault();
-            if (this.getNodeCheckedValue(node) === 'true') {
-                __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'false');
+        case 'Enter':
+            if (this.nodeHasCheckBox(node)) {
+                event.preventDefault();
+                if (this.getNodeCheckedValue(node) === 'true') {
+                    __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'false');
+                }
+                else {
+                    __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'true');
+                }
             }
-            else {
-                __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_setNodeCheckedValue).call(this, node, 'true');
+            else if (node instanceof HTMLAnchorElement) {
+                // simulate click on space
+                node.click();
             }
             break;
     }

data/app/components/primer/open_project/tree_view/tree_view.ts

@@ -44,7 +44,7 @@ export class TreeViewElement extends HTMLElement {
   }
 
   #handleNodeEvent(node: Element, event: Event) {
-    if (this.#eventIsCheckboxToggle(event)) {
+    if (this.#eventIsCheckboxToggle(event, node)) {
       this.#handleCheckboxToggle(node)
     } else if (this.#eventIsActivation(event)) {
       this.#handleNodeActivated(node)
@@ -55,8 +55,8 @@ export class TreeViewElement extends HTMLElement {
     }
   }
 
-  #eventIsCheckboxToggle(event: Event) {
-    return event.type === 'click' && (event.target as HTMLElement).closest('.TreeViewItemCheckbox') !== null
+  #eventIsCheckboxToggle(event: Event, node: Element) {
+    return event.type === 'click' && this.nodeHasCheckBox(node)
   }
 
   #handleCheckboxToggle(node: Element) {
@@ -72,6 +72,10 @@ export class TreeViewElement extends HTMLElement {
   }
 
   #handleNodeActivated(node: Element) {
+    // do not emit activation events for buttons and anchors, since it is assumed any activation
+    // behavior for these element types is user- or browser-defined
+    if (!(node instanceof HTMLDivElement)) return
+
     const path = this.getNodePath(node)
 
     const activationSuccess = this.dispatchEvent(
@@ -84,7 +88,10 @@ export class TreeViewElement extends HTMLElement {
 
     if (!activationSuccess) return
 
-    this.toggleAtPath(path)
+    // navigate or trigger button, don't toggle
+    if (!this.nodeHasNativeAction(node)) {
+      this.toggleAtPath(path)
+    }
 
     this.dispatchEvent(
       new CustomEvent('treeViewNodeActivated', {
@@ -107,12 +114,18 @@ export class TreeViewElement extends HTMLElement {
 
     switch (event.key) {
       case ' ':
-        event.preventDefault()
-
-        if (this.getNodeCheckedValue(node) === 'true') {
-          this.#setNodeCheckedValue(node, 'false')
-        } else {
-          this.#setNodeCheckedValue(node, 'true')
+      case 'Enter':
+        if (this.nodeHasCheckBox(node)) {
+          event.preventDefault()
+
+          if (this.getNodeCheckedValue(node) === 'true') {
+            this.#setNodeCheckedValue(node, 'false')
+          } else {
+            this.#setNodeCheckedValue(node, 'true')
+          }
+        } else if (node instanceof HTMLAnchorElement) {
+          // simulate click on space
+          node.click()
         }
 
         break
@@ -225,6 +238,14 @@ export class TreeViewElement extends HTMLElement {
     return (node.getAttribute('aria-checked') || 'false') as TreeViewCheckedValue
   }
 
+  nodeHasCheckBox(node: Element): boolean {
+    return node.querySelector('.TreeViewItemCheckbox') !== null
+  }
+
+  nodeHasNativeAction(node: Element): boolean {
+    return node instanceof HTMLAnchorElement || node instanceof HTMLButtonElement
+  }
+
   // PRIVATE API METHOD
   //
   // This would normally be marked private, but it's called by TreeViewSubTreeNodes

data/app/components/primer/open_project/tree_view/tree_view_roving_tab_index.js

@@ -22,12 +22,6 @@ export function useRovingTabIndex(containerEl) {
             return getNextFocusableElement(from, event) ?? from;
         },
         focusInStrategy: () => {
-            // Don't try to execute the focusInStrategy if focus is coming from a click.
-            // The clicked row will receive focus correctly by default.
-            // If a chevron is clicked, setting the focus through the focuszone will prevent its toggle.
-            // if (mouseDownRef.current) {
-            //   return undefined
-            // }
             let currentItem = containerEl.querySelector('[aria-current]');
             currentItem = currentItem?.checkVisibility() ? currentItem : null;
             const firstItem = containerEl.querySelector('[role="treeitem"]');
@@ -110,11 +104,21 @@ function getVisibleElement(element, direction) {
     }
     let next = direction === 'next' ? walker.nextNode() : walker.previousNode();
     // If next element is nested inside a collapsed subtree, continue iterating
-    while (next instanceof HTMLElement && next.parentElement?.closest('[role=treeitem][aria-expanded=false]')) {
+    while (next instanceof HTMLElement && collapsedParent(next, root)) {
         next = direction === 'next' ? walker.nextNode() : walker.previousNode();
     }
     return next instanceof HTMLElement ? next : undefined;
 }
+function collapsedParent(node, root) {
+    for (const ancestor of root.querySelectorAll('[role=treeitem][aria-expanded=false]')) {
+        if (node === ancestor)
+            continue;
+        if (ancestor.closest('li')?.contains(node)) {
+            return ancestor;
+        }
+    }
+    return null;
+}
 function getFirstChildElement(element) {
     const firstChild = element.querySelector('[role=treeitem]');
     return firstChild instanceof HTMLElement ? firstChild : undefined;

data/app/components/primer/open_project/tree_view/tree_view_roving_tab_index.ts

@@ -24,13 +24,6 @@ export function useRovingTabIndex(containerEl: TreeViewElement) {
       return getNextFocusableElement(from, event) ?? from
     },
     focusInStrategy: () => {
-      // Don't try to execute the focusInStrategy if focus is coming from a click.
-      // The clicked row will receive focus correctly by default.
-      // If a chevron is clicked, setting the focus through the focuszone will prevent its toggle.
-      // if (mouseDownRef.current) {
-      //   return undefined
-      // }
-
       let currentItem = containerEl.querySelector('[aria-current]')
       currentItem = currentItem?.checkVisibility() ? currentItem : null
 
@@ -137,13 +130,25 @@ function getVisibleElement(element: HTMLElement, direction: 'next' | 'previous')
   let next = direction === 'next' ? walker.nextNode() : walker.previousNode()
 
   // If next element is nested inside a collapsed subtree, continue iterating
-  while (next instanceof HTMLElement && next.parentElement?.closest('[role=treeitem][aria-expanded=false]')) {
+  while (next instanceof HTMLElement && collapsedParent(next, root)) {
     next = direction === 'next' ? walker.nextNode() : walker.previousNode()
   }
 
   return next instanceof HTMLElement ? next : undefined
 }
 
+function collapsedParent(node: Element, root: Element): Element | null {
+  for (const ancestor of root.querySelectorAll('[role=treeitem][aria-expanded=false]')) {
+    if (node === ancestor) continue
+
+    if (ancestor.closest('li')?.contains(node)) {
+      return ancestor
+    }
+  }
+
+  return null
+}
+
 function getFirstChildElement(element: HTMLElement): HTMLElement | undefined {
   const firstChild = element.querySelector('[role=treeitem]')
   return firstChild instanceof HTMLElement ? firstChild : undefined

data/app/components/primer/open_project/tree_view/tree_view_sub_tree_node_element.d.ts

@@ -14,9 +14,11 @@ export declare class TreeViewSubTreeNodeElement extends HTMLElement {
     loadingIndicator: HTMLElement;
     loadingFailureMessage: HTMLElement;
     retryButton: HTMLButtonElement;
-    expanded: boolean;
-    loadingState: LoadingState;
     connectedCallback(): void;
+    get expanded(): boolean;
+    set expanded(newValue: boolean);
+    get loadingState(): LoadingState;
+    set loadingState(newState: LoadingState);
     get selectStrategy(): string;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;