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

app/javascript/mastodon/components/content_warning.tsx

@@ -10,6 +10,6 @@ export const ContentWarning: React.FC<{
     onClick={onClick}
     variant={BannerVariant.Warning}
   >
-    <p dangerouslySetInnerHTML={{ __html: text }} />
+    <span dangerouslySetInnerHTML={{ __html: text }} />
   </StatusBanner>
 );

app/javascript/mastodon/components/filter_warning.tsx

@@ -12,15 +12,13 @@ export const FilterWarning: React.FC<{
     onClick={onClick}
     variant={BannerVariant.Filter}
   >
-    <p>
-      <FormattedMessage
-        id='filter_warning.matches_filter'
-        defaultMessage='Matches filter “<span>{title}</span>”'
-        values={{
-          title,
-          span: (chunks) => <span className='filter-name'>{chunks}</span>,
-        }}
-      />
-    </p>
+    <FormattedMessage
+      id='filter_warning.matches_filter'
+      defaultMessage='Matches filter “<span>{title}</span>”'
+      values={{
+        title,
+        span: (chunks) => <span className='filter-name'>{chunks}</span>,
+      }}
+    />
   </StatusBanner>
 );

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

app/javascript/mastodon/components/status_content.jsx

@@ -252,7 +252,7 @@ class StatusContent extends PureComponent {
     if (this.props.onClick) {
       return (
         <>
-          <div className={classNames} ref={this.setRef} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+          <div className={classNames} ref={this.setRef} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
             <div className='status__content__text status__content__text--visible translate' lang={language} dangerouslySetInnerHTML={content} />
 
             {poll}
@@ -264,7 +264,7 @@ class StatusContent extends PureComponent {
       );
     } else {
       return (
-        <div className={classNames} ref={this.setRef} tabIndex={0} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+        <div className={classNames} ref={this.setRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
           <div className='status__content__text status__content__text--visible translate' lang={language} dangerouslySetInnerHTML={content} />
 
           {poll}