Dynamically setting disabled state results in keyboard focus getting lost

[Chudesnov]

Is there an existing issue for this?

• [X] I have searched the existing issues

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

Code Sandbox link

https://commerce.nearform.com/open-source/nuka-carousel/

Bug report

Default navigation mode relies on disabling prev/next buttons in DOM when user reaches the first / last slide.

Dynamically setting HTML disabled on a focused element results in keyboard focus getting lost. The recommended way of managing disabled state for such widgets is using tabIndex={-1} and aria-disabled="true" instead, which doesn't affect keyboard focus.

Workarounds

• Implement custom renderCenterLeftControls and renderCenterRightControls functions to render aria-disabled and tabIndex attributes on buttons instead of disabled, implement CSS overrides for aria-disabled
• Use the "wrap-around" mode