primefaces / primefaces/primereact

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

Open
#7,358 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Discussion
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the InputNumber buttons demo at https://primereact.org/inputnumber/#buttons and reproduce the issue by typing a value, then navigating with Tab. Inspect the InputNumber implementation and verify that increment and decrement buttons receive focus and respond to Enter without skipping to the next section.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.