Modal

Standard, accessible NerdWallet modal. Built on top of the 3rd party react-modal package     .

() => {
  const [modalOpen, setOpen] = React.useState(false);
  const toggleOpen = () => setOpen(open => !open);
  return (
    <React.Fragment>
      <Modal
        isOpen={modalOpen}
        onRequestClose={toggleOpen}
        subtitle="Subtitle"
        title="Title"
        titleElementId="title-id"
      >
        Modal content goes here.
      </Modal>
      <Button primary onClick={toggleOpen}>
        Open
      </Button>
    </React.Fragment>
  );
};

() => {
  const [modalOpen, setOpen] = React.useState(false);
  const toggleOpen = () => setOpen(l => !l);
  return (
    <React.Fragment>
      <Modal
        isOpen={modalOpen}
        onRequestClose={toggleOpen}
        shouldShowSecurityMessage
        subtitle="Subtitle"
        title="Title"
        titleElementId="title-id"
      >
        Modal content goes here.
      </Modal>
      <Button onClick={toggleOpen}>Open</Button>
    </React.Fragment>
  );
};

Provide a concise accessible name to the element which has the role. This is generally done with aria-labelledby pointing to the ID of the header. If no header is available, aria-label can be used. This enables a screen reader user to better understand why and how the keyboard focus changed, when you set focus to the modal.

If your modal has a title, you can set the correct ARIA attributes like this:

<Modal
  title="My label"
  titleElementId="my-title-id"
  aria={{
    labelledby: 'my-title-id',
  }}
/>

If your modal doesn't have a title, use the contentLabel prop:

<Modal
  contentLabel="My label"
/>

The underlying react-modal library needs to know the root of your application so it can hide it via the aria-hidden attribute when the modal is open. This "app element" is automatically set to #main, so you shouldn't need to change this when working in normal React apps. However, if you're working in other contexts like Storybook, you may wish to change this app element:

import { Modal } from '@nerdwallet/currency';
Modal.setAppElement('#other-query-selector-here');

If you are writing component tests, you may need to have the tests run inside an HTML wrapper with id="main" set for the modal to render correctly in context.

See more info in the react-modal docs on app-element     .