Standard, accessible NerdWallet modal. Built on top of the 3rd party
react-modal package .
With Secure Encryption Message
With Call to Action
It's important for the modal to have a label. If you're using the Modal's
title prop, it will automatically be used as the label.
If you use a custom title, you can use the
aria prop to wire things up yourself:
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:
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 .