Intro Modal

[clhenrick]

TO DO:

• [x] responsive layout
• [x] Site should initially load with a modal with an email address signup link.
• [x] Checkbox for the user to keep the modal closed when they return to the site

Also integrate Mailchimp, but that has been moved to a separate issue (#18)

[clhenrick]

Mobile mock up:

[clhenrick]

Need a mailchimp account or similar to log the users email address once the form has been submitted.

@nilesbarnes do you know if you already have one set up?

[clhenrick]

TO DO:

• responsive layout
• method for preventing the modal from displaying when a user returns to the site

[danrademacher]

@clhenrick looking good!

But when I load this in Chrome and FF it looks like the whole modal maybe has focus?

Chrome:

Firefox (subtler black line along the top):

I couldn't figure out how to unselect to test if focus was the issue, but I did refresh cache a few times to make sure it wasn't some errant clicking or dragging on my part.

[clhenrick]

The modal is designed to be accessible so I think that's why it has the focus enabled. One of the pitfalls of modals is that if they aren't configured correctly they can be an accessibility barrier. Notice if you hit your escape key it will close or if you hit tab it will "unfocus".

[danrademacher]

Good point re accessibility.

I wonder if there's a handle in there to get the email field to be focus, which looks better to my eye:

[clhenrick]

The email focus would be preferable, may need to use a different component than ReactModal or fork it and modify it so that the outline isn't showing by default. Though then you are messy with its accessibility feature.

Also worth noting if you hit the tab key the outline around the modal will disappear and the email input will be selected / focused.