[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>

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

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>

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?",