Foundation.mozilla.org: "has-danger" class for the footer newsletter signup is invisible.

[Pomax]

When the footer's newsletter signup input field has the has-danger class, which is supposed to highlight an error with a red border, there does not appear to be a visual cue:

As a design question: does this need a visual cue at all?
As dev question: if yes, what's the best SCSS to use here? If no, is it more work to remove the code that adds has-danger than it is to just leave it as is? (with a code comment that points to this issue)

[kristinashu]

I think @mmmavis worked on some of this so maybe she has some suggestions?

@natalieworth mocked up all the success and error states here https://redpen.io/p/nr17f804a498f8d46c

I'm not sure what "has danger" means but do any of these comps help?

[mmmavis]

@kristinashu has-danger is just a class name we use in code to tag invalid elements in the form.

Do you know if we want the above treatment (highlighted error fields in red border + add exclamation mark icon) to be applied on both "dark mode" signup form (e.g., form on nav, footer) & "regular" signup form (in-page form like on bannered campaign page)?

[kristinashu]

Yes, ideally they would be consistent.

[mmmavis]

Yes, ideally they would be consistent.

Cool. This makes implementation more straightforward 😂

@youriwims do you have all you need to work on this ticket? Oops sorry I thought Youri was assigned on this ticket. Ignore me plz.

[youriwims]

@natalieworth could you upload the exclamation icon pls? 🙏 Also, should there be a different error message for when there's no email typed & when there's an incorrect email? Just double checking since on prod, both messages are the same.

[natalieworth]

error icon.svg.zip

@youriwims Is svg okay?

[youriwims]

Yep, that svg should work.

Also, should there be a different error message for when there's no email typed & when there's an incorrect email? Just double checking since on prod, both messages are the same.

☝️ @natalieworth

[youriwims]

Also, I couldn't find the error states in Abstract, can you upload them, pls?

[youriwims]

fyi for using $red for both 'dark mode' and 'regular mode'

[natalieworth]

Let use the $red for the dark background and our $dark-red for the white background (since we can't get 1 color that will accessibly work for both)

[natalieworth]

@youriwims Added error states for the footer back in the Foundation Site abstract file under 'Footer WIP' section:

cc @mmmavis