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.

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

Fix underline behavior in Link component #2249

Merged
merged 13 commits into from
Sep 19, 2023
Merged

Fix underline behavior in Link component #2249

merged 13 commits into from
Sep 19, 2023

Conversation

camertron
Copy link
Contributor

@camertron camertron commented Sep 19, 2023

What are you trying to accomplish?

The Primer::Beta::Link component does not render an underlined link when the underline: true argument is passed. I'm not sure why, since links are underlined by default. This PR makes the underlining explicit and stops using the primer/css .no-underline utility class. It also sets underline: false as the default, since that's the current behavior anyway, and will likely result in sweeping (and potentially unwanted) changes to dotcom.

Screenshots

Before After
A screenshot of the Link component rendered in a Lookbook preview. The link is not underlined. The params panel is open at the bottom showing the 'Underline' parameter is flipped on. A screenshot of the Link component rendered in a Lookbook preview. The link is underlined. The params panel is open at the bottom showing the 'Underline' parameter is flipped on.

Integration

No changes necessary in production.

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.

Underlining links when they are surrounded by other text is considered an accessibility best-practice. So, while this change does not fix any axe violations, it is more accessible and may impact teams' scorecards positively.

Merge checklist

  • Added/updated tests
    - [ ] Added/updated documentation
    - [ ] Added/updated previews (Lookbook)
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@changeset-bot
Copy link

changeset-bot bot commented Sep 19, 2023

🦋 Changeset detected

Latest commit: 00f67db

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

@github-actions github-actions bot added ruby Pull requests that update Ruby code css Pull requests that update CSS code patch release labels Sep 19, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Sep 19, 2023

⚠️ Visual differences found

Our visual comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review visual differences

@camertron camertron marked this pull request as ready for review September 19, 2023 18:06
@camertron camertron requested a review from a team as a code owner September 19, 2023 18:06
@camertron camertron requested review from a team and jonrohan September 19, 2023 18:06
Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

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

🤘🏻 Lovely fix

@camertron camertron merged commit 1209d24 into main Sep 19, 2023
29 checks passed
@camertron camertron deleted the link_underline branch September 19, 2023 22:53
@camertron camertron temporarily deployed to preview September 19, 2023 22:53 — with GitHub Actions Inactive
@primer primer bot mentioned this pull request Sep 19, 2023
@kintner
Copy link
Contributor

kintner commented Oct 5, 2023

@camertron This has resulted in underlines being rendered on hover when underline:false is set. Before the .no-underline class would prevent underline on hover as well.

Screenshot 2023-10-04 at 6 01 51 PM

@github-actions
Copy link
Contributor

github-actions bot commented Oct 5, 2023

Uh oh! @kintner, the image you shared is missing helpful alt text. Check #2249 (comment).

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.

@lesliecdubs
Copy link
Member

Thanks for the report @kintner! I've filed a follow-up issue to track resolution: #2277

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css Pull requests that update CSS code patch release ruby Pull requests that update Ruby code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants