Repository navigation
clear icon keyboard accessibility #602
Description
The clearIcon can be any React.ReactNode, so I tried to make it a <button> with an icon to make it keyboard accessible. This generally works fine - navigating with TAB puts the focus on that icon. However, trying to press that button then either via ENTER the SPACE key does not trigger a clear event.
The tests seems to use mousedown:
select/tests/shared/allowClearTest.tsx
Lines 40 to 43 in 05d19a9
Is there a way to make clearing the value keyboard accessible?
Activity
dvberzon commentedon Jun 16, 2025
This is a serious accessibility issue. Currently for a single select there is no way for a keyboard user to clear the selection (reopening the dropdown and trying to unselect the selected option will not work either). The component needs to support keyboard focus on the clear icon, or support onKeyDown if the user supplied allowClear icon has a keydown event
nrps9909 commentedon Aug 26, 2026
This has been fixed by #1224. The clear control is now a native
<button type="button">with an accessible label, and the shared allow-clear suite covers native Enter/Space activation. I verified the change is present on current master at a0bd83e.yoyo837 commentedon Aug 27, 2026
Close by #1224