From 6ecaad2a41a423a6beb697ffbd03fd6b808e42c1 Mon Sep 17 00:00:00 2001
From: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Date: Wed, 26 Feb 2025 03:29:30 +0530
Subject: [PATCH] MM-61652: Removed heading related role from channel header
 (#30277)

---
 .../playbooks/channels/rhs/about_spec.js      |  2 +-
 .../channel_header/channel_header_title.tsx   | 61 ++++++++++---------
 webapp/channels/src/sass/layout/_headers.scss |  1 -
 3 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/e2e-tests/cypress/tests/integration/playbooks/channels/rhs/about_spec.js b/e2e-tests/cypress/tests/integration/playbooks/channels/rhs/about_spec.js
index 64bf07efd7..7e6465ee17 100644
--- a/e2e-tests/cypress/tests/integration/playbooks/channels/rhs/about_spec.js
+++ b/e2e-tests/cypress/tests/integration/playbooks/channels/rhs/about_spec.js
@@ -90,7 +90,7 @@ describe('channels > rhs > header', {testIsolation: true}, () => {
             cy.get('#rhsContainer').findByTestId('rendered-run-name').should('be.visible').contains('new run name');
 
             // * make sure the channel name remains unchanged
-            cy.get('#channelHeaderInfo').findByRole('heading').contains(playbookRunName);
+            cy.get('#channelHeaderInfo').contains(playbookRunName);
         });
     });
 
diff --git a/webapp/channels/src/components/channel_header/channel_header_title.tsx b/webapp/channels/src/components/channel_header/channel_header_title.tsx
index 9e2b303cb4..1806c5cdad 100644
--- a/webapp/channels/src/components/channel_header/channel_header_title.tsx
+++ b/webapp/channels/src/components/channel_header/channel_header_title.tsx
@@ -105,8 +105,6 @@ const ChannelHeaderTitle = ({
                     size='sm'
                 />
                 <strong
-                    role='heading'
-                    aria-level={2}
                     id='channelHeaderTitle'
                     className='heading'
                 >
@@ -148,46 +146,49 @@ const ChannelHeaderTitle = ({
                 <div
                     id='channelHeaderDropdownButton'
                 >
-                    <strong
-                        role='heading'
-                        aria-level={2}
-                        id='channelHeaderTitle'
-                        className='heading'
-                        ref={headerItemRef}
+                    <button
+                        className={classNames('channel-header__trigger style--none', {active: titleMenuOpen})}
+                        aria-label={
+                            (isDirect && currentUser.id === dmUser?.id) ? personalChannelHeaderAriaLabel.toLowerCase() : othersChannelHeaderAriaLabel.toLowerCase()
+                        }
+                        aria-expanded={titleMenuOpen}
+                        aria-controls='channelHeaderDropdownMenu'
                     >
-                        <button
-                            id='channel_header.menuAriaLabel'
-                            className={classNames('channel-header__trigger style--none', {active: titleMenuOpen})}
-                            aria-label={
-                                (isDirect && currentUser.id === dmUser?.id) ? personalChannelHeaderAriaLabel.toLowerCase() : othersChannelHeaderAriaLabel.toLowerCase()
-                            }
-                            aria-expanded={titleMenuOpen}
-                            aria-controls='channelHeaderDropdownMenu'
-                        >
-                            {showTooltip ? (
-                                <WithTooltip
-                                    title={channelTitle as string}
+                        {showTooltip ? (
+                            <WithTooltip
+                                title={channelTitle as string}
+                            >
+                                <strong
+                                    id='channelHeaderTitle'
+                                    className='heading'
+                                    ref={headerItemRef}
                                 >
                                     <span>
                                         {archivedIcon}
                                         {channelTitle}
                                         {sharedIcon}
                                     </span>
-                                </WithTooltip>
-                            ) : (
+                                </strong>
+                            </WithTooltip>
+                        ) : (
+                            <strong
+                                id='channelHeaderTitle'
+                                className='heading'
+                                ref={headerItemRef}
+                            >
                                 <span>
                                     {archivedIcon}
                                     {channelTitle}
                                     {sharedIcon}
                                 </span>
-                            )}
-                            <span
-                                id='channelHeaderDropdownIcon'
-                                className='icon icon-chevron-down header-dropdown-chevron-icon'
-                                aria-hidden='true'
-                            />
-                        </button>
-                    </strong>
+                            </strong>
+                        )}
+                        <span
+                            id='channelHeaderDropdownIcon'
+                            className='icon icon-chevron-down header-dropdown-chevron-icon'
+                            aria-hidden='true'
+                        />
+                    </button>
                 </div>
                 <ChannelHeaderDropdown
                     ariaLabel={
diff --git a/webapp/channels/src/sass/layout/_headers.scss b/webapp/channels/src/sass/layout/_headers.scss
index aed38b3d3c..e6d7e18adb 100644
--- a/webapp/channels/src/sass/layout/_headers.scss
+++ b/webapp/channels/src/sass/layout/_headers.scss
@@ -209,7 +209,6 @@
     .heading {
         overflow: hidden;
         align-self: center;
-        padding: 4px;
         margin: 0 0 0 2px;
         color: var(--center-channel-color);
         font-family: Metropolis, sans-serif;