[BUG] - Clear Button of Input is not accessible

[peter-neumann-dev]

HeroUI Version

@heroui/[email protected]

Describe the bug

The clear button of inputs is not accessible (tabIndex: -1). Maybe introduced with this commit: 606f757

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Go to the docs: https://www.heroui.com/docs/components/input#clear-button
2. Fill the input
3. Use tab key to try to access the clear button
4. It will jump to the next interactive element, skipping the clear button

Expected behavior

The clear button is accessible if the input is not disabled

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-2080 [BUG] - Clear Button of Input is not accessible

[wingkwong]

This is by design. The clear button will not be focusable no matter it is disabled or not.

ref:

https://react-spectrum.adobe.com/react-aria/SearchField.html
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

[peter-neumann-dev]

@wingkwong Thank you for your fast reply. If I understand the linked refs correctly, it should clear when hitting ESC, but this is not working as well. 😊

[wingkwong]

The ref link only shows you the clear button shouldn't be focused only. For hitting ESC not clearing the value, you may create a new issue.

[peter-neumann-dev]

Created a new issue #4850