[Glitch] Accessibility: Ensure focus order of post elements matches visual reading order

Port d20d04922672ed016029c40ed64798f341ebca91 to glitch-soc

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

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

@@ -713,13 +713,14 @@ class Status extends ImmutablePureComponent {
           account={account}
           avatarSize={avatarSize}
           onHeaderClick={this.handleHeaderClick}
-        >
+          contentBeforeDate={
             <StatusIcons
               status={status}
               mediaIcons={mediaIcons}
               settings={settings.get('status_icons')}
             />
-        </StatusHeader>
+          }
+        />
       );
 
     return (

app/javascript/flavours/glitch/components/status/header.tsx

@@ -18,7 +18,8 @@ export interface StatusHeaderProps {
   status: Status;
   account?: Account;
   avatarSize?: number;
-  children?: ReactNode;
+  contentBeforeDate?: ReactNode;
+  contentAfterDate?: ReactNode;
   wrapperProps?: HTMLAttributes<HTMLDivElement>;
   displayNameProps?: DisplayNameProps;
   onHeaderClick?: MouseEventHandler<HTMLDivElement>;
@@ -31,10 +32,11 @@ export type StatusHeaderRenderFn = (args: StatusHeaderProps) => ReactNode;
 export const StatusHeader: FC<StatusHeaderProps> = ({
   status,
   account,
-  children,
   className,
   avatarSize = 48,
   wrapperProps,
+  contentBeforeDate,
+  contentAfterDate,
   onHeaderClick,
 }) => {
   const statusAccount = status.get('account') as Account | undefined;
@@ -54,7 +56,8 @@ export const StatusHeader: FC<StatusHeaderProps> = ({
         avatarSize={avatarSize}
       />
 
-      {children}
+      {contentBeforeDate}
+      {contentAfterDate}
     </header>
   );
 };

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

@@ -226,8 +226,10 @@ export const QuotedStatus: React.FC<QuotedStatusProps> = ({
   const intl = useIntl();
   const headerRenderFn: StatusHeaderRenderFn = useCallback(
     (props) => (
-      <StatusHeader {...props}>
+      <StatusHeader
-        {onQuoteCancel && (
+        {...props}
+        contentAfterDate={
+          onQuoteCancel && (
             <IconButton
               onClick={onQuoteCancel}
               className='status__quote-cancel'
@@ -235,8 +237,9 @@ export const QuotedStatus: React.FC<QuotedStatusProps> = ({
               icon='cancel-fill'
               iconComponent={CancelFillIcon}
             />
-        )}
+          )
-      </StatusHeader>
+        }
+      />
     ),
     [intl, onQuoteCancel],
   );

app/javascript/flavours/glitch/features/account_timeline/components/pinned_statuses.tsx

@@ -22,7 +22,10 @@ export const renderPinnedStatusHeader: StatusHeaderRenderFn = ({
     return <StatusHeader {...args} />;
   }
   return (
-    <StatusHeader {...args} className={classes.pinnedStatusHeader}>
+    <StatusHeader
+      {...args}
+      className={classes.pinnedStatusHeader}
+      contentBeforeDate={
         <Badge
           className={classes.pinnedBadge}
           icon={<Icon id='pinned' icon={IconPinned} />}
@@ -33,7 +36,8 @@ export const renderPinnedStatusHeader: StatusHeaderRenderFn = ({
             />
           }
         />
-    </StatusHeader>
+      }
+    />
   );
 };
 

app/javascript/flavours/glitch/features/account_timeline/styles.module.scss

@@ -126,4 +126,7 @@
 
 .pinnedBadge {
   justify-self: end;
+
+  // Allow "click to open post" event to pass through
+  pointer-events: none;
 }

app/javascript/flavours/glitch/styles/mastodon/components.scss

@@ -1716,7 +1716,6 @@ body > [data-popper-placement] {
 
 .status__quote-cancel {
   align-self: self-start;
-  order: 5;
 }
 
 .status__info {