Skip to content

Instantly share code, notes, and snippets.

@leonardokl

leonardokl/Modal.tsx

Last active June 17, 2019 16:46
Show Gist options
  • Save leonardokl/1e5d426ad4134640ad18003e616c2f14 to your computer and use it in GitHub Desktop.
Save leonardokl/1e5d426ad4134640ad18003e616c2f14 to your computer and use it in GitHub Desktop.
Download ZIP
Improving react-semantic-ui modal acessibility
Raw
Modal.tsx
import React from 'react';
import FocusLock from 'react-focus-lock';
import { Modal as SemanticModal, ModalProps } from 'semantic-ui-react';
const ModalLock: React.FC<ModalProps> = ({ children, className, ...props }) => (
<FocusLock returnFocus className={className} lockProps={props}>
{children}
</FocusLock>
);
export const Modal: React.FC<ModalProps> = props => (
<SemanticModal
role="dialog"
as={ModalLock}
closeOnDimmerClick={false}
{...props}
/>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment