Accessible Modal

Attempt at creating a WCAG 2.1 AA compliant modal, view commit history to get idea of how it was iterated - created with CRA and using stitches for styling

accessible-modal.mp4

 Key Parts

• Focus Trap Hook
• Base Modal Component
• Modal Variant / Implementation

 Design Inspiration

• https://www.radix-ui.com/docs/primitives/components/dialog

Helpful Accessibility Material

• https://www.sarasoueidan.com/blog/focus-indicators/#new-focus-indicator-accessibility-requirements-in-wcag-2.2

• https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/

• https://ebay.gitbook.io/mindpatterns/disclosure/lightbox-dialog

Extensions ideas given more time

• Pull useEffect within Modal into separate hook
• Add ability to pass in any trigger button
• Add close button to Modal Header

Screenshots