Improve link a11y when not revealed

app/javascript/mastodon/features/status/components/card.tsx

@@ -1,6 +1,6 @@
 import punycode from 'node:punycode';
 
-import { useCallback, useState } from 'react';
+import { useCallback, useId, useState } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -105,6 +105,8 @@ const Card: React.FC<CardProps> = ({ card, sensitive }) => {
     setRevealed(true);
   }, []);
 
+  const spoilerButtonId = useId();
+
   if (card === null) {
     return null;
   }
@@ -193,7 +195,13 @@ const Card: React.FC<CardProps> = ({ card, sensitive }) => {
     />
   );
 
-  let spoilerButton = (
+  const spoilerButton = (
+    <div
+      className={classNames('spoiler-button', {
+        'spoiler-button--minified': revealed,
+      })}
+      id={spoilerButtonId}
+    >
       <button
         type='button'
         onClick={handleReveal}
@@ -212,15 +220,6 @@ const Card: React.FC<CardProps> = ({ card, sensitive }) => {
           </span>
         </span>
       </button>
-  );
-
-  spoilerButton = (
-    <div
-      className={classNames('spoiler-button', {
-        'spoiler-button--minified': revealed,
-      })}
-    >
-      {spoilerButton}
     </div>
   );
 
@@ -261,13 +260,15 @@ const Card: React.FC<CardProps> = ({ card, sensitive }) => {
     }
 
     return (
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+      <div className={classNames('status-card', { expanded: largeImage })}>
-      <div
-        className={classNames('status-card', { expanded: largeImage })}
-        onClick={revealed ? undefined : handleReveal}
-      >
         {embed}
-        <a href={card.get('url')} target='_blank' rel='noopener'>
+        <a
+          href={card.get('url')}
+          target='_blank'
+          rel='noopener'
+          onClick={revealed ? undefined : handleReveal}
+          aria-describedby={revealed ? undefined : spoilerButtonId}
+        >
           {description}
         </a>
       </div>