[MM-62973][MM-63028][MM-63034][MM-63027] Various accessibility fixes around Browse Channels modal (#30922)

* [MM-62973] Fix order of Close button and other buttons in the header

* [MM-63028] Add aria-live status area when searching for channels

* [MM-63027] Add announcement that channel is joined

* [MM-63034] Add role=checkbox and reformat HTML to have correct custom checkbox code

* Update snapshots from generic_modal change

* PR feedback

* PR feedback

* PR feedback

webapp/platform/components/src/generic_modal/__snapshots__/generic_modal.test.tsx.snap

@@ -39,6 +39,9 @@ exports[`GenericModal should match snapshot for base case 1`] = `
               <div
                 class="modal-header"
               >
+                <div
+                  class="GenericModal__header__text_container"
+                />
                 <button
                   aria-label="Close"
                   class="close"
@@ -55,9 +58,6 @@ exports[`GenericModal should match snapshot for base case 1`] = `
                     Close
                   </span>
                 </button>
-                <div
-                  class="GenericModal__header__text_container"
-                />
               </div>
               <div
                 class="modal-body"

webapp/platform/components/src/generic_modal/generic_modal.tsx

@@ -4,7 +4,7 @@
 import classNames from 'classnames';
 import React, {useState, useEffect, useCallback, useRef} from 'react';
 import {Modal} from 'react-bootstrap';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import {useFocusTrap} from '../hooks/useFocusTrap';
 import './generic_modal.scss';
@@ -128,6 +128,8 @@ export const GenericModal: React.FC<Props> = ({
     dataTestId,
     delayFocusTrap,
 }) => {
+    const intl = useIntl();
+
     // Create a ref for the modal container
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -290,7 +292,7 @@ export const GenericModal: React.FC<Props> = ({
                 className='GenericModal__wrapper GenericModal__wrapper-enter-key-press-catcher'
             >
                 {showHeader && (
-                    <Modal.Header closeButton={showCloseButton}>
+                    <Modal.Header closeButton={false}>
                         <div className='GenericModal__header__text_container'>
                             {compassDesign && (
                                 <>
@@ -306,6 +308,19 @@ export const GenericModal: React.FC<Props> = ({
                                 </div>
                             )}
                         </div>
+                        {showCloseButton && (
+                            <button
+                                type='button'
+                                className='close'
+                                onClick={onHideCallback}
+                                aria-label={intl.formatMessage({id: 'generic_modal.close', defaultMessage: 'Close'})}
+                            >
+                                <span aria-hidden='true'>{'×'}</span>
+                                <span className='sr-only'>
+                                    <FormattedMessage id='generic_modal.close' defaultMessage='Close' />
+                                </span>
+                            </button>
+                        )}
                     </Modal.Header>
                 )}
                 <Modal.Body className={classNames({divider: bodyDivider, 'overflow-visible': bodyOverflowVisible})}>