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}