From dccb5e501dc27f95aba056927957215bbc96dd35 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Mon, 8 Jun 2026 12:16:33 +0200
Subject: [PATCH] [Glitch] Accessibility: Move column extra buttons out of h1
 column heading

Port bcafd7d0c7c929f5e90fa1f64c881632a145f8b8 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/column_header.tsx         | 17 +++++++----------
 .../glitch/styles/mastodon/components.scss      |  6 +++++-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/column_header.tsx b/app/javascript/flavours/glitch/components/column_header.tsx
index fda5c71b36..cdbf6ef9dd 100644
--- a/app/javascript/flavours/glitch/components/column_header.tsx
+++ b/app/javascript/flavours/glitch/components/column_header.tsx
@@ -152,7 +152,7 @@ export const ColumnHeader: React.FC<Props> = ({
     active,
   });
 
-  const buttonClassName = classNames('column-header', {
+  const headingClassName = classNames('column-header', {
     active,
   });
 
@@ -276,16 +276,14 @@ export const ColumnHeader: React.FC<Props> = ({
     </>
   );
 
-  const HeadingElement = hasTitle ? 'h1' : 'div';
-
   const component = (
     <div className={wrapperClassName}>
-      <HeadingElement className={buttonClassName}>
+      <div className={headingClassName}>
         {hasTitle && (
-          <>
+          <h1 className='column-header__title-wrapper'>
             {backButton}
 
-            {onClick && (
+            {onClick ? (
               <button
                 onClick={handleTitleClick}
                 className='column-header__title'
@@ -294,8 +292,7 @@ export const ColumnHeader: React.FC<Props> = ({
               >
                 {titleContents}
               </button>
-            )}
-            {!onClick && (
+            ) : (
               <span
                 className='column-header__title'
                 tabIndex={-1}
@@ -304,7 +301,7 @@ export const ColumnHeader: React.FC<Props> = ({
                 {titleContents}
               </span>
             )}
-          </>
+          </h1>
         )}
 
         {!hasTitle && backButton}
@@ -313,7 +310,7 @@ export const ColumnHeader: React.FC<Props> = ({
           {extraButton}
           {collapseButton}
         </div>
-      </HeadingElement>
+      </div>
 
       <div
         className={collapsibleClassName}
diff --git a/app/javascript/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss
index 199e148749..984ac33ffe 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/components.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss
@@ -4727,9 +4727,14 @@ a.status-card {
   z-index: 2;
   outline: 0;
 
+  &__title-wrapper {
+    flex-grow: 1;
+  }
+
   &__title {
     display: flex;
     align-items: center;
+    width: 100%;
     gap: 5px;
     margin: 0;
     border: 0;
@@ -4742,7 +4747,6 @@ a.status-card {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    flex: 1;
 
     &:focus-visible {
       outline: var(--outline-focus-default);