D8CORE-4778: adding underline hovers to splash links

[jenbreese]

READY FOR REVIEW

Summary

• Adding an underline to the Splash text

Review By (Date)

• Next week

Criticality

• Normal

Urgency

• Normal

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Rebuild Cache and import config drush cr ; drush ci
3. Navigate to a page and create splash text with a link and one with a mailto link
4. Verify there is an underline on hover.

Site Configuration Sync

• Is there a config:export in this PR that changes the config sync directory?

Front End Validation

• Design is approved by @ user?
• HTML validation: Is the markup using the appropriate semantic tags and passes validation? Or, QA request ticket created?
• Cross-browser testing: Has been performed? Or, QA request ticket created?
• Automated accessibility: Scans performed? Or, QA request ticket created?
• Manual accessibility: Manually tested? Or, QA request ticket created?

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• 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

- D8CORE-4778

Resources

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

[jdwjdwjdw]

This looks good A11y-wise, but do you think we should we update this to match the other mailto link underlines? Those have the underline appearing as the default state, not just on hover.

[jenbreese]

@jdwjdwjdw I'm not sure. @cjwest Does the underline on the splash text need to be on hover or a constant? I did it as an on hover. But Jacob points out that the other mailto are always underlined and the color changes on hover. thanks!

[cjwest]

Good question, @jenbreese !
My understanding of this has changed over time. I agree with @jdwjdwjdw's point. Here's what the standard says:

To meet WCAG 1.4.1: Use of Color from Technique G183

underlines are recommended for links in blocks of text.

[pookmish]

Actually, instead of ADDing more css, let's remove the css that this PR is overridding.

[jenbreese]

@pookmish I looked and the text-decoration:none comes from Decanter in the @types mixin: core/src/scss/utilities/mixins/typography/_types.scss

That mixin is used on these pages. The headings and the card would like have pretty big impact. It is safer to override rather than remove it in Decanter. I'm concerned it will have trickle effects that I would have to have other teammates agree on. What do you think?

Where the mixin is used:
decanter/core/src/scss/components/date-stacked/_date-stacked.scss
decanter/core/src/scss/elements/typography/_typography.scss - all headings
decanter/core/src/scss/utilities/mixins/card/_card.scss - on the super headline span
decanter/core/src/scss/utilities/mixins/typography/_font-splash.scss

[pookmish]

Then this issue should really be resolved in decanter. Basically we should never do a text-decoration: none without re-setting the decoration on hover. There always needs to be a visual, non-color indicator for hover/focus. all that would really need to be done is add this code block to the @mixin types

 &:hover,
 &:focus {
   text-decoration: underline;
 }

These really should be any link in the affected elements you mentioned. The date stacked doesn't contain any links. The super headline doesn't contain any links. the heading should or already do have an underline if they are a link.

[pookmish]

What it should look like

[jenbreese]

Ok. That all makes sense. I will create that PR change for Decanter.

For the splash text, having the underline on hover will solve the original problem in the Jira, correct @cjwest?

[cjwest]

@jenbreese
We want to treat mailto links just like other links: They are always underlined and the color changes on hover.

[pookmish]

This still needs work.