Merge pull request #13010 from ramonlsouza/issue-13003

fix: Keyboard Access To Assign Users To Breakout Room Broken
bigbluebutton · Aug 18, 2021 · 9b94f7e · 9b94f7e
2 parents 138761c + 2327e92
commit 9b94f7e
Showing 1 changed file with 4 additions and 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
@@ -259,7 +259,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) {
@@ -628,7 +628,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}>
@@ -651,7 +651,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>
@@ -879,6 +879,7 @@ class BreakoutRoom extends PureComponent {
     return this.getUserByRoom(room)
       .map((user) => (
         <p
+          tabIndex={-1}
           id={user.userId}
           key={user.userId}
           className={cx(