From 13109aeb9859680778e6aee7924061904ac5139a Mon Sep 17 00:00:00 2001
From: Ashish Dhama <16203333+AshishDhama@users.noreply.github.com>
Date: Mon, 24 Jun 2024 17:02:22 +0530
Subject: [PATCH] MM-55973: Make keyboard shortcuts modal content div
 accessible via keyboard (#27412)

Automatic Merge
---
 .../keyboard_shortcuts_modal.test.tsx.snap          |  8 ++++++++
 .../keyboard_shortcuts_modal.tsx                    | 13 +++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap
index 62e9bb586c..f54577fdbf 100644
--- a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap
+++ b/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"
       >
diff --git a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx
index 61f3fa60d2..48eae2a0cf 100644
--- a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx
+++ b/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'>