Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(cdk/tree): CdkTreeNodeToggle focuses node when toggling it #27631

Conversation

zarend
Copy link
Contributor

@zarend zarend commented Aug 11, 2023

Fix focus behavior of CdkTreeNodeToggle. When toggling the expanded or collapsed state of a node, focus that node. Fix issue where end user cannot tab into tree component when collaping the parent of the active node.

Before this commit is applied, there is a bug where end user cannot tab into the tree.

Reproduction steps

  1. Active a tree node
  2. (focus state renders)
  3. Using mouse, collapse parent of node from step 1.
  4. (tree node collapses)
  5. Press Tab, then shift + tab
  6. (item before tree is focused. Can tab into the tree)

With this commit applied, above issue is no longer expected to reproduce.

This commit message is only for reviewers of this PR and can be deleted when landing this change in main.

@zarend zarend added Accessibility This issue is related to accessibility (a11y) target: major This PR is targeted for the next major release area: cdk/tree area: material/tree dev-app preview When applied, previews of the dev-app are deployed to Firebase labels Aug 11, 2023
@github-actions
Copy link

Deployed dev-app for 6e83d60 to: https://ng-dev-previews-comp--pr-angular-components-27631-ie7ahebi.web.app

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

Fix focus behavior of CdkTreeNodeToggle. When toggling the expanded or
collapsed state of a node, focus that node. Fix issue where end user
cannot tab into tree component when collaping the parent of the active
node.

Before this commit is applied, there is a bug where end user cannot tab
into the tree.

Reproduction steps
1. Active a tree node
2. (focus state renders)
3. Using mouse, collapse parent of node from step 1.
4. (tree node collapses)
5. Press Tab, then shift + tab
6. (item before tree is focused. Can tab into the tree)

With this commit applied, above issue is no longer expected to
reproduce.

This commit message is only for reviewers of this PR and can be deleted
when landing this change in main.
@zarend zarend force-pushed the cdk-tree-revamp-focus-on-expand-collapse branch from d8c8fd9 to e8377b8 Compare August 29, 2023 22:34
@zarend zarend merged commit b394667 into angular:cdk-tree-revamp Aug 29, 2023
9 of 11 checks passed
@zarend zarend deleted the cdk-tree-revamp-focus-on-expand-collapse branch August 29, 2023 22:35
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 29, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Accessibility This issue is related to accessibility (a11y) area: cdk/tree area: material/tree dev-app preview When applied, previews of the dev-app are deployed to Firebase target: major This PR is targeted for the next major release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants