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

Tree with virtualScroll: Inconsistent focus #12351

Closed
ivan-artkod opened this issue Dec 8, 2022 · 0 comments · Fixed by #12424
Closed

Tree with virtualScroll: Inconsistent focus #12351

ivan-artkod opened this issue Dec 8, 2022 · 0 comments · Fixed by #12424
Assignees
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA LTS-PORTABLE PRO Support Issue was reported by PRO User Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@ivan-artkod
Copy link

Describe the bug

I understand that this may just be the result of default DOM TAB key behavior, but in terms how TAB/Up/Down keys work in conjunction with virtual scroll its definitely inconsistent.

If using [virtualScroll]="true" having node focused on, and changing the rendered range via mouse scroll or pgUp/pgDown keys breaks focus away from the node. This is understandable. The focused node is no longer in the rendered range.
However, from user's perspective this is extremely confusing and illogical, that once the scroll passed some point, pressing TAB or Down key, behaves differently then before. Same problems observed with TAB + SHIFT and Left and Right keys

Open the link to the example and follow the steps I have posted in the "Steps to reproduce"

Environment

Nothing special (check the linked example)

Reproducer

https://stackblitz.com/edit/angular-ivy-bf4ajq

Angular version

14.0.2

PrimeNG version

14.0.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

not relevant

Browser(s)

Tested in latest Firefox & Chrome (on MacOS 12.4)

Steps to reproduce the behavior

  1. Start without having a focus on the tree and pressing the TAB key:
    -> p-tree gets focus
    -> up/down/pgUp/pgDown keys work as expected: scrolling content by 1-2ish items or by page up/down

  2. Press TAB again:
    -> first item in the tree gets the focus
    -> down key now moves the focus to next item in tree, up does the opposite, pgUp/phDown still shift visible area by page

    2.b. Clicking the node also puts focus on node, but this is not really relevant

  3. Press TAB/down keys repeatedly:
    -> focus will move to next node and so on...
    -> when focus is on last visible node, pressing TAB/down key will move focus to next but also shift visible area so newly focused node is visible

  4. a. using pgDown / mouse scroll down at least 3x the visible area away from last focused node, then press TAB:
    -> it will not focus on the node next to previously focused node
    -> instead it will focus on the (probably) first "rendered" node in range, which may be very far down the tree from the previously focused node
    = This is somewhat understandable, as if node is no longer in DOM, we cannot focus on it by calling el.focus()
    << It would however be much more convenient that on TAB key rendered range should be reset to previous one so the next node in tree can be focused -- for better user experience

    b. Attempt the same scenario as 4.a, just instead of pressing TAB, press Down key:
    -> The tree will shift down the visible area, losing the focus on previously focused node and not focusing on any other node
    = This I fail to understand
    << Using keys Up/Down should not lose the focus - for better user experience

Using keys Left/Right also works inconsistently, its just my example cannot show this (it was built for other purpose, sorry).

Expected behavior

Using TAB, TAB+SHIFT, Down or Up key when having focus on a node, should always focus on the nearest node down/up, even in the case of virtual scroll enabled.

Using Left or `Right`` key when having focus on a node, should always expand/collapse that node (or collapse parent node if node already collapsed), even in case of virtual scroll enabled.

@ivan-artkod ivan-artkod added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 8, 2022
@cetincakiroglu cetincakiroglu self-assigned this Dec 15, 2022
@cetincakiroglu cetincakiroglu added this to the 15.0.1 milestone Dec 15, 2022
@cetincakiroglu cetincakiroglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working Component: Accessibility Issue or pull request is related to WCAG or ARIA PRO Support Issue was reported by PRO User and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 27, 2022
cetincakiroglu added a commit that referenced this issue Dec 27, 2022
Fixed #12351 - Tree with virtualScroll: Inconsistent focus
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA LTS-PORTABLE PRO Support Issue was reported by PRO User Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants