fix(cdk-experimental/ui-patterns): Tree expand/collapse key should work in follow focus mode

[ok7sai]

No description provided.

[github-actions]

Deployed dev-app for 393838e to: https://ng-dev-previews-comp--pr-angular-components-31747-dev-o4qdongt.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

[wagnermaciel]

I noticed a bug that might be related

Steps to reproduce

1. Click to expand the "src" tree item in the "Active Descendant" tree
2. Click "main.ts"
3. Press the left arrow key to move focus to the parent tree item
4. Press the left arrow key to close the parent tree item

[ok7sai]

I noticed the focus outline did not change? Is that the bug you referred to?

If so, I think that's the styling issue that .example-selectable:focus-within only works with pointer clicks, and I can spot the same issue in other patterns when active descendant mode is on.

[wagnermaciel]

No, the focus ring is ok. The result of following those steps is the tree loses focus entirely. Focus returns to the document body

[ok7sai]

I think that's the natural of mixed using pointer and keyboard.

1. Click to expand the "src" tree item in the "Active Descendant" tree (document.activeElement => src)
2. Click "main.ts" (document.activeElement => main.ts)
3. Press the left arrow key to move focus to the parent tree item (main.ts still in the page, so document.activeElement => main.ts)
4. Press the left arrow key to close the parent tree item (now main.ts is removed, so document.activeElement automatically moves focus back to body)

tabindex="-1" only makes an element no longer tabbable, but they are can still receive focus via pointer events. For accessibility it shouldn't be a concern because

1. Pure keyboard users rely on screen readers won't encounter the issue.
2. If they can use a mouse/pointer, then the focus doesn't matter.

[wagnermaciel]

I created #31756 to handle the other issue separately