bug(mat-tree): Material tree with mat-nested-tree-node traps focus, has confusing tab-order, has issues with keyboard navigation and weird focus outline

[PhilippMDoerner]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Depending on the issue, v18 or v19, some appear to be beyond v15.

Description

In the mat-tree documentation examples for mat-nested-tree-node, you will find 4 issues:

1. When you tab into a mat-tree with mat-nested-tree-node your focus will bounce back and forth between the tree-nodes icon button button.mdc-icon-button.mat-mdc-icon-button.mat-mdc-button-base.mat-unthemed.cdk-focused.cdk-keyboard-focused and the trees nested node element mat-nested-tree-node.mat-nested-tree-node.cdk-nested-tree-node.cdk-tree-node
   You can not tab further, it will always bounce back and forth between the two. That is effectively an undesired focus-trap

2. ArrowRight/ArrowLeft keyboard navigation under no circumstances will open/close a tree node.

3. Confusingly, the icon-button of mat-nested-tree-node is part of the general tab-order, on top of mat-nested-tree-node itself (though mat-nested-tree-node has tabindex="-1", I assume some JS shifts focus here)

4. The focus outline for nested tree nodes inside mat-nested-tree-node is some weird double-box

Reproduction

• https://material.angular.dev/components/tree/examples#tree-nested-child-accessor-overview
• https://material.angular.dev/components/tree/examples#tree-nested-overview

I saved myself the effort of writing a stackblitz, as the issue occurs quite literally in the mat-tree docs examples themselves.

Steps to reproduce:
1. Focus-trap behavior: (Replicable only on Firefox in v21 and v20, but not v19)
1.1. Go to one of the links above (i.e. the example "Tree with nested nodes (childrenAccessor)")
1.2. Press tab until your focus is on the treenode "Vegetable"
1.3. Keep pressing tab, your focus will bounce back and forth between the overall node and the icon button

2. Arrow-Right/Arrow-Left not opening up/closing tree node (Replicable down to v15 in Chrome and I did not bother testing beyond that)
2.1. Go to one of the links above (i.e. the example "Tree with nested nodes (childrenAccessor)")
2.2. Tab until you have "Fruit" in focus
2.3. Press Arrow Right and see that nothing happens

Note: You can expand that tree-node, but not while the icon-button is in focus. The usual "Press right-arrow key to open" behavior does not happen. Pressing enter while the icon button is in focus does not lead to focusing the overall treenode as in earlier examples on the same page and a few other behavior discrepancies to other examples.

3. Icon button is in tab-order (Replicable in v21 and v20, but not in v19, any browser)
3.1. Go to one of the links above (i.e. the example "Tree with nested nodes (childrenAccessor)")
3.2. Press Tab until you have "Fruit" in focus
3.3. Press Tab again and see that you now have the icon button in focus

4. Extra boxy focus outline (Replicable in v21, v20, v19 but not in v19, any browser)
4.1. Go to one of the links above (i.e. the example "Tree with nested nodes (childrenAccessor)")
4.2. Via mouse open "Vegetables" tree node
4.3. Via tab, try to get the entire Vegetables node in focus
4.4. Press Arrow down, you now should have the "Green" node in focus with a weird outline box

Note: If you press enter while you have "Green" in focus, you will not just "open" Green, you will also close "Vegetables" for some reason.

Note 2: All of the above 4 problems do not occur with any of the examples of nested nodes with cdk-tree!

Expected Behavior

• When I have the last element in a mat-tree in focus and press tab again I expect the focus to actually leave that tree for the next focusable element after it
• When I have the icon button in focus and press enter or space, I get focus on the overall nested tree node (for consistent behavior with the other examples. Honestly I'd expect that icon button to not be in the tab order in the first place and was not in there in v19, what is it doing there?)
• When I have the nested tree node in focus and press right-arrow I expect the node to open up and show its child nodes
• When I have the nested tree node in focus, it is open and I press left-arrow, I expect the node to close and hide its child nodes
• I expect to not see this kind of weird second box in the focus outline

Actual Behavior

• The tree becomes a focus-trap as described earlier
• Arrowkey navigation is partially broken in those tree examples
• Focus-outline on keyboard-focus has a weird second blue box in it

Environment

• Angular: -
• CDK/Material: I can replicate all issues in the docs for version v21, v20. The issues with arrow-left/right navigation and the weird focus-outline I can replicate even in v19 on either browser.
• Browser(s): Firefox v145. The broken arrow-key navigation can also be replicated in Chrome v142, but the "focus-trap" behavior is firefox specific.
• Operating System (e.g. Windows, macOS, Ubuntu): Arch Linux