IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Azure Monitor: Fastpass Fixes -- Add trap focus for modals in grafana/ui and other small a11y fixes for Azure Monitor. (#41449)

Browse Source
This commit is contained in:
Sarah Zinger
2021-11-24 12:16:14 -05:00
committed by GitHub
parent 24d4c8a9d1
commit fc8d93e231
4 changed files with 43 additions and 676 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/grafana-ui/src/components/Modal/Modal.tsx
View File

@@ -7,6 +7,7 @@ import { getModalStyles } from './getModalStyles';
import { ModalHeader } from './ModalHeader';
import { IconButton } from '../IconButton/IconButton';
import { HorizontalGroup } from '../Layout/Layout';
import { FocusScope } from '@react-aria/focus';
export interface Props {
/** @deprecated no longer used */
@@ -75,16 +76,18 @@ export function Modal(props: PropsWithChildren<Props>) {
className={styles.modalBackdrop}
onClick={onClickBackdrop || (closeOnBackdropClick ? onDismiss : undefined)}
/>
<div className={cx(styles.modal, className)}>
<div className={headerClass}>
{typeof title === 'string' && <DefaultModalHeader {...props} title={title} />}
{typeof title !== 'string' && title}
<div className={styles.modalHeaderClose}>
<IconButton aria-label="Close dialogue" surface="header" name="times" size="xl" onClick={onDismiss} />
<FocusScope contain autoFocus restoreFocus>
<div className={cx(styles.modal, className)}>
<div className={headerClass}>
{typeof title === 'string' && <DefaultModalHeader {...props} title={title} />}
{typeof title !== 'string' && title}
<div className={styles.modalHeaderClose}>
<IconButton aria-label="Close dialogue" surface="header" name="times" size="xl" onClick={onDismiss} />
</div>
</div>
<div className={cx(styles.modalContent, contentClassName)}>{children}</div>
</div>
<div className={cx(styles.modalContent, contentClassName)}>{children}</div>
</div>
</FocusScope>
</Portal>
);
}