Modals

Modals are disruptive components that can cause frustration and create interruptions in a user's workflow. Modals should be used sparingly under specific circumstances, and should not be overused in order provide an optimal user experience.

Modals should never be used to solely present information. If you want to solely present information, consider using a tooltip or presenting the information visibly and clearly next to the content of interest.

Instead, the purpose of a modal is to prompt a user to review a potentially destructive action or perform an activity that advances a user workflow.

A modal is composed of a header, content, and footer section. The header should contain a succinct message of what the modal will do. The content area should present the information clearly and concisely, as well as in the correct format (chart, table). If the content area is too long, make sure users know that they can scroll to get to content below the fold. The footer should always have at least a primary and secondary button, and an optional tertiary button.

Primary buttons should be used to highlight the main action a user can perform on the modal. Secondary modal buttons should primarily be used to close out of the modal, but in special cases can allow a user to edit details or go back to a previous step. Tertiary buttons should be rarely used unless the workflow requires a user to complete a specific action before they can continue, as they induce more cognitive load and frustration.

    <Modal.Dialog>
      <Modal.Header closeButton>
        <Modal.Title>Modal title</Modal.Title>
      </Modal.Header>

      <Modal.Body>
        <p>Modal body text goes here.</p>
      </Modal.Body>

      <Modal.Footer>
        <Button constiant="secondary" className="mr-auto">Tertiary</Button>
        <Button constiant="secondary">Close</Button>
        <Button constiant="primary">Submit</Button>
      </Modal.Footer>
    </Modal.Dialog>
    

    <Modal show={this.state.show} onHide={() => this.setState({show: false})}>
      <Modal.Header closeButton>
        <Modal.Title>Modal title</Modal.Title>
      </Modal.Header>

      <Modal.Body>
        <p>Modal body text goes here.</p>
      </Modal.Body>

      <Modal.Footer>
        <Button variant="secondary" className="mr-auto" onClick={() => this.setState({show: false})}>Tertiary</Button>
        <Button variant="secondary" onClick={() => this.setState({show: false})}>Close</Button>
        <Button variant="primary" onClick={() => this.setState({show: false})}>Submit</Button>
      </Modal.Footer>
    </Modal>
    

Accessibility

Checkboxes Must Be Keyboard Navigable

Since a checkbox is an interactive control, it must be focusable and keyboard accessible. If the role is applied to a non-focusable element, use the tabindex attribute to change this. The expected keyboard shortcut for activating a checkbox is the Space key.

Make the Label Clickable

In the above examples, you may have noticed that you can toggle a checkbox by clicking on its associated <label> element as well as on the checkbox itself. This is a really useful feature of HTML form labels that makes it easier to click the option you want, especially on small-screen devices like smartphones. Beyond accessibility, this is another good reason to properly set up <label> elements on your forms.