Show outline only on focus-within (#18)

src/components/ComboboxMenu.tsx

@@ -82,7 +82,9 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
                 <Styled.Item
                   // value={item.value} // search by both value and textContent
                   // value={[group.groupLabel, item.label, item.tag].filter(Boolean).join('|')} // exclude item.value from searchable terms (not guaranteed to be unique)
-                  value={[group.groupLabel, item.value, item.description, item.label, item.tag].filter(Boolean).join('|')}
+                  value={[group.groupLabel, item.value, item.description, item.label, item.tag]
+                    .filter(Boolean)
+                    .join('|')}
                   onSelect={() => {
                     if (item.subitems) {
                       // open submenu
@@ -116,7 +118,15 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
                       <Styled.Item
                         // value={subitem.value} // search by both value and textContent
                         // value={[group.groupLabel, item.label, subitem.label, subitem.tag].filter(Boolean).join('|')}
-                        value={[group.groupLabel, item.value, item.description, item.label, item.tag].filter(Boolean).join('|')}
+                        value={[
+                          group.groupLabel,
+                          item.value,
+                          item.description,
+                          item.label,
+                          item.tag,
+                        ]
+                          .filter(Boolean)
+                          .join('|')}
                         onSelect={() => {
                           subitem.onSelect?.(subitem.value);
                           onItemSelected?.();
@@ -168,7 +178,7 @@ Styled.Command = styled(Command)<{ $withStickyLayout?: boolean }>`
   background-color: var(--comboboxMenu-backgroundColor);
   border-radius: inherit;
 
-  input:focus {
+  input:focus-visible {
     outline: none;
   }
 
@@ -272,7 +282,7 @@ Styled.Item = styled(Command.Item)`
   align-items: center;
   gap: 0.5rem;
 
-  &[aria-disabled="true"] {
+  &[aria-disabled='true'] {
     opacity: 0.75;
     cursor: not-allowed;
   }

src/components/Dialog.tsx

@@ -90,10 +90,7 @@ export const Dialog = ({
   return (
     <Root modal={showOverlay} open={isOpen} onOpenChange={setIsOpen}>
       {slotTrigger && <Trigger asChild>{slotTrigger}</Trigger>}
-      <DialogPortal
-        withPortal={placement !== DialogPlacement.Inline}
-        container={portalContainer}
-      >
+      <DialogPortal withPortal={placement !== DialogPlacement.Inline} container={portalContainer}>
         {showOverlay && <Styled.Overlay />}
         <Styled.Container
           placement={placement}
@@ -425,7 +422,7 @@ Styled.Close = styled(Close)`
   }
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     color: var(--color-text-2);
   }
 

src/components/SearchSelectMenu.tsx

@@ -137,7 +137,7 @@ Styled.ComboboxMenu = styled(ComboboxMenu)`
 
   --stickyArea1-topHeight: var(--form-input-height);
 
-  input:focus {
+  input:focus-visible {
     outline: none;
   }
 

src/components/Table.tsx

@@ -743,7 +743,7 @@ Styled.Tr = styled.tr<{
       cursor: pointer;
 
       &:hover,
-      &:focus,
+      &:focus-visible,
       &:focus-within {
         --tableRow-currentBackgroundColor: var(--tableRow-hover-backgroundColor);
         filter: brightness(1.1);
@@ -753,7 +753,7 @@ Styled.Tr = styled.tr<{
   ${({ withFocusStickyRows }) =>
     withFocusStickyRows &&
     css`
-      &:focus,
+      &:focus-visible,
       &:focus-within {
         ${layoutMixins.sticky}
         z-index: 1;

src/components/Toast.tsx

@@ -118,8 +118,7 @@ const $Root = styled(Root)`
       align-items: end;
       transform-origin: left bottom;
 
-      animation:
-        ${keyframes`
+      animation: ${keyframes`
           from {
             /* scale: 0; */
             grid-template-rows: 0fr; // height transition
@@ -150,7 +149,7 @@ const $Root = styled(Root)`
     }
   }
 
-  &:focus {
+  &:focus-visible {
     outline: none;
   }
 
@@ -203,8 +202,8 @@ const $Container = styled.div`
   // Rules
   ${popoverMixins.popover}
   padding: 1rem;
-  box-shadow:
-    0 0 0 var(--border-width) var(--color-border), // border
+  box-shadow: 0 0 0 var(--border-width) var(--color-border),
+    // border
     0 0 0.5rem 0.1rem var(--color-layer-2); // shadow
 
   ${$Root}:focus:not([data-swipe='end']) & {

src/components/WithConfirmationPopover.tsx

@@ -91,7 +91,7 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.Content = styled(Content)`
   z-index: 1;
 
-  &:focus {
+  &:focus-visible {
     outline: none;
   }
 `;

src/index.css

@@ -54,7 +54,7 @@ button:disabled {
   cursor: pointer;
 }
 
-:focus {
+:focus-visible{
   outline: var(--color-accent) 1px solid;
   outline-offset: -1px;
   /* outline-offset: -2px; */

src/styles/popoverMixins.ts

@@ -214,7 +214,7 @@ export const popoverMixins = {
       /* &:hover, */
       /* :not(:has(* > [data-highlighted])) > &:hover, */
       &[data-radix-collection-item]:hover, // @radix-ui/react-navigation-menu
-      /* &:focus, */
+      /* &:focus-visible, */
       &[aria-selected="true"], // cmdk
       &[data-highlighted] // @radix-ui
       {

src/views/MarketsDropdown.tsx

@@ -304,7 +304,7 @@ Styled.Popover = styled(Popover)`
       }
     `} 0.2s;
   }
-  &:focus {
+  &:focus-visible {
     outline: none;
   }
 `;

src/views/tables/Orderbook.tsx

@@ -510,7 +510,7 @@ Styled.OrderbookTable = styled(OrderbookTradesTable)<StyleProps>`
       content: '';
     }
 
-    &:not(:active):is(:focus, :focus-within) {
+    &:not(:active):is(:focus-visible, :focus-within) {
       ${orderbookMixins.scrollSnapItem}
       z-index: 2;
 

src/views/tables/OrderbookTradesTable.tsx

@@ -72,8 +72,8 @@ export const OrderbookTradesTable = styled(Table)<{ histogramSide: 'left' | 'rig
   }
 
   tbody tr:hover,
-  tr:focus,
-  td:focus {
+  tr:focus-visible,
+  td:focus-visible {
     color: var(--color-text-2);
     background-color: var(--color-layer-3);
   }