From 3d2aa70b7b2b8589000b62702579b4811c755370 Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Wed, 18 Jun 2025 09:20:03 -0400
Subject: [PATCH] [MM-61626] Replace most uses of <header> with <div> where not
 needed (#31371)

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../secure_connections/controls.tsx           |  2 +-
 .../system_properties/controls.tsx            |  2 +-
 .../channel_notifications_modal.test.tsx.snap | 24 +++++++++----------
 .../__snapshots__/panel_header.test.tsx.snap  |  8 +++----
 .../components/drafts/panel/panel_header.tsx  |  4 ++--
 .../sidebar/sidebar_header/sidebar_header.tsx |  4 ++--
 .../__snapshots__/thread_item.test.tsx.snap   | 18 +++++++++-----
 .../thread_item/thread_item.tsx               |  4 ++--
 .../header/__snapshots__/header.test.tsx.snap |  4 ++--
 .../src/components/widgets/header/header.tsx  |  4 ++--
 .../modals/components/modal_header.tsx        |  4 ++--
 11 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/secure_connections/controls.tsx b/webapp/channels/src/components/admin_console/secure_connections/controls.tsx
index eade0b7511..7b17be3a9a 100644
--- a/webapp/channels/src/components/admin_console/secure_connections/controls.tsx
+++ b/webapp/channels/src/components/admin_console/secure_connections/controls.tsx
@@ -31,7 +31,7 @@ const FormFieldLabel = styled.label`
     }
 `;
 
-export const SectionHeader = styled.header.attrs({className: 'header'})<{$borderless?: boolean}>`
+export const SectionHeader = styled.div.attrs({className: 'header'})<{$borderless?: boolean}>`
     &&& {
         padding: 24px 32px;
         ${({$borderless}) => !$borderless && css`
diff --git a/webapp/channels/src/components/admin_console/system_properties/controls.tsx b/webapp/channels/src/components/admin_console/system_properties/controls.tsx
index 8687c7eecb..4d97b57695 100644
--- a/webapp/channels/src/components/admin_console/system_properties/controls.tsx
+++ b/webapp/channels/src/components/admin_console/system_properties/controls.tsx
@@ -11,7 +11,7 @@ export const SectionHeading = styled.h3`
     }
 `;
 
-export const SectionHeader = styled.header.attrs({className: 'header'})<{$borderless?: boolean}>`
+export const SectionHeader = styled.div.attrs({className: 'header'})<{$borderless?: boolean}>`
     &&& {
         padding: 24px 32px;
         ${({$borderless}) => !$borderless && css`
diff --git a/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap b/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
index 1c00dd3323..52be61daae 100644
--- a/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
@@ -50,7 +50,7 @@ Object {
                       class="modal-title"
                       id="genericModalLabel"
                     >
-                      <header
+                      <div
                         class="mm-modal-header"
                       >
                         <h2
@@ -69,7 +69,7 @@ Object {
                             channel_display_name
                           </span>
                         </h2>
-                      </header>
+                      </div>
                     </h1>
                   </div>
                 </div>
@@ -534,7 +534,7 @@ Object {
                       class="modal-title"
                       id="genericModalLabel"
                     >
-                      <header
+                      <div
                         class="mm-modal-header"
                       >
                         <h2
@@ -553,7 +553,7 @@ Object {
                             channel_display_name
                           </span>
                         </h2>
-                      </header>
+                      </div>
                     </h1>
                   </div>
                 </div>
@@ -1178,7 +1178,7 @@ Object {
                       class="modal-title"
                       id="genericModalLabel"
                     >
-                      <header
+                      <div
                         class="mm-modal-header"
                       >
                         <h2
@@ -1197,7 +1197,7 @@ Object {
                             channel_display_name
                           </span>
                         </h2>
-                      </header>
+                      </div>
                     </h1>
                   </div>
                 </div>
@@ -1541,7 +1541,7 @@ Object {
                       class="modal-title"
                       id="genericModalLabel"
                     >
-                      <header
+                      <div
                         class="mm-modal-header"
                       >
                         <h2
@@ -1560,7 +1560,7 @@ Object {
                             channel_display_name
                           </span>
                         </h2>
-                      </header>
+                      </div>
                     </h1>
                   </div>
                 </div>
@@ -2123,7 +2123,7 @@ Object {
                       class="modal-title"
                       id="genericModalLabel"
                     >
-                      <header
+                      <div
                         class="mm-modal-header"
                       >
                         <h2
@@ -2142,7 +2142,7 @@ Object {
                             channel_display_name
                           </span>
                         </h2>
-                      </header>
+                      </div>
                     </h1>
                   </div>
                 </div>
@@ -2705,7 +2705,7 @@ Object {
                       class="modal-title"
                       id="genericModalLabel"
                     >
-                      <header
+                      <div
                         class="mm-modal-header"
                       >
                         <h2
@@ -2724,7 +2724,7 @@ Object {
                             channel_display_name
                           </span>
                         </h2>
-                      </header>
+                      </div>
                     </h1>
                   </div>
                 </div>
diff --git a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_header.test.tsx.snap b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_header.test.tsx.snap
index 606e5b3bf1..1f87f40dd9 100644
--- a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_header.test.tsx.snap
+++ b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_header.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/drafts/panel/panel_header should match snapshot 1`] = `
-<header
+<div
   className="PanelHeader"
 >
   <div
@@ -52,11 +52,11 @@ exports[`components/drafts/panel/panel_header should match snapshot 1`] = `
       />
     </div>
   </div>
-</header>
+</div>
 `;
 
 exports[`components/drafts/panel/panel_header should show sync icon when draft is from server 1`] = `
-<header
+<div
   className="PanelHeader"
 >
   <div
@@ -123,5 +123,5 @@ exports[`components/drafts/panel/panel_header should show sync icon when draft i
       />
     </div>
   </div>
-</header>
+</div>
 `;
diff --git a/webapp/channels/src/components/drafts/panel/panel_header.tsx b/webapp/channels/src/components/drafts/panel/panel_header.tsx
index 0c8791234f..74970c7e47 100644
--- a/webapp/channels/src/components/drafts/panel/panel_header.tsx
+++ b/webapp/channels/src/components/drafts/panel/panel_header.tsx
@@ -49,7 +49,7 @@ function PanelHeader({
     const timestampDateObject = useMemo(() => new Date(timestamp), [timestamp]);
 
     return (
-        <header className='PanelHeader'>
+        <div className='PanelHeader'>
             <div className='PanelHeader__left'>{title}</div>
             <div className='PanelHeader__right'>
                 <div className='PanelHeader__actions'>
@@ -118,7 +118,7 @@ function PanelHeader({
                     )}
                 </div>
             </div>
-        </header>
+        </div>
     );
 }
 
diff --git a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
index f183e60a27..b9c61d3ecc 100644
--- a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
+++ b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx
@@ -32,7 +32,7 @@ const SidebarHeader = (props: Props) => {
     }
 
     return (
-        <header className='sidebarHeaderContainer'>
+        <div className='sidebarHeaderContainer'>
             <SidebarTeamMenu currentTeam={currentTeam}/>
             {(props.canCreateChannel || props.canJoinPublicChannel) && (
                 <SidebarBrowseOrAddChannelMenu
@@ -48,7 +48,7 @@ const SidebarHeader = (props: Props) => {
                     onInvitePeopleClick={props.invitePeopleModal}
                 />
             )}
-        </header>
+        </div>
     );
 };
 
diff --git a/webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap b/webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap
index 6f3390d35e..004e7f4143 100644
--- a/webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap
+++ b/webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap
@@ -12,7 +12,9 @@ exports[`components/threading/global_threads/thread_item should report total num
     role="link"
     tabIndex={0}
   >
-    <header>
+    <div
+      className="thread-item-header"
+    >
       <div
         className="ThreadItem__author"
       >
@@ -40,7 +42,7 @@ exports[`components/threading/global_threads/thread_item should report total num
         }
         useTime={false}
       />
-    </header>
+    </div>
     <div
       className="menu-anchor alt-visible"
     >
@@ -155,7 +157,9 @@ exports[`components/threading/global_threads/thread_item should report unread me
     role="link"
     tabIndex={0}
   >
-    <header>
+    <div
+      className="thread-item-header"
+    >
       <div
         className="indicator"
       >
@@ -192,7 +196,7 @@ exports[`components/threading/global_threads/thread_item should report unread me
         }
         useTime={false}
       />
-    </header>
+    </div>
     <div
       className="menu-anchor alt-visible"
     >
@@ -307,7 +311,9 @@ exports[`components/threading/global_threads/thread_item should report unread me
     role="link"
     tabIndex={0}
   >
-    <header>
+    <div
+      className="thread-item-header"
+    >
       <div
         className="indicator"
       >
@@ -342,7 +348,7 @@ exports[`components/threading/global_threads/thread_item should report unread me
         }
         useTime={false}
       />
-    </header>
+    </div>
     <div
       className="menu-anchor alt-visible"
     >
diff --git a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx
index 44d1d1ff28..9af3acbfbc 100644
--- a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx
+++ b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx
@@ -214,7 +214,7 @@ function ThreadItem({
                 onKeyDown={selectHandler}
                 ref={ref}
             >
-                <header>
+                <div className='thread-item-header'>
                     {Boolean(newMentions || newReplies) && (
                         <div className='indicator'>
                             {newMentions ? (
@@ -249,7 +249,7 @@ function ThreadItem({
                         className='alt-hidden'
                         value={lastReplyAt}
                     />
-                </header>
+                </div>
                 <div className='menu-anchor alt-visible'>
                     <ThreadMenu
                         threadId={threadId}
diff --git a/webapp/channels/src/components/widgets/header/__snapshots__/header.test.tsx.snap b/webapp/channels/src/components/widgets/header/__snapshots__/header.test.tsx.snap
index a4f588badc..4c9e656d71 100644
--- a/webapp/channels/src/components/widgets/header/__snapshots__/header.test.tsx.snap
+++ b/webapp/channels/src/components/widgets/header/__snapshots__/header.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/widgets/header should match basic snapshot 1`] = `
-<header
+<div
   className="Header"
 >
   <div
@@ -20,5 +20,5 @@ exports[`components/widgets/header should match basic snapshot 1`] = `
   <div>
     addons
   </div>
-</header>
+</div>
 `;
diff --git a/webapp/channels/src/components/widgets/header/header.tsx b/webapp/channels/src/components/widgets/header/header.tsx
index 30799347e2..81c6ff08f1 100644
--- a/webapp/channels/src/components/widgets/header/header.tsx
+++ b/webapp/channels/src/components/widgets/header/header.tsx
@@ -27,7 +27,7 @@ const Header = ({
 }: Props & HTMLAttributes<HTMLElement>) => {
     const H = Headings[level];
     return (
-        <header
+        <div
             {...attrs}
             className={classNames('Header', attrs.className)}
         >
@@ -37,7 +37,7 @@ const Header = ({
             </div>
             <div className='spacer'/>
             {right}
-        </header>
+        </div>
     );
 };
 
diff --git a/webapp/channels/src/components/widgets/modals/components/modal_header.tsx b/webapp/channels/src/components/widgets/modals/components/modal_header.tsx
index 7099df7b0f..7e4ad1c84a 100644
--- a/webapp/channels/src/components/widgets/modals/components/modal_header.tsx
+++ b/webapp/channels/src/components/widgets/modals/components/modal_header.tsx
@@ -15,7 +15,7 @@ type Props = {
 function ModalHeader({id, title, subtitle, handleClose}: Props) {
     const intl = useIntl();
     return (
-        <header className='mm-modal-header'>
+        <div className='mm-modal-header'>
             <h2
                 id={`mm-modal-header-${id}`}
                 className='mm-modal-header__title'
@@ -33,7 +33,7 @@ function ModalHeader({id, title, subtitle, handleClose}: Props) {
                     </button>
                 </div>}
             </h2>
-        </header>
+        </div>
     );
 }
 export default ModalHeader;