Standard, accessible NerdWallet modal. Built on top of the 3rd party
react-modal package .
With Secure Encryption Message
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:
or if you're using
If your modal doesn't have a title, use the
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 .
The title and subtitle can be set as props in
<Modal>, but sometimes you may want to treat the title/subtitle as part of the content of the modal rather than a prop of the modal component.
For example, when showing a multi-step form in a modal, you will probably want to build the title and subtitle into each component that represents a step in the multi-step form, rather than trying to make
<Modal>'s parent component aware of which step is being shown in order to pull from some config object.
For this reason
<ModalHeader>, which is used internally by the
<Modal> component, is exported for client use:
It's important that a single unique value is supplied to the
titleElementId prop on both the
<Modal> and the
<ModalHeader>. This allows screen readers to correctly announce the modal when it is opened.
Run after the modal's back button is clicked.
Flag to indicate if the encryption security message should be added to the modal.
Indicates if the back button should be shown.
unique id for the title's dom element. If not provided, an autogenerated id will be used.
The title text of the modal
The subtitle text of the modal
Additional ARIA attributes. This could be extended for more support @deprecated
Duration for modal visual animations @deprecated
How the content container should be announced to screen readers @deprecated
Will be run after the modal has opened. @deprecated