Elements on non-active views should not be focusable with tabbing

[aloverso]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When a view is active, it should not allow keyboard-navigation tabbing to focus elements on other, non-visible views.

Current Behavior

When I have focusable elements in my views (such as form elements), it lets me tab-focus into these elements despite being unable to see/interact with them.

Steps to Reproduce (for bugs)

1. Code sandbox link
2. Open the browser console
3. Attempt to tab through the elements on the page
4. Observe that the tab focus is focusing elements that should be "non-existent" because they are not on the current active view

Context

I'm using swipeable-views to animate pages of a form. Due to this bug, the form is not accessible to a user who is using keyboard-only nav because they keyboard focus winds up on elements that are not visible or interactable on the page

[kmsarsam]

I believe this is the underlying issue behind #636

[kmsarsam]

You can get around this if you keep track of the index you are using, and use that index in the slideRenderer function to conditionally set the style of the slide based on whether the index is the active one. For example,

 const slideRenderer = ({index, key}: SlideRenderProps) => (
    <div key={key} style={index !== activeStep ? {display: 'none'} : {width: '100%'}}>
...

[rajatjyotishi]

@aloverso Add the following to the classname of or its parent. This will resolve the issue.

"& div[aria-hidden='true']": {
			visibility: 'hidden'
		}