[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
+            <StatusIcons
-            status={status}
+              status={status}
-            mediaIcons={mediaIcons}
+              mediaIcons={mediaIcons}
-            settings={settings.get('status_icons')}
+              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,17 +226,20 @@ export const QuotedStatus: React.FC<QuotedStatusProps> = ({
   const intl = useIntl();
   const headerRenderFn: StatusHeaderRenderFn = useCallback(
     (props) => (
-      <StatusHeader {...props}>
+      <StatusHeader
-        {onQuoteCancel && (
+        {...props}
-          <IconButton
+        contentAfterDate={
-            onClick={onQuoteCancel}
+          onQuoteCancel && (
-            className='status__quote-cancel'
+            <IconButton
-            title={intl.formatMessage(quoteCancelMessage)}
+              onClick={onQuoteCancel}
-            icon='cancel-fill'
+              className='status__quote-cancel'
-            iconComponent={CancelFillIcon}
+              title={intl.formatMessage(quoteCancelMessage)}
-          />
+              icon='cancel-fill'
-        )}
+              iconComponent={CancelFillIcon}
-      </StatusHeader>
+            />
+          )
+        }
+      />
     ),
     [intl, onQuoteCancel],
   );

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

@@ -22,18 +22,22 @@ export const renderPinnedStatusHeader: StatusHeaderRenderFn = ({
     return <StatusHeader {...args} />;
   }
   return (
-    <StatusHeader {...args} className={classes.pinnedStatusHeader}>
+    <StatusHeader
-      <Badge
+      {...args}
-        className={classes.pinnedBadge}
+      className={classes.pinnedStatusHeader}
-        icon={<Icon id='pinned' icon={IconPinned} />}
+      contentBeforeDate={
-        label={
+        <Badge
-          <FormattedMessage
+          className={classes.pinnedBadge}
-            id='account.timeline.pinned'
+          icon={<Icon id='pinned' icon={IconPinned} />}
-            defaultMessage='Pinned'
+          label={
-          />
+            <FormattedMessage
-        }
+              id='account.timeline.pinned'
-      />
+              defaultMessage='Pinned'
-    </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 {