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

MultiSelect showClear Keyboard Trap #7613

Open
seanh169 opened this issue Jan 16, 2025 · 5 comments
Open

MultiSelect showClear Keyboard Trap #7613

seanh169 opened this issue Jan 16, 2025 · 5 comments
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA

Comments

@seanh169
Copy link

seanh169 commented Jan 16, 2025

Describe the bug

Using MultiSelect component in 10.8.5 there is a keyboard trap on the clear icon when showClear is used

Screen.Recording.2025-01-16.at.1.08.16.PM.mov

Reproducer

https://stackblitz.com/edit/6h9fpmmz?file=src%2

System Information

System:
    OS: macOS 14.7.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 137.50 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
  Browsers:
    Chrome: 131.0.6778.265
    Edge: 131.0.2903.147
    Safari: 18.1.1

Steps to reproduce the behavior

  1. Add a few selections to the multiselect
  2. Notice clear icon is visible
  3. Attempt to keyboard navigate in and out of the clear icon

This is also easily reproducible on the documentation examples

https://primereact.org/multiselect/#basic

Expected behavior

I expect to be able to keyboard navigate in and out of the clear(x) icon within the multiselect to make this accessible.

@seanh169 seanh169 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 16, 2025
@seanh169 seanh169 changed the title MuliSelect showClear Keyboard Trap MultiSelect showClear Keyboard Trap Jan 16, 2025
@melloware
Copy link
Member

See ticket: #7377

@akshayaqburst added this...

@melloware melloware added Component: Accessibility Issue or pull request is related to WCAG or ARIA and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jan 16, 2025
@seanh169
Copy link
Author

seanh169 commented Jan 16, 2025

See ticket: #7377

@akshayaqburst added this...

The issue is if I keyboard navigate into the clear icon(X) WITHOUT pressing enter I cannot navigate away(via keyboard)

@melloware
Copy link
Member

agreed I want to know why @akshayaqburst added this it might need to be removed. We can check PrimeVue and if PrimeVue doesn't have it we need to remove it.

@akshayaqburst
Copy link
Contributor

@melloware Can I try to fix why we are not able to navigate away from the clear icon? (Instead of reverting those changes!)

Let me know and I can work on it.

@seanh169
Copy link
Author

seanh169 commented Jan 17, 2025

@melloware Can I try to fix why we are not able to navigate away from the clear icon? (Instead of reverting those changes!)

Let me know and I can work on it.

This would be preferred as the clear functionality is helpful to users.

Also:

Not sure if this helps at all in efforts to fix this, but the tree select component(https://primereact.org/treeselect/#clearicon) has this clear icon and there is no keyboard trap present while keeping the same functionality/appearance.

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
Projects
None yet
Development

No branches or pull requests

3 participants