pl-fe: this might improve a11y but idk tbh

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/parsed-content.tsx

@@ -265,16 +265,16 @@ function parseContent({
             const mention = mentions.find(({ url }) => domNode.attribs.href === url);
             if (mention) {
               return (
-                <HoverAccountWrapper accountId={mention.id} element='span'>
-                  <Link
-                    to={`/@${mention.acct}`}
-                    className='text-primary-600 hover:underline dark:text-accent-blue'
-                    dir='ltr'
-                    onClick={(e) => e.stopPropagation()}
-                  >
+                <Link
+                  to={`/@${mention.acct}`}
+                  className='text-primary-600 hover:underline dark:text-accent-blue'
+                  dir='ltr'
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <HoverAccountWrapper accountId={mention.id} element='span'>
                     @{mention.username}
-                  </Link>
-                </HoverAccountWrapper>
+                  </HoverAccountWrapper>
+                </Link>
               );
             }
           } else if (domNode.attribs['data-user']) {

packages/pl-fe/src/components/parsed-mfm.tsx

@@ -410,16 +410,16 @@ const ParsedMfm: React.FC<IParsedMfm> = React.memo(({ text, emojis, mentions, sp
           if (mention) {
             return (
               <bdi>
-                <HoverAccountWrapper accountId={mention.id} element='span'>
-                  <Link
-                    to={`/@${mention.acct}`}
-                    className='text-primary-600 hover:underline dark:text-accent-blue'
-                    dir='ltr'
-                    onClick={(e) => e.stopPropagation()}
-                  >
+                <Link
+                  to={`/@${mention.acct}`}
+                  className='text-primary-600 hover:underline dark:text-accent-blue'
+                  dir='ltr'
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <HoverAccountWrapper accountId={mention.id} element='span'>
                     @{mention.username}
-                  </Link>
-                </HoverAccountWrapper>
+                  </HoverAccountWrapper>
+                </Link>
               </bdi>
             );
           }

packages/pl-fe/src/components/status-mention.tsx

@@ -20,16 +20,16 @@ const StatusMention: React.FC<IStatusMention> = ({ accountId, fallback }) => {
   );
 
   return (
-    <HoverAccountWrapper accountId={accountId} element='span'>
-      <Link
-        to={`/@${account.acct}`}
-        className='text-primary-600 hover:underline dark:text-accent-blue'
-        dir='ltr'
-        onClick={(e) => e.stopPropagation()}
-      >
+    <Link
+      to={`/@${account.acct}`}
+      className='text-primary-600 hover:underline dark:text-accent-blue'
+      dir='ltr'
+      onClick={(e) => e.stopPropagation()}
+    >
+      <HoverAccountWrapper accountId={accountId} element='span'>
         @{account.acct}
-      </Link>
-    </HoverAccountWrapper>
+      </HoverAccountWrapper>
+    </Link>
   );
 };
 

packages/pl-fe/src/features/admin/components/report.tsx

@@ -84,16 +84,16 @@ const Report: React.FC<IReport> = ({ id }) => {
 
   return (
     <HStack space={3} className='p-3' key={report.id}>
-      <HoverAccountWrapper accountId={targetAccount.id} element='span'>
-        <Link to={`/@${acct}`} title={acct}>
+      <Link to={`/@${acct}`} title={acct}>
+        <HoverAccountWrapper accountId={targetAccount.id} element='span'>
           <Avatar
             src={targetAccount.avatar}
             alt={targetAccount.avatar_description}
             size={32}
             isCat={targetAccount.is_cat}
           />
-        </Link>
-      </HoverAccountWrapper>
+        </HoverAccountWrapper>
+      </Link>
 
       <Stack space={3} className='overflow-hidden' grow>
         <Text tag='h4' weight='bold'>
@@ -101,9 +101,11 @@ const Report: React.FC<IReport> = ({ id }) => {
             id='admin.reports.report_title'
             defaultMessage='Report on {acct}'
             values={{ acct: (
-              <HoverAccountWrapper accountId={targetAccount.id} element='span'>
-                <Link to={`/@${acct}`} title={acct}>@{acct}</Link>
-              </HoverAccountWrapper>
+              <Link to={`/@${acct}`} title={acct}>
+                <HoverAccountWrapper accountId={targetAccount.id} element='span'>
+                  @{acct}
+                </HoverAccountWrapper>
+              </Link>
             ) }}
           />
         </Text>
@@ -136,15 +138,15 @@ const Report: React.FC<IReport> = ({ id }) => {
             <HStack space={1}>
               <Text theme='muted' tag='span'>&mdash;</Text>
 
-              <HoverAccountWrapper accountId={account.id} element='span'>
-                <Link
-                  to={`/@${reporterAcct}`}
-                  title={reporterAcct}
-                  className='text-primary-600 hover:underline dark:text-accent-blue'
-                >
+              <Link
+                to={`/@${reporterAcct}`}
+                title={reporterAcct}
+                className='text-primary-600 hover:underline dark:text-accent-blue'
+              >
+                <HoverAccountWrapper accountId={account.id} element='span'>
                   @{reporterAcct}
-                </Link>
-              </HoverAccountWrapper>
+                </HoverAccountWrapper>
+              </Link>
             </HStack>
           )}
         </Stack>

packages/pl-fe/src/features/chats/components/shoutbox-message-list.tsx

@@ -41,15 +41,15 @@ const ShoutboxMessage: React.FC<IShoutboxMessage> = ({ message, isMyMessage }) =
         })}
       >
         {!isMyMessage && (
-          <HoverAccountWrapper accountId={account.id} element='span'>
-            <Link className='mb-0.5' to={`/@${account.acct}`} title={account.acct}>
+          <Link className='mb-0.5' to={`/@${account.acct}`} title={account.acct}>
+            <HoverAccountWrapper accountId={account.id} element='span'>
               <Avatar
                 src={account.avatar}
                 alt={account.avatar_description}
                 size={32}
               />
-            </Link>
-          </HoverAccountWrapper>
+            </HoverAccountWrapper>
+          </Link>
         )}
 
         <Stack

packages/pl-fe/src/features/notifications/components/notification.tsx

@@ -37,15 +37,15 @@ const notificationForScreenReader = (intl: IntlShape, message: string, timestamp
 };
 
 const buildLink = (account: Pick<Account, 'acct' | 'display_name' | 'emojis' | 'id'>): JSX.Element => (
-  <HoverAccountWrapper key={account.acct} element='bdi' accountId={account.id}>
-    <Link
-      className='font-bold text-gray-800 hover:underline dark:text-gray-200'
-      title={account.acct}
-      to={`/@${account.acct}`}
-    >
+  <Link
+    className='font-bold text-gray-800 hover:underline dark:text-gray-200'
+    title={account.acct}
+    to={`/@${account.acct}`}
+  >
+    <HoverAccountWrapper key={account.acct} element='bdi' accountId={account.id}>
       <Emojify text={account.display_name} emojis={account.emojis} />
-    </Link>
-  </HoverAccountWrapper>
+    </HoverAccountWrapper>
+  </Link>
 );
 
 const icons: Partial<Record<NotificationType | 'reply', string>> = {

packages/pl-fe/src/features/ui/components/profile-familiar-followers.tsx

@@ -37,8 +37,8 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
   }
 
   const accounts: Array<React.ReactNode> = familiarFollowers.map(account => !!account && (
-    <HoverAccountWrapper accountId={account.id} key={account.id} element='span'>
-      <Link className='mention inline-block' to={`/@${account.acct}`}>
+    <Link className='mention inline-block' to={`/@${account.acct}`}>
+      <HoverAccountWrapper accountId={account.id} key={account.id} element='span'>
         <HStack space={1} alignItems='center' grow>
           <Text size='sm' theme='primary' truncate>
             <Emojify text={account.display_name} emojis={account.emojis} />
@@ -46,8 +46,8 @@ const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account
 
           {account.verified && <VerificationBadge />}
         </HStack>
-      </Link>
-    </HoverAccountWrapper>
+      </HoverAccountWrapper>
+    </Link>
   )).filter(Boolean);
 
   if (familiarFollowerIds.length > 2) {

packages/pl-fe/src/pages/account-lists/directory.tsx

@@ -68,8 +68,8 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
           className='h-32 w-full rounded-t-lg object-cover'
         />
 
-        <HoverAccountWrapper key={account.id} accountId={account.id} element='span'>
-          <Link to={`/@${account.acct}`} title={account.acct}>
+        <Link to={`/@${account.acct}`} title={account.acct}>
+          <HoverAccountWrapper key={account.id} accountId={account.id} element='span'>
             <Avatar
               src={account.avatar}
               alt={account.avatar_description}
@@ -77,8 +77,8 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
               size={64}
               isCat={account.is_cat}
             />
-          </Link>
-        </HoverAccountWrapper>
+          </HoverAccountWrapper>
+        </Link>
       </div>
 
       <Stack space={4} className='p-3 pt-10'>