fix(ui): Fix missing focus-visible selectors (#69108)

In 3b97429a2a we droppoed our focus-visible polyfill, but looks like we
missed a few places that the focus-visible class was being used

This fixes the focus on the page filters

<img alt="clipboard.png" width="408"
src="https://i.imgur.com/ml7BBv7.png" />

static/app/components/feedback/feedbackItem/feedbackShortId.tsx

@@ -29,7 +29,7 @@ const hideDropdown = css`
 
   &:hover button[aria-haspopup],
   button[aria-expanded='true'],
-  button[aria-haspopup].focus-visible {
+  button[aria-haspopup]:focus-visible {
     opacity: 1;
   }
 `;

static/app/components/forms/fields/datePickerField.tsx

@@ -90,7 +90,7 @@ const StyledInput = styled(Input)`
   ${p.theme.iconSizes.sm}
 )`};
 
-  &:focus:not(.focus-visible) {
+  &:focus:not(:focus-visible) {
     border-color: ${p => p.theme.border};
     box-shadow: inset ${p => p.theme.dropShadowMedium};
   }

static/app/components/interactionStateLayer.tsx

@@ -50,7 +50,7 @@ const InteractionStateLayer = styled(
         `
       : // If isHovered is undefined, then fallback to a default hover selector
         css`
-          *:hover:not(.focus-visible) > & {
+          *:hover:not(:focus-visible) > & {
             opacity: ${p.higherOpacity ? 0.085 : 0.06};
           }
         `}

static/app/components/organizations/pageFilterBar.tsx

@@ -37,7 +37,7 @@ const PageFilterBar = styled('div')<{condensed?: boolean}>`
     z-index: 0;
   }
 
-  & button[aria-haspopup].focus-visible {
+  & button[aria-haspopup]:focus-visible {
     border-color: ${p => p.theme.focusBorder};
     box-shadow: 0 0 0 1px ${p => p.theme.focusBorder};
     z-index: 1;

static/app/components/segmentedControl.tsx

@@ -311,7 +311,7 @@ const SegmentSelectionIndicator = styled(motion.div)<{priority: Priority}>`
       ? `
     background: ${p.theme.active};
     border-radius: ${p.theme.borderRadius};
-    input.focus-visible ~ & {
+    input:focus-visible ~ & {
       box-shadow: 0 0 0 3px ${p.theme.focus};
     }
 
@@ -328,7 +328,7 @@ const SegmentSelectionIndicator = styled(motion.div)<{priority: Priority}>`
     background: ${p.theme.backgroundElevated};
     border-radius: calc(${p.theme.borderRadius} - 1px);
     box-shadow: 0 0 2px rgba(43, 34, 51, 0.32);
-    input.focus-visible ~ & {
+    input:focus-visible ~ & {
       box-shadow: 0 0 0 2px ${p.theme.focusBorder};
     }
   `}

static/app/components/tabs/tab.tsx

@@ -194,7 +194,7 @@ const FocusLayer = styled('div')<{orientation: Orientation}>`
   z-index: 0;
   transition: box-shadow 0.1s ease-out;
 
-  li.focus-visible & {
+  li:focus-visible & {
     box-shadow:
       ${p => p.theme.focusBorder} 0 0 0 1px,
       inset ${p => p.theme.focusBorder} 0 0 0 1px;

static/app/views/issueDetails/shortIdBreadcrumb.tsx

@@ -122,7 +122,7 @@ const ShortIdCopyable = styled('div')`
 
   &:hover button[aria-haspopup],
   button[aria-expanded='true'],
-  button[aria-haspopup].focus-visible {
+  button[aria-haspopup]:focus-visible {
     opacity: 1;
   }
 `;