Accessibility: Ensure focus order of post elements matches visual reading order (#39169)

app/javascript/mastodon/components/status/header.tsx

@@ -20,7 +20,8 @@ export interface StatusHeaderProps {
   status: Status;
   account?: Account;
   avatarSize?: number;
-  children?: ReactNode;
+  contentBeforeDate?: ReactNode;
+  contentAfterDate?: ReactNode;
   wrapperProps?: HTMLAttributes<HTMLDivElement>;
   displayNameProps?: DisplayNameProps;
   onHeaderClick?: MouseEventHandler<HTMLDivElement>;
@@ -33,10 +34,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;
@@ -51,6 +53,14 @@ export const StatusHeader: FC<StatusHeaderProps> = ({
       className={classNames('status__info', className)}
       /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
     >
+      <StatusDisplayName
+        statusAccount={statusAccount}
+        friendAccount={account}
+        avatarSize={avatarSize}
+      />
+
+      {contentBeforeDate}
+
       <Link
         to={`/@${statusAccount?.acct}/${status.get('id') as string}`}
         className='status__relative-time'
@@ -60,13 +70,7 @@ export const StatusHeader: FC<StatusHeaderProps> = ({
         {editedAt && <StatusEditedAt editedAt={editedAt} />}
       </Link>
 
-      <StatusDisplayName
+      {contentAfterDate}
-        statusAccount={statusAccount}
-        friendAccount={account}
-        avatarSize={avatarSize}
-      />
-
-      {children}
     </div>
   );
 };

app/javascript/mastodon/components/status_quoted.tsx

@@ -225,17 +225,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/mastodon/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/mastodon/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/styles/mastodon/components.scss

@@ -1613,7 +1613,6 @@ body > [data-popper-placement] {
   font-size: 15px;
   line-height: 22px;
   height: 40px;
-  order: 2;
   flex: 0 0 auto;
   color: var(--color-text-secondary);
 }
@@ -1666,7 +1665,6 @@ body > [data-popper-placement] {
 
 .status__quote-cancel {
   align-self: self-start;
-  order: 5;
 }
 
 .status__info {