[Glitch] fix: Remove redundant focus stop within status

Port ed4788a342 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/content_warning.tsx

@@ -20,6 +20,6 @@ export const ContentWarning: React.FC<{
         key={`icon-${icon}`}
       />
     ))}
-    <p dangerouslySetInnerHTML={{ __html: text }} />
+    <span dangerouslySetInnerHTML={{ __html: text }} />
   </StatusBanner>
 );

app/javascript/flavours/glitch/components/filter_warning.tsx

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

app/javascript/flavours/glitch/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,17 +13,35 @@ export const StatusBanner: React.FC<{
   variant: BannerVariant;
   expanded?: boolean;
   onClick?: () => void;
-}> = ({ children, variant, expanded, onClick }) => (
+}> = ({ children, variant, expanded, onClick }) => {
-  <label
+  const descriptionId = useId();
+
+  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}
     >
-    {children}
+      <p id={descriptionId}>{children}</p>
 
-    <button className='link-button' onClick={onClick}>
+      <button
+        ref={buttonRef}
+        className='link-button'
+        onClick={onClick}
+        aria-describedby={descriptionId}
+      >
         {expanded ? (
           <FormattedMessage
             id='content_warning.hide'
@@ -38,5 +59,6 @@ export const StatusBanner: React.FC<{
           />
         )}
       </button>
-  </label>
+    </div>
   );
+};

app/javascript/flavours/glitch/components/status_content.jsx

@@ -349,7 +349,7 @@ class StatusContent extends PureComponent {
     if (this.props.onClick) {
       return (
         <>
-          <div className={classNames} ref={this.setRef} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} tabIndex={0} 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}
@@ -361,7 +361,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}