Merge remote-tracking branch 'parent/main' into upstream-20240128

app/javascript/mastodon/components/alt_text_badge.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef, useId } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -8,12 +8,15 @@ import type {
   UsePopperOptions,
 } from 'react-overlays/esm/usePopper';
 
+import { useSelectableClick } from '@/hooks/useSelectableClick';
+
 const offset = [0, 4] as OffsetValue;
 const popperConfig = { strategy: 'fixed' } as UsePopperOptions;
 
 export const AltTextBadge: React.FC<{
   description: string;
 }> = ({ description }) => {
+  const accessibilityId = useId();
   const anchorRef = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState(false);
 
@@ -25,12 +28,16 @@ export const AltTextBadge: React.FC<{
     setOpen(false);
   }, [setOpen]);
 
+  const [handleMouseDown, handleMouseUp] = useSelectableClick(handleClose);
+
   return (
     <>
       <button
         ref={anchorRef}
         className='media-gallery__alt__label'
         onClick={handleClick}
+        aria-expanded={open}
+        aria-controls={accessibilityId}
       >
         ALT
       </button>
@@ -47,9 +54,12 @@ export const AltTextBadge: React.FC<{
       >
         {({ props }) => (
           <div {...props} className='hover-card-controller'>
-            <div
+            <div // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
               className='media-gallery__alt__popover dropdown-animation'
-              role='tooltip'
+              role='region'
+              id={accessibilityId}
+              onMouseDown={handleMouseDown}
+              onMouseUp={handleMouseUp}
             >
               <h4>
                 <FormattedMessage

app/javascript/mastodon/components/load_gap.tsx

@@ -1,9 +1,10 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import { Icon } from 'mastodon/components/icon';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 
 const messages = defineMessages({
   load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
@@ -17,10 +18,12 @@ interface Props<T> {
 
 export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
   const intl = useIntl();
+  const [loading, setLoading] = useState(false);
 
   const handleClick = useCallback(() => {
+    setLoading(true);
     onClick(param);
-  }, [param, onClick]);
+  }, [setLoading, param, onClick]);
 
   return (
     <button
@@ -28,8 +31,13 @@ export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
       disabled={disabled}
       onClick={handleClick}
       aria-label={intl.formatMessage(messages.load_more)}
+      title={intl.formatMessage(messages.load_more)}
     >
-      <Icon id='ellipsis-h' icon={MoreHorizIcon} />
+      {loading ? (
+        <LoadingIndicator />
+      ) : (
+        <Icon id='ellipsis-h' icon={MoreHorizIcon} />
+      )}
     </button>
   );
 };

app/javascript/mastodon/components/status.jsx

@@ -342,7 +342,7 @@ class Status extends ImmutablePureComponent {
     const { onToggleHidden } = this.props;
     const status = this._properStatus();
 
-    if (status.get('matched_filters')) {
+    if (this.props.status.get('matched_filters')) {
       const expandedBecauseOfCW = !status.get('hidden') || status.get('spoiler_text').length === 0;
       const expandedBecauseOfFilter = this.state.showDespiteFilter;