Skip to content

USWDS - Footer: Added styling for WHC Mode#4528

Merged
mejiaj merged 44 commits into
cm-high-contrast-a11yfrom
cm-hc-footer
Mar 25, 2022
Merged

USWDS - Footer: Added styling for WHC Mode#4528
mejiaj merged 44 commits into
cm-high-contrast-a11yfrom
cm-hc-footer

Conversation

@mahoneycm

@mahoneycm mahoneycm commented Feb 18, 2022

Copy link
Copy Markdown
Contributor

Preview

Footer →

Description

Resolves #4517 footer issues

Currently, social media icons and expand chevrons (mobile only) disappear in dark high contrast modes, causing the user to lose context and content.

This PR also fixes the disappearing chevrons in the big footer variant in mobile views.

Additional information

Social Icons

Currently:

Alternative color shows hover

image
Default

image
High Contrast

After Fix:

image

Mobile Chevrons

Currently:

image

After Fix:

image

Before you hit Submit, make sure you’ve done whichever of these applies to you:

  • Follow the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run npm test and make sure the tests for the files you have changed have passed.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.
  • Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

aduth and others added 21 commits October 5, 2021 08:20
Because currently, it is not testing anything.
The following updates have been made to remove redundancies with the updated Getting Started guidance for developers and per conversation with the dev team:
–"Download and install" has been made more specific: "Download and install without npm."
–"Install using npm" has been removed. References to this section have tentatively been replaced with "NEW LINK," and prior to publication, will be replaced with the link to the updated web guidance for Getting Started for devs.
–Content of "Use another framework or package manager" has been moved up to appear under "Using the design system."
–"Accessibility" has been updated to note a few of the tools we use to ensure USWDS is accessible.
Added link to new dev guidance
Co-authored-by: James Mejia <james.mejia@gsa.gov>
Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.7 to 1.14.8.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](follow-redirects/follow-redirects@v1.14.7...v1.14.8)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
…directs-1.14.8

Bump follow-redirects from 1.14.7 to 1.14.8
[Docs] - [CONTRIBUTING]: Fix broken "Browser Support" link
Tests: Update "Behavior" spec to test expected behavior
USWDS - Combobox: add aria-controls for 508 compliance
Icon: Remove inline style in GitHub icon to fix CSP error
@mahoneycm mahoneycm marked this pull request as ready for review February 22, 2022 19:27
@mahoneycm mahoneycm requested a review from mejiaj February 22, 2022 19:27
@mahoneycm mahoneycm mentioned this pull request Feb 22, 2022
8 tasks
@mahoneycm mahoneycm changed the base branch from develop to cm-high-contrast-a11y February 24, 2022 16:35

@mejiaj mejiaj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work, added some suggestions to tidy it up a bit.

Comment thread src/stylesheets/components/_footer.scss Outdated
Comment thread src/stylesheets/components/_footer.scss Outdated
Comment thread src/stylesheets/components/_footer.scss Outdated
Comment thread src/stylesheets/components/_footer.scss Outdated
Comment thread src/stylesheets/components/_footer.scss Outdated
@mahoneycm mahoneycm requested a review from mejiaj March 21, 2022 14:54

@thisisdano thisisdano left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM once you address James's comments

@mahoneycm mahoneycm requested a review from thisisdano March 21, 2022 19:26
@amyleadem

amyleadem commented Mar 21, 2022

Copy link
Copy Markdown
Contributor

@mahoneycm @mejiaj @thisisdano We will have to be careful of how these changes will play with the changes in PR #4476. I know we are working on merging both at around the same time, and I am concerned about the differences in markup/scss. Flagging for awareness!

@amyleadem

Copy link
Copy Markdown
Contributor

@mahoneycm I am concerned about the social media icon color contrast shown in your screenshots - I don't have great access to windows HC mode but I am wondering if it is possible to override either the background or icon color with @media (forced-colors: active) and (prefers-color-scheme: light). This feels a bit like I'm trying to drive from the backseat though, so please disregard if not actually possible!

@mahoneycm

Copy link
Copy Markdown
Contributor Author

Used forced-color-adjust: none to set the background color for the social link icons to lightgrey. This is easy to see in all high contrast modes and keeps things consistent between versions

image

@mahoneycm mahoneycm requested a review from amyleadem March 25, 2022 17:15
Comment thread src/stylesheets/components/_footer.scss Outdated
Comment thread src/stylesheets/components/_footer.scss Outdated
Comment thread src/stylesheets/components/_footer.scss Outdated

@mejiaj mejiaj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thank you!

@mejiaj mejiaj merged commit 6adaaa6 into cm-high-contrast-a11y Mar 25, 2022
@mejiaj mejiaj deleted the cm-hc-footer branch March 25, 2022 18:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Phase 1: Windows HC Fixes

7 participants