PreventFocus

Notes

When it receives a boolean prop enabled, PreventFocus blocks users from navigating via the keyboard or screenreader to its children. Its intended use is with interactive widgets such as modals, in which the area 'covered' by the modal is not supposed to be discoverable while the modal is open. In this case, wrap PreventFocus around the area(s) visually covered by the modal window.

Notes: This was created due to limitations of libraries like react-focus-lock and focus-trap-react which at this time they have one major A11y limitation: They don't prevent screen readers from navigating to items that are tabbable outside the focus trap/loop.

One way to prevent screen readers from navigating to all the child tabbable elements would be add tabindex="-1" to them. But this isn't easy to implement in React. That's why we took this route instead.

Props

childrenany*
A single child element or React Component for PreventFocus to wrap.
enabledbool[true]
Flag indicating whether child elements within this component should be inert and not allow focus.
wrapWithDivbool[true]
Flag indicating whether to wrap the child of this component with a div (including focus management props). This is useful when the child of this component ignores extra props, like ReactTransitionGroup.

class PreventFocusExample extends React.Component {
  constructor() {
    this.toggleEnabled = this.toggleEnabled.bind(this);
    this.state = { isEnabled: true };
  }

  toggleEnabled() {
    this.setState({ isEnabled: !this.state.isEnabled });
  }

  render() {
    const { isEnabled } = this.state;
    return (
      <div>
        <label className='flex items-center'>
          <span className='mr2'>Enable Prevent Focus</span>
          <Toggle 
            checked={isEnabled}
            onChange={this.toggleEnabled}
          />
        </label>
        <p className="text-xxs pt3">Please note: In this example the background color of the PreventFocus is gray when it's enabled but this isn't by default. This was only added to this example to help make it obvious what elements are children and are influenced</p>
        <div>
          <Field id='fullName' className='mb2'>Full Name</Field>
          <PreventFocus enabled={isEnabled}
            style={{ backgroundColor: isEnabled ? 'lightgray' : 'transparent' }}
          >
            <>
              <Field id='addressLine1' className='mb2'>Address 1</Field>
              <Field id='addressLine2' className='mb2'>Address 2</Field>
            </>
          </PreventFocus>
          <Field id='email'>Email Address</Field>
        </div>
      </div>
    );
  }
}

render(<PreventFocusExample />);

class PreventFocusExample extends React.Component {
  constructor() {
    this.toggleEnabled = this.toggleEnabled.bind(this);
    this.state = { isEnabled: true };
  }

  toggleEnabled() {
    this.setState({ isEnabled: !this.state.isEnabled });
  }

  render() {
    const { isEnabled } = this.state;
    return (
      <div>
        <label className='flex items-center'>
          <span className='mr2'>Enable Prevent Focus</span>
          <Toggle 
            checked={isEnabled}
            onChange={this.toggleEnabled}
          />
        </label>
        <p className="text-xxs pt3">Please note: In this example the background color of the PreventFocus is gray when it's enabled but this isn't by default. This was only added to this example to help make it obvious what elements are children and are influenced</p>
        <div>
          <Field id='fullName' className='mb2'>Full Name</Field>
          <PreventFocus enabled={isEnabled}
            style={{ backgroundColor: isEnabled ? 'lightgray' : 'transparent' }}
          >
            <>
              <Field id='addressLine1' className='mb2'>Address 1</Field>
              <Field id='addressLine2' className='mb2'>Address 2</Field>
            </>
          </PreventFocus>
          <Field id='email'>Email Address</Field>
        </div>
      </div>
    );
  }
}

render(<PreventFocusExample />);