Adapt 767 content menu colors

[katrialesser]

READY FOR REVIEW

Summary

• Set styles on active page's link to be black
• Set external link support so it is always red (in all states)

Review By (Date)

• 10/21

Criticality

• How critical is this PR on a 1-10 scale? Also see Severity Assessment.
• E.g., it affects one site, or every site and product?
• Needed before thursday demo, 3 because it's only on some pages.

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Navigate to a page like Life Income Gifts (or Katria's test version in Katria's folder)
3. Verify that the active page has black bar, black text
4. Verify that links go to black bar, black text on hover
5. Check the external link I added (temporarily for testing) that it has the same link styles i just listed except a red external icon (always red, even on hover).
6. Let me know when you're done testing and i can remove that test link, or you can.

Front End Validation

• Is the markup using the appropriate semantic tags and passes HTML validation?
• Cross-browser testing has been performed?
• Automated accessibility scans performed?
• Manual accessibility tests performed?
• [ X] Design is approved by @ user? - was approved by Kerri today, I made sure to follow the specifics outlined in the jira ticket.

Backend / Functional Validation

Code

• Are the naming conventions following our standards? - I added one mixin, but I didn't convert all the menu styles into other mixins, I didn't adjust the existing styles much, out of scope for this ticket.
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided? eg (unit, behat, or codeception)

Code security

• Are all forms properly sanitized?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

Affected Projects or Products

• Does this PR impact any particular projects, products, or modules?

Associated Issues and/or People

• JIRA ticket(s) ADAPT-767
• Other PRs
• Any other contextual information that might be helpful (e.g., description of a bug that this PR fixes, new functionality that it adds, etc.)
• Anyone who should be notified? (@mention them here)

Resources

• AMP Tool
• Accessibility Manual Test Script
• HTML Validator
• Browserstack and link to Browserstack Credentials

[yvonnetangsu]

Looks like it need an extra level of nesting to override the color of the external link icon on hover/focus.

[yvonnetangsu]

Thanks! The current page link works great. If you could please tweak the external link icon on hover/focus, then we're good to go.

[katrialesser]

Looks like it need an extra level of nesting to override the color of the external link icon on hover/focus.

@yvonnetangsu I can't reproduce this problem:

And inspecting the code I don't see those styles from decanter; I think perhaps decanter is not properly loading on my local environment.
I will add the specificity needed (thank you for the screenshot from your inspector) and I will look at why decanter is loading properly on my local environment.

[yvonnetangsu]

Looks like it need an extra level of nesting to override the color of the external link icon on hover/focus.

@yvonnetangsu I can't reproduce this problem:

And inspecting the code I don't see those styles from decanter; I think perhaps decanter is not properly loading on my local environment.
I will add the specificity needed (thank you for the screenshot from your inspector) and I will look at why decanter is loading properly on my local environment.

Actually, my bad. I think it's fine. GTG! 😹

[yvonnetangsu]

GTG thanks!!