fix: Remove redundant focus stop within status (#35037)

app/javascript/mastodon/components/status_banner.tsx

@@ -1,3 +1,6 @@
+import type { MouseEventHandler } from 'react';
+import { useCallback, useRef, useId } from 'react';
+
 import { FormattedMessage } from 'react-intl';
 
 export enum BannerVariant {
@@ -10,33 +13,52 @@ export const StatusBanner: React.FC<{
   variant: BannerVariant;
   expanded?: boolean;
   onClick?: () => void;
-}> = ({ children, variant, expanded, onClick }) => (
-  <label
-    className={
-      variant === BannerVariant.Warning
-        ? 'content-warning'
-        : 'content-warning content-warning--filter'
-    }
-  >
-    {children}
+}> = ({ children, variant, expanded, onClick }) => {
+  const descriptionId = useId();
 
-    <button className='link-button' onClick={onClick}>
-      {expanded ? (
-        <FormattedMessage
-          id='content_warning.hide'
-          defaultMessage='Hide post'
-        />
-      ) : variant === BannerVariant.Warning ? (
-        <FormattedMessage
-          id='content_warning.show_more'
-          defaultMessage='Show more'
-        />
-      ) : (
-        <FormattedMessage
-          id='content_warning.show'
-          defaultMessage='Show anyway'
-        />
-      )}
-    </button>
-  </label>
-);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const forwardClick = useCallback<MouseEventHandler>((e) => {
+    if (buttonRef.current && e.target !== buttonRef.current) {
+      buttonRef.current.click();
+    }
+  }, []);
+
+  return (
+    // Element clicks are passed on to button
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <div
+      className={
+        variant === BannerVariant.Warning
+          ? 'content-warning'
+          : 'content-warning content-warning--filter'
+      }
+      onClick={forwardClick}
+    >
+      <p id={descriptionId}>{children}</p>
+
+      <button
+        ref={buttonRef}
+        className='link-button'
+        onClick={onClick}
+        aria-describedby={descriptionId}
+      >
+        {expanded ? (
+          <FormattedMessage
+            id='content_warning.hide'
+            defaultMessage='Hide post'
+          />
+        ) : variant === BannerVariant.Warning ? (
+          <FormattedMessage
+            id='content_warning.show_more'
+            defaultMessage='Show more'
+          />
+        ) : (
+          <FormattedMessage
+            id='content_warning.show'
+            defaultMessage='Show anyway'
+          />
+        )}
+      </button>
+    </div>
+  );
+};