MM-55973: Make keyboard shortcuts modal content div accessible via keyboard (#27412)

Automatic Merge

webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap

@@ -65,7 +65,11 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
     <ModalBody
       bsClass="modal-body"
       componentClass="div"
+      tabIndex={0}
     >
+      <div
+        tabIndex={-1}
+      />
       <div
         className="row"
       >
@@ -708,7 +712,11 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
     <ModalBody
       bsClass="modal-body"
       componentClass="div"
+      tabIndex={0}
     >
+      <div
+        tabIndex={-1}
+      />
       <div
         className="row"
       >

webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Modal} from 'react-bootstrap';
 import {defineMessages, useIntl} from 'react-intl';
 import {useSelector} from 'react-redux';
@@ -84,6 +84,7 @@ interface Props {
 
 const KeyboardShortcutsModal = ({onExited}: Props): JSX.Element => {
     const [show, setShow] = useState(true);
+    const contentRef = useRef<HTMLDivElement>(null);
 
     const {formatMessage} = useIntl();
 
@@ -104,6 +105,10 @@ const KeyboardShortcutsModal = ({onExited}: Props): JSX.Element => {
         });
     };
 
+    useEffect(() => {
+        contentRef.current?.focus();
+    }, []);
+
     return (
         <Modal
             dialogClassName='a11y__modal shortcuts-modal'
@@ -125,7 +130,11 @@ const KeyboardShortcutsModal = ({onExited}: Props): JSX.Element => {
                         <strong><KeyboardShortcutSequence shortcut={KEYBOARD_SHORTCUTS.mainHeader}/></strong>
                     </Modal.Title>
                 </Modal.Header>
-                <Modal.Body>
+                <Modal.Body tabIndex={0}>
+                    <div
+                        tabIndex={-1}
+                        ref={contentRef}
+                    />
                     <div className='row'>
                         <div className='col-sm-4'>
                             <div className='section'>