Showing the tooltip on focus-within (#2750)

* Showing the tooltip on focus-within

* Adding changeset

* Updating snapshots

Co-authored-by: Ian Sanders <[email protected]>

Author: jdrush89

.changeset/shaggy-stingrays-fly.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Show tooltips on focus-within

src/Tooltip.tsx

@@ -56,7 +56,8 @@ const TooltipBase = styled.span<SxProp>`
 
   &:hover,
   &:active,
-  &:focus {
+  &:focus,
+  &:focus-within {
     &::before,
     &::after {
       display: inline-block;
@@ -71,7 +72,8 @@ const TooltipBase = styled.span<SxProp>`
 
   &.tooltipped-no-delay:hover,
   &.tooltipped-no-delay:active,
-  &.tooltipped-no-delay:focus {
+  &.tooltipped-no-delay:focus,
+  &.tooltipped-no-delay:focus-within {
     &::before,
     &::after {
       animation-delay: 0s;
@@ -80,7 +82,8 @@ const TooltipBase = styled.span<SxProp>`
 
   &.tooltipped-multiline:hover,
   &.tooltipped-multiline:active,
-  &.tooltipped-multiline:focus {
+  &.tooltipped-multiline:focus,
+  &.tooltipped-multiline:focus-within {
     &::after {
       display: table-cell;
     }

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

@@ -1469,9 +1469,11 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 .c3:hover::before,
 .c3:active::before,
 .c3:focus::before,
+.c3:focus-within::before,
 .c3:hover::after,
 .c3:active::after,
-.c3:focus::after {
+.c3:focus::after,
+.c3:focus-within::after {
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1490,16 +1492,19 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 .c3.tooltipped-no-delay:hover::before,
 .c3.tooltipped-no-delay:active::before,
 .c3.tooltipped-no-delay:focus::before,
+.c3.tooltipped-no-delay:focus-within::before,
 .c3.tooltipped-no-delay:hover::after,
 .c3.tooltipped-no-delay:active::after,
-.c3.tooltipped-no-delay:focus::after {
+.c3.tooltipped-no-delay:focus::after,
+.c3.tooltipped-no-delay:focus-within::after {
   -webkit-animation-delay: 0s;
   animation-delay: 0s;
 }
 
 .c3.tooltipped-multiline:hover::after,
 .c3.tooltipped-multiline:active::after,
-.c3.tooltipped-multiline:focus::after {
+.c3.tooltipped-multiline:focus::after,
+.c3.tooltipped-multiline:focus-within::after {
   display: table-cell;
 }
 
@@ -2212,9 +2217,11 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 .c3:hover::before,
 .c3:active::before,
 .c3:focus::before,
+.c3:focus-within::before,
 .c3:hover::after,
 .c3:active::after,
-.c3:focus::after {
+.c3:focus::after,
+.c3:focus-within::after {
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -2233,16 +2240,19 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 .c3.tooltipped-no-delay:hover::before,
 .c3.tooltipped-no-delay:active::before,
 .c3.tooltipped-no-delay:focus::before,
+.c3.tooltipped-no-delay:focus-within::before,
 .c3.tooltipped-no-delay:hover::after,
 .c3.tooltipped-no-delay:active::after,
-.c3.tooltipped-no-delay:focus::after {
+.c3.tooltipped-no-delay:focus::after,
+.c3.tooltipped-no-delay:focus-within::after {
   -webkit-animation-delay: 0s;
   animation-delay: 0s;
 }
 
 .c3.tooltipped-multiline:hover::after,
 .c3.tooltipped-multiline:active::after,
-.c3.tooltipped-multiline:focus::after {
+.c3.tooltipped-multiline:focus::after,
+.c3.tooltipped-multiline:focus-within::after {
   display: table-cell;
 }
 

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

@@ -47,9 +47,11 @@ exports[`Tooltip renders consistently 1`] = `
 .c0:hover::before,
 .c0:active::before,
 .c0:focus::before,
+.c0:focus-within::before,
 .c0:hover::after,
 .c0:active::after,
-.c0:focus::after {
+.c0:focus::after,
+.c0:focus-within::after {
   display: inline-block;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -68,16 +70,19 @@ exports[`Tooltip renders consistently 1`] = `
 .c0.tooltipped-no-delay:hover::before,
 .c0.tooltipped-no-delay:active::before,
 .c0.tooltipped-no-delay:focus::before,
+.c0.tooltipped-no-delay:focus-within::before,
 .c0.tooltipped-no-delay:hover::after,
 .c0.tooltipped-no-delay:active::after,
-.c0.tooltipped-no-delay:focus::after {
+.c0.tooltipped-no-delay:focus::after,
+.c0.tooltipped-no-delay:focus-within::after {
   -webkit-animation-delay: 0s;
   animation-delay: 0s;
 }
 
 .c0.tooltipped-multiline:hover::after,
 .c0.tooltipped-multiline:active::after,
-.c0.tooltipped-multiline:focus::after {
+.c0.tooltipped-multiline:focus::after,
+.c0.tooltipped-multiline:focus-within::after {
   display: table-cell;
 }