From bf541446cf7e15157322f314f3301b942a195e6a Mon Sep 17 00:00:00 2001
From: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Date: Fri, 17 Jan 2025 01:37:20 +0530
Subject: [PATCH] [MM-61658]: Added aria-label to close button (#29725)

* [MA-44]: Added aria-label to close button

* [MA-44]: Added translation function to close button

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../channel_notifications_modal.test.tsx.snap             | 6 ++++++
 .../components/widgets/modals/components/modal_header.tsx | 8 ++++++--
 webapp/channels/src/i18n/en.json                          | 1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

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 e1499eec41..a42d33707a 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
@@ -52,6 +52,7 @@ Object {
                 class="mm-modal-header__ctr"
               >
                 <button
+                  aria-label="Close"
                   class="btn btn-icon"
                 >
                   <i
@@ -471,6 +472,7 @@ Object {
                 class="mm-modal-header__ctr"
               >
                 <button
+                  aria-label="Close"
                   class="btn btn-icon"
                 >
                   <i
@@ -1028,6 +1030,7 @@ Object {
                 class="mm-modal-header__ctr"
               >
                 <button
+                  aria-label="Close"
                   class="btn btn-icon"
                 >
                   <i
@@ -1332,6 +1335,7 @@ Object {
                 class="mm-modal-header__ctr"
               >
                 <button
+                  aria-label="Close"
                   class="btn btn-icon"
                 >
                   <i
@@ -1832,6 +1836,7 @@ Object {
                 class="mm-modal-header__ctr"
               >
                 <button
+                  aria-label="Close"
                   class="btn btn-icon"
                 >
                   <i
@@ -2332,6 +2337,7 @@ Object {
                 class="mm-modal-header__ctr"
               >
                 <button
+                  aria-label="Close"
                   class="btn btn-icon"
                 >
                   <i
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 f04a2778b1..552c2c8cfb 100644
--- a/webapp/channels/src/components/widgets/modals/components/modal_header.tsx
+++ b/webapp/channels/src/components/widgets/modals/components/modal_header.tsx
@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-
+import {useIntl} from 'react-intl';
 import './modal_header.scss';
 
 type Props = {
@@ -13,6 +13,7 @@ type Props = {
 }
 
 function ModalHeader({id, title, subtitle, handleClose}: Props) {
+    const intl = useIntl();
     return (
         <header className='mm-modal-header'>
             <h1
@@ -28,7 +29,10 @@ function ModalHeader({id, title, subtitle, handleClose}: Props) {
                 className='mm-modal-header__ctr'
                 onClick={handleClose}
             >
-                <button className='btn btn-icon'>
+                <button
+                    className='btn btn-icon'
+                    aria-label={intl.formatMessage({id: 'modal.header_close', defaultMessage: 'Close'})}
+                >
                     <i className='icon icon-close'/>
                 </button>
             </div>
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 1109c4942b..f72bb7968a 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -4342,6 +4342,7 @@
   "mobile.set_status.dnd.icon": "Do Not Disturb Icon",
   "mobile.set_status.offline.icon": "Offline Icon",
   "mobile.set_status.online.icon": "Online Icon",
+  "modal.header_close": "Close",
   "modal.manual_status.ask": "Do not ask me again",
   "modal.manual_status.auto_responder.message_away": "Would you like to switch your status to \"Away\" and disable automatic replies?",
   "modal.manual_status.auto_responder.message_dnd": "Would you like to switch your status to \"Do not disturb\" and disable automatic replies?",