From 1c3f8ba8ecbd5d75b10a5c311f9fe5b55c6caf27 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Wed, 24 Jan 2024 04:38:03 -0800
Subject: [PATCH] Accessibility: improve social links (was 2 tabIndexes), #358

---
 .../layout/optima/components/BringTheLove.tsx | 21 ++++++++++---------
 .../optima/components/DesktopNavIcon.tsx      |  2 +-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/common/layout/optima/components/BringTheLove.tsx b/src/common/layout/optima/components/BringTheLove.tsx
index cf3faae1ac..bd618c94a2 100644
--- a/src/common/layout/optima/components/BringTheLove.tsx
+++ b/src/common/layout/optima/components/BringTheLove.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import type { SxProps } from '@mui/joy/styles/types';
-import { Box, Button, Tooltip } from '@mui/joy';
+import { Button, Tooltip } from '@mui/joy';
 
 import { Link } from '~/common/components/Link';
 import { cssRainbowColorKeyframes } from '~/common/app.theme';
@@ -26,20 +26,21 @@ export function BringTheLove(props: { text: string, link: string, asIcon?: boole
   return (
     <Tooltip followCursor title={props.text}>
       {props.asIcon ? (
-        <Box component='a' href={props.link} target='_blank' sx={{
-          textDecoration: 'none',
-          '&:hover': { textDecoration: 'none' },
-        }}>
-          <DesktopNavIcon variant='solid' className={navItemClasses.typeLinkOrModal} onClick={() => setLoved(true)} sx={{
+        <DesktopNavIcon
+          variant='solid'
+          className={navItemClasses.typeLinkOrModal}
+          component={Link} href={props.link} target='_blank'
+          onClick={() => setLoved(true)}
+          sx={{
             background: 'transparent',
             // color: 'text.tertiary',
             '&:hover': {
               animation: `${cssRainbowColorKeyframes} 5s linear infinite`,
             },
-          }}>
-            {icon}
-          </DesktopNavIcon>
-        </Box>
+          }}
+        >
+          {icon}
+        </DesktopNavIcon>
       ) : (
         <Button
           onClick={() => setLoved(true)}
diff --git a/src/common/layout/optima/components/DesktopNavIcon.tsx b/src/common/layout/optima/components/DesktopNavIcon.tsx
index 5d6e1f0a9e..0547f6eea3 100644
--- a/src/common/layout/optima/components/DesktopNavIcon.tsx
+++ b/src/common/layout/optima/components/DesktopNavIcon.tsx
@@ -83,4 +83,4 @@ export const DesktopNavIcon = styled(IconButton)(({ theme }) => ({
     transform: 'scale(1.4)',
   },
 
-}));
\ No newline at end of file
+})) as typeof IconButton;
\ No newline at end of file