From 08dc44263d0ad9f17963d6fd0573012ab240ac08 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Tue, 26 May 2026 19:42:49 +0200
Subject: [PATCH] [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>
---
 .../flavours/glitch/components/status.jsx     | 15 +++++-----
 .../glitch/components/status/header.tsx       |  9 ++++--
 .../glitch/components/status_quoted.tsx       | 25 +++++++++--------
 .../components/pinned_statuses.tsx            | 28 +++++++++++--------
 .../account_timeline/styles.module.scss       |  3 ++
 .../glitch/styles/mastodon/components.scss    |  1 -
 6 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx
index f7e24b3bfc..45344e6638 100644
--- a/app/javascript/flavours/glitch/components/status.jsx
+++ b/app/javascript/flavours/glitch/components/status.jsx
@@ -713,13 +713,14 @@ class Status extends ImmutablePureComponent {
           account={account}
           avatarSize={avatarSize}
           onHeaderClick={this.handleHeaderClick}
-        >
-          <StatusIcons
-            status={status}
-            mediaIcons={mediaIcons}
-            settings={settings.get('status_icons')}
-          />
-        </StatusHeader>
+          contentBeforeDate={
+            <StatusIcons
+              status={status}
+              mediaIcons={mediaIcons}
+              settings={settings.get('status_icons')}
+            />
+          }
+        />
       );
 
     return (
diff --git a/app/javascript/flavours/glitch/components/status/header.tsx b/app/javascript/flavours/glitch/components/status/header.tsx
index 8b6566cd37..8d1369ff56 100644
--- a/app/javascript/flavours/glitch/components/status/header.tsx
+++ b/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>
   );
 };
diff --git a/app/javascript/flavours/glitch/components/status_quoted.tsx b/app/javascript/flavours/glitch/components/status_quoted.tsx
index e53c99f978..a174340457 100644
--- a/app/javascript/flavours/glitch/components/status_quoted.tsx
+++ b/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}>
-        {onQuoteCancel && (
-          <IconButton
-            onClick={onQuoteCancel}
-            className='status__quote-cancel'
-            title={intl.formatMessage(quoteCancelMessage)}
-            icon='cancel-fill'
-            iconComponent={CancelFillIcon}
-          />
-        )}
-      </StatusHeader>
+      <StatusHeader
+        {...props}
+        contentAfterDate={
+          onQuoteCancel && (
+            <IconButton
+              onClick={onQuoteCancel}
+              className='status__quote-cancel'
+              title={intl.formatMessage(quoteCancelMessage)}
+              icon='cancel-fill'
+              iconComponent={CancelFillIcon}
+            />
+          )
+        }
+      />
     ),
     [intl, onQuoteCancel],
   );
diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/pinned_statuses.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/pinned_statuses.tsx
index 06192dba06..b5406d8bc0 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/pinned_statuses.tsx
+++ b/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}>
-      <Badge
-        className={classes.pinnedBadge}
-        icon={<Icon id='pinned' icon={IconPinned} />}
-        label={
-          <FormattedMessage
-            id='account.timeline.pinned'
-            defaultMessage='Pinned'
-          />
-        }
-      />
-    </StatusHeader>
+    <StatusHeader
+      {...args}
+      className={classes.pinnedStatusHeader}
+      contentBeforeDate={
+        <Badge
+          className={classes.pinnedBadge}
+          icon={<Icon id='pinned' icon={IconPinned} />}
+          label={
+            <FormattedMessage
+              id='account.timeline.pinned'
+              defaultMessage='Pinned'
+            />
+          }
+        />
+      }
+    />
   );
 };
 
diff --git a/app/javascript/flavours/glitch/features/account_timeline/styles.module.scss b/app/javascript/flavours/glitch/features/account_timeline/styles.module.scss
index cd5cef3f29..9773861d22 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/styles.module.scss
+++ b/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;
 }
diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss
index b6fde830a1..b89fc2970d 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/components.scss
+++ b/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 {