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:
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 .