From d67890a1311f029d9b127b08345cc07e48511f26 Mon Sep 17 00:00:00 2001
From: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Date: Wed, 4 Dec 2024 13:15:46 +0530
Subject: [PATCH] [MA-8]: Added appropriate ARIA attributes in the channel
 header

---
 .../channel_header/channel_header_title.tsx   | 59 +++++++++----------
 webapp/channels/src/sass/layout/_headers.scss |  1 +
 2 files changed, 28 insertions(+), 32 deletions(-)

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 b4873f1fd9a..20bd69bd019 100644
--- a/webapp/channels/src/components/channel_header/channel_header_title.tsx
+++ b/webapp/channels/src/components/channel_header/channel_header_title.tsx
@@ -132,50 +132,45 @@ const ChannelHeaderTitle = ({
                 <div
                     id='channelHeaderDropdownButton'
                 >
-                    <button
-                        className={classNames('channel-header__trigger style--none', {active: titleMenuOpen})}
-                        aria-label={intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'}).toLowerCase()}
+                    <strong
+                        role='heading'
+                        aria-level={2}
+                        id='channelHeaderTitle'
+                        className='heading'
+                        ref={headerItemRef}
                     >
-                        {showTooltip ? (
-                            <WithTooltip
-                                id='channelHeaderTooltip'
-                                placement='bottom'
-                                title={channelTitle as string}
-                            >
-                                <strong
-                                    role='heading'
-                                    aria-level={2}
-                                    id='channelHeaderTitle'
-                                    className='heading'
-                                    ref={headerItemRef}
+                        <button
+                            id='channel_header.menuAriaLabel'
+                            className={classNames('channel-header__trigger style--none', {active: titleMenuOpen})}
+                            aria-label={intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'}).toLowerCase()}
+                            aria-expanded={titleMenuOpen ? 'true' : 'false'}
+                            aria-controls='channelHeaderDropdownMenu'
+                        >
+                            {showTooltip ? (
+                                <WithTooltip
+                                    id='channelHeaderTooltip'
+                                    placement='bottom'
+                                    title={channelTitle as string}
                                 >
                                     <span>
                                         {archivedIcon}
                                         {channelTitle}
                                         {sharedIcon}
                                     </span>
-                                </strong>
-                            </WithTooltip>
-                        ) : (
-                            <strong
-                                role='heading'
-                                aria-level={2}
-                                id='channelHeaderTitle'
-                                className='heading'
-                                ref={headerItemRef}
-                            >
+                                </WithTooltip>
+                            ) : (
                                 <span>
                                     {archivedIcon}
                                     {channelTitle}
                                     {sharedIcon}
                                 </span>
-                            </strong>
-                        )}
-                        <span
-                            id='channelHeaderDropdownIcon'
-                            className='icon icon-chevron-down header-dropdown-chevron-icon'
-                        />
-                    </button>
+                            )}
+                            <span
+                                id='channelHeaderDropdownIcon'
+                                className='icon icon-chevron-down header-dropdown-chevron-icon'
+                            />
+                        </button>
+                    </strong>
                 </div>
                 <ChannelHeaderDropdown/>
             </MenuWrapper>
diff --git a/webapp/channels/src/sass/layout/_headers.scss b/webapp/channels/src/sass/layout/_headers.scss
index 78431ec1072..b41e7e24dc4 100644
--- a/webapp/channels/src/sass/layout/_headers.scss
+++ b/webapp/channels/src/sass/layout/_headers.scss
@@ -217,6 +217,7 @@
     .heading {
         overflow: hidden;
         align-self: center;
+        padding: 4px;
         margin: 0 0 0 2px;
         color: var(--center-channel-color);
         font-family: Metropolis, sans-serif;