Primeng: Spinner buttons should not be focusable

Created on 7 Jun 2019  路  2Comments  路  Source: primefaces/primeng

I'm submitting a ... (check one with "x")

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
Spinner buttons grab focus when pressing TAB repeatedly. When focused, pressing Spacebar or Enter has no effect so they just slow down the focus cycle traversal.

Expected behavior
Pressing TAB when the spinner is focused (with the cursor blinking) should move keyboard focus out of the component.

Minimal reproduction of the problem with instructions
Just look at the current version demo (v8rc1).
https://www.primefaces.org/primeng/#/spinner

What is the motivation / use case for changing the behavior?
Since Spinner already supports usually expected keyboard interactions for this kind of component, preventing spin buttons from grabbing focus would not limit Spinner functionality. Also note that plain <input type="number"> has non-focusable spin buttons on every browser.

  • Browser: [ all ]
LTS-FIXED-8.1.7 defect

Most helpful comment

Update
Problem still exists.

It is not able to modify value of spinner by pressing keys when the UP or DOWN button is focused.

Reason
Check the source code, and the spinner <input> field, the UP <button>, and the DOWN <button> share the same value of "tabindex".

Solution
Therefore setting the tabindex ="-1" to UP and DOWN <button> will let the buttons not reachable via sequential keyboard navigation.

btw, it is duplicate with the issue #7416

All 2 comments

Update
Problem still exists.

It is not able to modify value of spinner by pressing keys when the UP or DOWN button is focused.

Reason
Check the source code, and the spinner <input> field, the UP <button>, and the DOWN <button> share the same value of "tabindex".

Solution
Therefore setting the tabindex ="-1" to UP and DOWN <button> will let the buttons not reachable via sequential keyboard navigation.

btw, it is duplicate with the issue #7416

Available in 9.0.1 and will be in LTS 7 and 8 as well.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

lilling picture lilling  路  3Comments

miresk picture miresk  路  3Comments

garethlewis picture garethlewis  路  3Comments

Helayxa picture Helayxa  路  3Comments

markgoho picture markgoho  路  3Comments