fix(dialog) Wrap dialog in FocusLock (#12431)

Improve accessibility by not allowing the user to navigate outside the dialog

react/features/base/ui/components/web/Dialog.tsx

@@ -1,5 +1,6 @@
 import { Theme } from '@mui/material';
 import React, { useCallback, useContext, useEffect } from 'react';
+import FocusLock from 'react-focus-lock';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { keyframes } from 'tss-react';
@@ -57,7 +58,6 @@ const useStyles = makeStyles()((theme: Theme) => {
         },
 
         modal: {
-            zIndex: 1,
             backgroundColor: theme.palette.ui01,
             border: `1px solid ${theme.palette.ui03}`,
             boxShadow: '0px 4px 25px 4px rgba(20, 20, 20, 0.6)',
@@ -168,6 +168,10 @@ const useStyles = makeStyles()((theme: Theme) => {
             '& button:last-child': {
                 marginLeft: '16px'
             }
+        },
+
+        focusLock: {
+            zIndex: 1
         }
     };
 });
@@ -255,6 +259,7 @@ const Dialog = ({
             <div
                 className = { classes.backdrop }
                 onClick = { onBackdropClick } />
+            <FocusLock className = { classes.focusLock }>
                 <div
                     aria-describedby = { description }
                     aria-labelledby = { title ?? t(titleKey ?? '') }
@@ -296,6 +301,7 @@ const Dialog = ({
                             onClick = { submit } />}
                     </div>
                 </div>
+            </FocusLock>
         </div>
     );
 };