facebook

Micromodal.js for creating accessible modal dialogs

Micromodal.js for creating accessible modal dialogs
Average rating: 0
(0 votes)

Thanks! You’ve rated this material!

Do you know how to make modal dialogs in JavaScript accessible and easy to include in your project with minimum configuration? In case you don’t, we can help you. Please, meet Micromodal.js for creating accessible modal dialogs!

Micromodal.js – is a tiny, dependency-free javascript library for creating accessible modal dialogs. The aim of this library is to make modal dialogs accessible. It’s only ~1.8kb minified and gzipped – A tiny library for a big change.

Features

✔ Toggles relevant aria attributes on open and close
✔ Closes modal on overlay click
✔ Closes modal on pressing the esc key
✔ Traps tab focus within the modal
✔ Focuses on the first focusable element within the modal
✔ Retains the focused element state after closing the modal

Micromodal follows the standardjs coding standard and is part of package.json file.

Development setup

  1. Clone Github repo $ git clone https://github.com/ghosh/micromodal.git
  2. Install yarn package manager (Read installation guide)
  3. Run yarn install in the root folder to install all dependencies
  4. Run yarn dev to start a dev server. This serves the example directory and live reloads when any files are changed
  5. Run yarn build to build the files for distribution. This is run automatically as a pre-commit hook as well.
  6. Send pull request and chill

Feel free to read the related material here.

Do you want to know something more we found? GPU.js is a JavaScript Acceleration library for GPGPU.

Or if you want to get more of neat JS projects to explore – check our new JS digest from March 13!

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

*By submitting this form you agree with our Privacy Policy.

Mailing & Legal Address

Syndicode Inc. 340 S Lemon Ave #3299, Walnut CA, 91789, USA

Visiting & Headquarters address
Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Email info@syndicode.com
Phone (+1) 9035021111