haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Improve accessibility by not allowing the user to navigate outside the dialog
This commit is contained in:
Robert Pintilii 2022-10-21 10:42:00 +03:00 committed by GitHub
parent 0b48e55a35
commit 4755f5a031
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
react/features/base/ui/components/web/Dialog.tsx
View File

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