Show underline on Link when hovered or focused. (#3586)

* Show underline on Link when hovered or focused.

* Update snapshots.

* Add changeset.

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

.changeset/lemon-spoons-warn.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+Show underline on Link when hovered or focused.
+
+<!-- Changed components: Link -->

src/Link/Link.tsx

@@ -24,7 +24,11 @@ const StyledLink = styled.a<StyledLinkProps>`
   color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
   text-decoration: ${props => (props.underline ? 'underline' : 'none')};
   &:hover {
-    text-decoration: ${props => (props.muted ? 'none' : 'underline')};
+    text-decoration: underline;
+    ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')};
+  }
+  &:focus {
+    text-decoration: underline;
     ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')};
   }
   &:is(button) {

src/Link/__tests__/__snapshots__/Link.test.tsx.snap

@@ -12,6 +12,11 @@ exports[`Link applies button styles when rendering a button element 1`] = `
   text-decoration: underline;
 }
 
+.c0:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 .c0:is(button) {
   display: inline-block;
   padding: 0;
@@ -46,6 +51,11 @@ exports[`Link passes href down to link element 1`] = `
   text-decoration: underline;
 }
 
+.c0:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 .c0:is(button) {
   display: inline-block;
   padding: 0;
@@ -81,6 +91,11 @@ exports[`Link renders consistently 1`] = `
   text-decoration: underline;
 }
 
+.c0:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 .c0:is(button) {
   display: inline-block;
   padding: 0;
@@ -116,6 +131,12 @@ exports[`Link respects hoverColor prop 1`] = `
   color: #0969da;
 }
 
+.c0:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  color: #0969da;
+}
+
 .c0:is(button) {
   display: inline-block;
   padding: 0;
@@ -147,8 +168,14 @@ exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
 }
 
 .c0:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  color: #0969da;
+}
+
+.c0:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: #0969da;
 }
 
@@ -183,8 +210,14 @@ exports[`Link respects the "muted" prop 1`] = `
 }
 
 .c0:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  color: #0969da;
+}
+
+.c0:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: #0969da;
 }
 

src/NavList/__snapshots__/NavList.test.tsx.snap

@@ -209,6 +209,11 @@ exports[`NavList renders a simple list 1`] = `
   text-decoration: underline;
 }
 
+.c3:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 .c3:is(button) {
   display: inline-block;
   padding: 0;
@@ -604,6 +609,11 @@ exports[`NavList renders with groups 1`] = `
   text-decoration: underline;
 }
 
+.c7:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 .c7:is(button) {
   display: inline-block;
   padding: 0;
@@ -1077,6 +1087,11 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   text-decoration: underline;
 }
 
+.c11:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 .c11:is(button) {
   display: inline-block;
   padding: 0;
@@ -1545,6 +1560,11 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   text-decoration: underline;
 }
 
+.c11:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 .c11:is(button) {
   display: inline-block;
   padding: 0;

src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap

@@ -119,6 +119,11 @@ exports[`UnderlineNav renders consistently 1`] = `
   text-decoration: underline;
 }
 
+.c4:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 .c4:is(button) {
   display: inline-block;
   padding: 0;
@@ -207,6 +212,11 @@ exports[`UnderlineNav renders consistently 1`] = `
   text-decoration: underline;
 }
 
+.c7:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 .c7:is(button) {
   display: inline-block;
   padding: 0;

src/__tests__/__snapshots__/SideNav.test.tsx.snap

@@ -12,6 +12,11 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
   text-decoration: underline;
 }
 
+.c0:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
 .c0:is(button) {
   display: inline-block;
   padding: 0;