clear icon keyboard accessibility

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

    
           wrapper 
        
             .find('.rc-select-clear') 
        
             .last() 
        
             .simulate('mousedown');

Is there a way to make clearing the value keyboard accessible?

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

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.

Close by #1224

Navigation Menu

Repository navigation

clear icon keyboard accessibility #602

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	wrapper
	.find('.rc-select-clear')
	.last()
	.simulate('mousedown');

clear icon keyboard accessibility #602

Description

Activity

dvberzon commented on Jun 16, 2025

nrps9909 commented on Aug 26, 2026

yoyo837 commented on Aug 27, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions