Issue 623: Keyboard controls will only work when nuka is in focus.

[mariano-formidable]

Description

This PR updates our keyboard controls so they'll only work if enableKeyboardControls is true and the carousel is in focus.

Note:
Technically, this introduces a breaking change because before the keyboard controls worked even if the carousel wasn't in focus (although, not sure how many people were actually taking advantage of that or appreciated that fact). If we want, we can add in an additional prop that'll let the keyboard controls work regardless of carousel focus.

Fixes #623

Type of Change

• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Manually using the demo, and fixed existing tests as needed so they pass.

Screenshots

In the animation I click on the top carousel and the navigate with keyboard, and then click on bottom one and animate with the keyboard again:

[mariano-formidable]

Setting to -1 lets us programmatically set the focus without having to set any specific tab index.

[YouKnowEno]

I have a use case in which I would like to enable keyboard controls even if the carousel is not in focus. Is it possible to modify enableKeyboardControls to enable this use case, if so desired? Thank you!

[jkrehm]

Ditto, I'm also trying to figure out a work-around. I wish this had been an opt-in change, i.e. consuming application tracks the focus and toggles keyboard controls on/off. I think it should have been called out as a breaking change with a major bump.

[TomGeshury]

Hello to get the old functionality, a workaround I found was exposing the nuka carousel ref in the component its being called in and in ComponentDidMount using the function that focuses the ref.

So it looks like this this:

componentDidMount() {
// the stateful logic in NukaCarousel that handles focusing the carousel
this.carouselRef.handleFocus()
}
<Carousel
          ref={(carouselRef) => {
                this.carouselRef = carouselRef;
              }}
/>