Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix action list item color contrast issue (hover state, danger style) #2169

Merged
merged 2 commits into from
Aug 1, 2023
Merged

Fix action list item color contrast issue (hover state, danger style) #2169

merged 2 commits into from
Aug 1, 2023

Conversation

camertron
Copy link
Contributor

@camertron camertron commented Jul 31, 2023 •
edited
Loading

What are you trying to accomplish?

This PR addresses a color contrast issue when hovering over ActionList/ActionMenu items, specifically when rendering in the "danger" style.

Screenshots

Before After
'Before' screenshot showing an ActionList. The last item is being hovered and has red label text, gray description text, and a lighter red background color. 'After' screenshot showing an ActionList. The last item is being hovered and has red label text, red description text, and a lighter red background color.

Integration

No updates necessary in production.

List the issues that this change affects.

Partially addresses https://github.com/github/primer/issues/2249

Risk Assessment

  • Low risk the change is small, highly observable, and easily rolled back.
  • Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
  • High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

Accessibility

  • No new axe scan violation - This change does not introduce any new axe scan violations.

Merge checklist

  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

@changeset-bot
Copy link

changeset-bot bot commented Jul 31, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: ec4fccd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/view-components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@camertron camertron temporarily deployed to preview July 31, 2023 20:32 — with GitHub Actions Inactive
@camertron camertron added the skip changeset Pull requests that don't change the library output label Jul 31, 2023
@camertron camertron temporarily deployed to github-pages July 31, 2023 20:37 — with GitHub Actions Inactive
@github-actions github-actions bot added the css Pull requests that update CSS code label Jul 31, 2023
@camertron camertron temporarily deployed to github-pages July 31, 2023 20:55 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to preview July 31, 2023 20:56 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages July 31, 2023 21:01 — with GitHub Actions Inactive
@camertron camertron removed the skip changeset Pull requests that don't change the library output label Aug 1, 2023
@camertron camertron changed the title Fix action list item playground description control Fix action list item color contrast issue (hover state, danger style) Aug 1, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Aug 1, 2023

Uh oh! @camertron, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

1 similar comment
@github-actions
Copy link
Contributor

github-actions bot commented Aug 1, 2023

Uh oh! @camertron, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

@camertron camertron marked this pull request as ready for review August 1, 2023 17:55
@camertron camertron requested a review from a team as a code owner August 1, 2023 17:55
@camertron camertron requested review from a team, simurai, keithamus and langermank and removed request for simurai and keithamus August 1, 2023 17:55
@camertron camertron requested a review from jonrohan August 1, 2023 17:55
langermank
langermank approved these changes Aug 1, 2023
View reviewed changes
Copy link
Contributor

@langermank langermank left a comment

Choose a reason for hiding this comment

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

We need hover state snapshot tests 😏

@camertron camertron merged commit 4f11f5e into main Aug 1, 2023
37 checks passed
@camertron camertron deleted the action_menu_color_contrast branch August 1, 2023 18:46
@primer-css primer-css mentioned this pull request Aug 1, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@langermank langermank langermank approved these changes

@jonrohan jonrohan Awaiting requested review from jonrohan

Assignees
No one assigned
Labels
css Pull requests that update CSS code patch release
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@camertron @langermank