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.

Sign up for GitHub

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

Jump to bottom

InputNumber: InputNumber with horizontal and vertical buttons are not accessible through keyboard. #7358

Open
akshayaqburst opened this issue Oct 19, 2024 · 3 comments · May be fixed by #7359
Open

InputNumber: InputNumber with horizontal and vertical buttons are not accessible through keyboard. #7358

akshayaqburst opened this issue Oct 19, 2024 · 3 comments · May be fixed by #7359
Labels
Status: Discussion Issue or pull request needs to be discussed by Core Team

Comments

@akshayaqburst
Copy link
Contributor

Describe the bug

InputNumber: InputNumber with horizontal and vertical buttons are not accessible through keyboard.

Reproducer

No response

System Information

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 1.61 GB / 7.47 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
    pnpm: 9.5.0 - ~/.nvm/versions/node/v18.20.2/bin/pnpm
  npmPackages:
    react: 18.3.1 => 18.3.1

Steps to reproduce the behavior

  1. Go to https://primereact.org/inputnumber/#buttons
  2. Type something in the input box.
  3. Try navigating through the buttons using tab key.
  4. The focus goes to next section without going to increment and decrement buttons.

Expected behavior

The focus should go to increment and decrement buttons, and user should be able to press enter and update values.
@akshayaqburst akshayaqburst added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Oct 19, 2024
akshayaqburst pushed a commit to qburst/primereact_qb_38 that referenced this issue Oct 19, 2024
fix: primefaces#7358, InputNumber: InputNumber with horizontal and ve…
c2eab68 
…rtical buttons are not accessible through keyboard.
@akshayaqburst akshayaqburst linked a pull request Oct 19, 2024 that will close this issue
Open
@melloware
Copy link
Member

PrimeVue is the same way so I assume its intentional: https://primevue.org/inputnumber/#buttons

cc @tugcekucukoglu @mertsincan @cagataycivici

@melloware melloware added Status: Discussion Issue or pull request needs to be discussed by Core Team and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Oct 19, 2024
@akshayaqburst
Copy link
Contributor Author

PrimeVue is the same way so I assume its intentional: https://primevue.org/inputnumber/#buttons

cc @tugcekucukoglu @mertsincan @cagataycivici

A person not using a mouse will not be able to increment or decrement the values using buttons. I find that a bad User experience.

@tugcekucukoglu
Copy link
Member

When the focus is on the input, the value will be updated according to the step prop using the arrow keys. We think that the InputNumber component should be exited using the tab key while the focus is still on the input. Otherwise, it would be necessary to press the tab key three times to exit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Discussion Issue or pull request needs to be discussed by Core Team
Projects
None yet
Milestone
No milestone
3 participants
@melloware @tugcekucukoglu @akshayaqburst