From d08a4eba2a0df924a6cdb523f8c15554161185e2 Mon Sep 17 00:00:00 2001
From: Ramon Souza <contato@ramonsouza.com>
Date: Mon, 16 Aug 2021 17:10:40 -0300
Subject: [PATCH 1/2] restore keyboard access in breakout room modal

---
 .../actions-bar/create-breakout-room/component.jsx         | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
index c08fd1f79379..c31b0384956f 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
@@ -255,7 +255,7 @@ class BreakoutRoom extends PureComponent {
   handleShiftUser(activeListSibling) {
     const { users } = this.state;
     if (activeListSibling) {
-      const text = activeListSibling.getElementsByTagName('p')[0].innerText;
+      const text = activeListSibling.getElementsByTagName('input')[0].value;
       const roomNumber = text.match(/\d/g).join('');
       users.forEach((u, index) => {
         if (u.userId === document.activeElement.id) {
@@ -624,7 +624,7 @@ class BreakoutRoom extends PureComponent {
               }
             />
           </p>
-          <div className={styles.breakoutBox} onDrop={drop(0)} onDragOver={allowDrop}>
+          <div className={styles.breakoutBox} onDrop={drop(0)} onDragOver={allowDrop} tabIndex={0}>
             {this.renderUserItemByRoom(0)}
           </div>
           <span className={leastOneUserIsValid ? styles.dontShow : styles.spanWarn}>
@@ -647,7 +647,7 @@ class BreakoutRoom extends PureComponent {
                   aria-label={intl.formatMessage(intlMessages.duration)}
                 />
               </p>
-              <div className={styles.breakoutBox} onDrop={drop(value)} onDragOver={allowDrop}>
+              <div className={styles.breakoutBox} onDrop={drop(value)} onDragOver={allowDrop} tabIndex={0}>
                 {this.renderUserItemByRoom(value)}
                 {isInvitation && this.renderJoinedUsers(value)}
               </div>
@@ -871,6 +871,7 @@ class BreakoutRoom extends PureComponent {
     return this.getUserByRoom(room)
       .map((user) => (
         <p
+          tabIndex={0}
           id={user.userId}
           key={user.userId}
           className={cx(

From 2327e921387e36e68627927fb07f0562e4b9e35c Mon Sep 17 00:00:00 2001
From: Ramon Souza <contato@ramonsouza.com>
Date: Tue, 17 Aug 2021 08:21:51 -0300
Subject: [PATCH 2/2] set tabIndex to -1 in the users list of breakout modal

---
 .../components/actions-bar/create-breakout-room/component.jsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
index c31b0384956f..3e9625b1600a 100755
--- a/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/component.jsx
@@ -871,7 +871,7 @@ class BreakoutRoom extends PureComponent {
     return this.getUserByRoom(room)
       .map((user) => (
         <p
-          tabIndex={0}
+          tabIndex={-1}
           id={user.userId}
           key={user.userId}
           className={cx(