Remove positive tabIndex

README.md

@@ -81,6 +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.
+  - `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

@@ -28,6 +28,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
     group,
     className,
     whiteList,
+    usePositiveIndices,
     shards = emptyArray,
     as: Container = 'div',
     lockProps: containerProps = {},
@@ -39,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
@@ -136,7 +139,7 @@ const FocusLock = React.forwardRef(function FocusLockUI(props, parentRef) {
     <React.Fragment>
       {hasLeadingGuards && [
         <div key="guard-first" data-focus-guard tabIndex={disabled ? -1 : 0} style={hiddenGuard}/>, // nearest focus guard
-        <div key="guard-nearest" data-focus-guard tabIndex={disabled ? -1 : 1} style={hiddenGuard}/>, // first tabbed element guard
+        <div key="guard-nearest" data-focus-guard tabIndex={disabled ? -1 : maxTabIndex} style={hiddenGuard}/>, // first tabbed element guard
       ]}
       {!disabled && (
         <SideCar
@@ -176,6 +179,7 @@ FocusLock.propTypes = {
   disabled: bool,
   returnFocus: oneOfType([bool, object]),
   noFocusGuards: bool,
+  usePositiveIndices: bool,
 
   allowTextSelection: bool,
   autoFocus: bool,
@@ -205,6 +209,7 @@ FocusLock.defaultProps = {
   autoFocus: true,
   persistentFocus: false,
   crossFrame: true,
+  usePositiveIndices: undefined,
   allowTextSelection: undefined,
   group: undefined,
   className: undefined,