[RAC] Disabled DatePicker stops Tab focus moving forward when used inside Modal & Dialog

[joonass-visma]

Provide a general summary of the issue here

When having disabled DatePicker inside Modal Dialog with some focusable elements before and after it (e.g. TextFields) and you start Tabbing through the fields with keyboard, the focus won't move past the DatePicker.

🤔 Expected Behavior?

Keyboard focus should jump over the disabled DatePicker and continue normally to next focusable element.

😯 Current Behavior

Keyboard focus gets stuck to last focusable element before disabled DatePicker.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Try adding to DatePicker with isDisabled=true after the "Last name" TextField in this example: https://react-spectrum.adobe.com/react-aria/Modal.html#example

Version

react-aria-components v1.4.1

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[nwidynski]

@joonass-visma Can confirm this issue. As an intermediary solution, set the onKeyDown property of the last focusable element before the disabled date picker (e.g. the textfield) to an empty function.

@snowystinger We need to set tabIndex to -1 on all button props when disabled here.

react-spectrum/packages/@react-aria/spinbutton/src/useSpinButton.ts

Lines 177 to 189 in c703323

	spinButtonProps: {
	role: 'spinbutton',
	'aria-valuenow': value !== undefined && !isNaN(value) ? value : undefined,
	'aria-valuetext': ariaTextValue,
	'aria-valuemin': minValue,
	'aria-valuemax': maxValue,
	'aria-disabled': isDisabled || undefined,
	'aria-readonly': isReadOnly || undefined,
	'aria-required': isRequired || undefined,
	onKeyDown,
	onFocus,
	onBlur
	},