Accessibility: improve social links (was 2 tabIndexes), #358

Author: enricoros

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)}

src/common/layout/optima/components/DesktopNavIcon.tsx

@@ -83,4 +83,4 @@ export const DesktopNavIcon = styled(IconButton)(({ theme }) => ({
     transform: 'scale(1.4)',
   },
 
-}));
+})) as typeof IconButton;