fix: remove positive tab indices

README.md

@@ -81,7 +81,7 @@ I've got a good [article about focus management, dialogs and  WAI-ARIA](https://
   - `whiteList=fn` you could _whitelist_ locations FocusLock should carry about. Everything outside it will ignore. For example - any modals.
   - `as='div'` if you need to change internal `div` element, to any other. Use ref forwarding to give FocusLock the node to work with.
   - `lockProps={}` to pass any extra props (except className) to the internal wrapper.
-  - `maxTabIndex={0}` to remove positive indices. This allows for better accessibility compliance, but removes compatibility with apps that use positive indices.
+  - `usePositiveIndices` to maintain a focus lock when elements exterior to the focus lock have a tabIndex greater than 0.
 
 ### Focusing in OSX (Safari/Firefox) is strange!
 By default `tabbing` in OSX `sees` only controls, but not links or anything else `tabbable`. This is system settings, and Safari/Firefox obey.

src/Lock.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  node, bool, string, any, arrayOf, oneOfType, object, func, number,
+  node, bool, string, any, arrayOf, oneOfType, object, func,
 } from 'prop-types';
 import * as constants from 'focus-lock/constants';
 import {useMergeRefs} from 'use-callback-ref';
@@ -28,7 +28,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
     group,
     className,
     whiteList,
-    maxTabIndex = 1,
+    usePositiveIndices,
     shards = emptyArray,
     as: Container = 'div',
     lockProps: containerProps = {},
@@ -40,6 +40,8 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
     onDeactivation: onDeactivationCallback,
   } = props;
 
+  const maxTabIndex = usePositiveIndices ? 1 : 0;
+
   const [id] = React.useState({});
 
   // SIDE EFFECT CALLBACKS
@@ -177,7 +179,7 @@ FocusLock.propTypes = {
   disabled: bool,
   returnFocus: oneOfType([bool, object]),
   noFocusGuards: bool,
-  maxTabIndex: number,
+  usePositiveIndices: bool,
 
   allowTextSelection: bool,
   autoFocus: bool,
@@ -207,12 +209,12 @@ FocusLock.defaultProps = {
   autoFocus: true,
   persistentFocus: false,
   crossFrame: true,
+  usePositiveIndices: undefined,
   allowTextSelection: undefined,
   group: undefined,
   className: undefined,
   whiteList: undefined,
   shards: undefined,
-  maxTabIndex: 1,
   as: 'div',
   lockProps: {},