Skip to content

USWDS: Banner - WHC fix#4529

Merged
mejiaj merged 40 commits into
cm-high-contrast-a11yfrom
cm-hc-banner
Mar 21, 2022
Merged

USWDS: Banner - WHC fix#4529
mejiaj merged 40 commits into
cm-high-contrast-a11yfrom
cm-hc-banner

Conversation

@mahoneycm

@mahoneycm mahoneycm commented Feb 23, 2022

Copy link
Copy Markdown
Contributor

Preview

Banner →

Description

Resolves #4517 banner issues

Icons would disappear in high contrast mode, causing users to lose critical information that the banner could be expanded.

Because the icons were already placed using place-icon(), the fix was simply adding @media (forced-colors:active) stylings.

Additional information

Currently:

Desktop
image

Mobile
image

After Fix:

Desktop
image

Mobile
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 20 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 requested a review from mejiaj February 23, 2022 19:16
@mahoneycm mahoneycm mentioned this pull request Feb 23, 2022
8 tasks
@mahoneycm mahoneycm changed the base branch from develop to cm-high-contrast-a11y February 24, 2022 16:34
Comment thread src/stylesheets/components/_banner.scss Outdated
Comment thread src/stylesheets/components/_banner.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.

Thanks Charlie, added some suggestions.

@mahoneycm mahoneycm requested a review from mejiaj March 21, 2022 14:30

@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.

Any way to make the color of the lock image in the Secure .gov websites use HTTPS section match the text color?

@mahoneycm

mahoneycm commented Mar 21, 2022

Copy link
Copy Markdown
Contributor Author

Any way to make the color of the lock image in the Secure .gov websites use HTTPS section match the text color?

Easy fix! I can make it match the text

image

Or use buttonText to help it to stand out

image

@thisisdano

@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!

@mejiaj mejiaj requested a review from thisisdano March 21, 2022 18:48
@mejiaj mejiaj merged commit 6d79a3e into cm-high-contrast-a11y Mar 21, 2022
@mejiaj mejiaj deleted the cm-hc-banner branch March 21, 2022 18:50
mahoneycm pushed a commit that referenced this pull request Mar 23, 2022
This reverts commit 6d79a3e, reversing
changes made to 847c395.
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

6 participants