diff --git a/.changeset/lemon-spoons-warn.md b/.changeset/lemon-spoons-warn.md new file mode 100644 index 00000000000..10be49f7368 --- /dev/null +++ b/.changeset/lemon-spoons-warn.md @@ -0,0 +1,7 @@ +--- +'@primer/react': patch +--- + +Show underline on Link when hovered or focused. + + diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-colorblind-focus-linux.png index 0a1f30f9283..c99c4dd86ee 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-colorblind-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-colorblind-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-colorblind-hover-linux.png index 30307a77023..a55ed886d51 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-colorblind-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-dimmed-focus-linux.png index 5fab9487056..b8d528eba64 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-dimmed-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-dimmed-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-dimmed-hover-linux.png index 2dc10d58465..01fd7cc89e6 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-dimmed-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-dimmed-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-focus-linux.png index 0a1f30f9283..f3c42dd96e4 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-high-contrast-focus-linux.png index d00eb90115d..10df4a06682 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-high-contrast-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-high-contrast-hover-linux.png index eaf143952e9..536374a808f 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-high-contrast-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-hover-linux.png index 30307a77023..48792bc8d57 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-tritanopia-focus-linux.png index 0a1f30f9283..c99c4dd86ee 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-tritanopia-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-tritanopia-hover-linux.png index 30307a77023..a55ed886d51 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-tritanopia-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-dark-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-colorblind-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-colorblind-focus-linux.png index a21e9d8ae9b..102f2d47a75 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-colorblind-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-colorblind-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-colorblind-hover-linux.png index 1d1788f6cba..0ae25820262 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-colorblind-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-focus-linux.png index a21e9d8ae9b..102f2d47a75 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-high-contrast-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-high-contrast-focus-linux.png index 0c805b05912..b19e63f298a 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-high-contrast-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-high-contrast-hover-linux.png index 73a4ea23071..a8ca87dd717 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-high-contrast-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-hover-linux.png index 1d1788f6cba..0ae25820262 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-hover-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-tritanopia-focus-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-tritanopia-focus-linux.png index a21e9d8ae9b..102f2d47a75 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-tritanopia-hover-linux.png b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-tritanopia-hover-linux.png index 1d1788f6cba..0ae25820262 100644 Binary files a/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-tritanopia-hover-linux.png and b/.playwright/snapshots/components/Link.test.ts-snapshots/Link-Muted-light-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-focus-linux.png index 4c41c11d214..8b901a8a80c 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-hover-linux.png index 89c1aacfa5b..2747d250743 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-focus-linux.png index 6a68c3983b0..8db0f44d4bd 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-hover-linux.png index ee0760189db..fc7f730609f 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-dimmed-hover-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-focus-linux.png index 4c41c11d214..ee2f1fdc1be 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-focus-linux.png index bbdd037c7d8..d7a8b4c7cf2 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-hover-linux.png index 05b3659066c..d7a0086d426 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-hover-linux.png index 89c1aacfa5b..23b56c0bdb2 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-hover-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-focus-linux.png index 4c41c11d214..8b901a8a80c 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-hover-linux.png index 89c1aacfa5b..2747d250743 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-dark-tritanopia-hover-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-focus-linux.png index 0b8fba47243..d853e05e845 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-hover-linux.png index 208f79736a8..0aaf569530f 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-colorblind-hover-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-focus-linux.png index 0b8fba47243..27e9d04ac42 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-focus-linux.png index 423213a0eea..2e66b9ab2c0 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-hover-linux.png index 06929790c2c..38c629d6c41 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-high-contrast-hover-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-hover-linux.png index 208f79736a8..3fc7c7ea21b 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-hover-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-focus-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-focus-linux.png index 0b8fba47243..d853e05e845 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-focus-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-focus-linux.png differ diff --git a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-hover-linux.png b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-hover-linux.png index 208f79736a8..0aaf569530f 100644 Binary files a/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-hover-linux.png and b/.playwright/snapshots/components/Timeline.test.ts-snapshots/Timeline-With-Inline-Links-light-tritanopia-hover-linux.png differ diff --git a/src/Link/Link.tsx b/src/Link/Link.tsx index 735c1674466..c010e3c9f45 100644 --- a/src/Link/Link.tsx +++ b/src/Link/Link.tsx @@ -24,7 +24,11 @@ const StyledLink = styled.a` 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) { diff --git a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap index eaad8694936..5f85290caf0 100644 --- a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap +++ b/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; } diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index 51c4560234b..62576b7eba8 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/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; diff --git a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap b/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap index 7087305ccb7..414f3222d3c 100644 --- a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap +++ b/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; diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap index d54bec24567..8d1adab3096 100644 --- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap +++ b/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;