Better handling of focus outlines

packages/web/components/elements/Button.tsx

@@ -32,7 +32,6 @@ export const Button = styled('button', {
           bg: '$omnivoreCtaYellow',
         },
         '&:focus': {
-          outline: 'none !important',
           border: '1px solid $omnivoreCtaYellow',
         },
       },

packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx

@@ -96,6 +96,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         <a
           href={`${props.viewer.profile.username}/${props.item.slug}`}
           style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
+          tabIndex={-1}
         >
           <HStack
             css={{

packages/web/components/patterns/LibraryCards/LibraryListCard.tsx

@@ -66,6 +66,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
         <a
           href={`${props.viewer.profile.username}/${props.item.slug}`}
           style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
+          tabIndex={-1}
         >
           <HStack css={MetaStyle} distribution="start">
             <LibraryItemMetadata item={props.item} showProgress={true} />

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -932,11 +932,16 @@ function LibraryItems(props: LibraryItemsProps): JSX.Element {
           key={linkedItem.node.id}
           css={{
             width: '100%',
+            '&:focus-visible': {
+              outline: 'none',
+            },
             '&> div': {
               bg: '$thBackground3',
             },
             '&:focus': {
+              outline: 'none',
               '> div': {
+                outline: 'none',
                 bg: '$thBackgroundActive',
               },
             },

packages/web/components/tokens/stitches.config.ts

@@ -336,14 +336,6 @@ export const globalStyles = globalCss({
     colorScheme: 'var(--colorScheme-colorScheme)',
     backgroundColor: '$thBackground',
   },
-  '*': {
-    '&:focus': {
-      outline: 'none',
-    },
-    '&:focus-visible': {
-      outline: 'none',
-    },
-  },
   // browser prefers this loaded here vs in the article styling css
   '.article-inner-css': {
     '::selection': {