Accessibility: Move column extra buttons out of h1 column heading (#39305)

app/javascript/mastodon/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}

app/javascript/styles/mastodon/components.scss

@@ -4638,9 +4638,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;
@@ -4653,7 +4658,6 @@ a.status-card {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    flex: 1;
 
     &:focus-visible {
       outline: var(--outline-focus-default);