Micromodal | ⭕ Tiny javascript library for creating accessible modal | User Interface library

by ghosh JavaScript Version: Current License: MIT

X-Ray Key Features Code Snippets Community Discussions(5)Vulnerabilities Install Support

kandi X-RAY | Micromodal Summary

Micromodal is a JavaScript library typically used in User Interface, React applications. Micromodal has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

Tiny, dependency-free javascript library for creating accessible modal dialogs. The aim of this library is to make modal dialogs accessible and easy to include in your project with minimum configuration. It's only ~1.8kb minified and gzipped - A tiny library for big change.

Support

Quality

Security

License

Reuse

Support

Micromodal has a medium active ecosystem.

It has 3345 star(s) with 228 fork(s). There are 36 watchers for this library.

It had no major release in the last 6 months.

There are 45 open issues and 113 have been closed. On average issues are closed in 279 days. There are 17 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of Micromodal is current.

Quality

Micromodal has 0 bugs and 0 code smells.

Security

Micromodal has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

Micromodal code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

Micromodal is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

Micromodal releases are not available. You will need to build from source code and install.

Installation instructions, examples and code snippets are available.

Micromodal saves you 416 person hours of effort in developing the same functionality from scratch.

It has 970 lines of code, 0 functions and 17 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi has reviewed Micromodal and discovered the below as its top functions. This is intended to give you an instant insight into Micromodal implemented functionality, and help decide if they suit your requirements.

Emit an object

Get all kandi verified functions for this library.

Micromodal Key Features

No Key Features are available at this moment for Micromodal.

Micromodal Examples and Code Snippets

No Code Snippets are available at this moment for Micromodal.

Community Discussions

Trending Discussions on Micromodal

Do not close the mode in the mouse up event

cause of excessively large application.js file in public/packs for rails app? / rack timeout error

Find display type in FullCalendar callbacks

Which is the recommended way of handling tabindex in a modal dialog with scrollable content (in terms of a11y)?

webpacker Uncaught Error: Module build failed / Cannot find module 'babel-plugin-syntax-dynamic-import'

QUESTION

Do not close the mode in the mouse up event

Asked 2021-Jun-06 at 16:26

I use the micro modal js package in my project but I have a problem. this modal closed when occurring mouse down or mouse up event Outside the medal range. but I want mouse-up event Do not do anything and just mouse-down event can close the medal. this is my HTML code.

...

ANSWER

Answered 2021-Jun-06 at 06:23

The solution is to remove data-micromodal-close from your modal__overlay. Doing that will prevent the modal from closing when you click on the backdrop.

Source https://stackoverflow.com/questions/67856022

QUESTION

cause of excessively large application.js file in public/packs for rails app? / rack timeout error

Asked 2021-Mar-13 at 13:59

My app has been throwing frequent rack timeout errors, and i think i narrowed the problem down to the size of the compiled javascript file. public/packs/application-5db30a18f8715133f889.js is 2.1mb. this is not doable!

something to note is i have two asset folders: one for sprockets where all my css and most js is, and one for webpacker, which i added solely to use an image upload node package called Upp. i intend to move to webpacker completely, but not yet. this is my app/assets/application.js:

...

ANSWER

Answered 2021-Mar-02 at 06:51

If you say the problem is from the packs/application, I would add https://www.npmjs.com/package/webpack-bundle-analyzer to see what webpacker is adding in that file.

Here is how my webpack/development.js looks like:

Source https://stackoverflow.com/questions/66414182

QUESTION

Find display type in FullCalendar callbacks

Asked 2021-Mar-03 at 00:29

I am using FullCalendar to display events from two sources. I have one source to display them as background events and the other set to display as block events.

This works fine, but then I am using the eventClick callback. When I check the info.event.display property of the event clicked on, it returns as auto. In this callback I need to check this property to determine whether to do something or not.

This also is a problem with the eventDidMount callback. I was using that but have disabled it for now.

IE: In this case I only want a modal to appear if the display type is block.

Code:

...

ANSWER

Answered 2021-Mar-03 at 00:29

It's because "background" is a property of the event source, not the event. Whilst that rule may then be applied when rendering, to control how the event appears, the event itself doesn't automatically have the value "background" set as the value for its own "display" property (because an individual event can potentially override the event source value for any given property).

Fortunately the event will contain a reference to the event source and, although the path to the information is convoluted (but fortunately discoverable by logging the event object to the Console), you can get the "display" property of the event source from it:

Source https://stackoverflow.com/questions/66448011

QUESTION

Which is the recommended way of handling tabindex in a modal dialog with scrollable content (in terms of a11y)?

Asked 2020-Nov-26 at 21:07

I am using the library micromodal.js to handle the functionality of my (accessible) modal dialogs. Having read recommendations about a11y best practices, I have learned that the modal should get a tabindex="-1" in order to "trap" the tabbing user (or screen reader) in the modal dialog.

One of the modals I am using it for has scrollable content section. In order to facilitate the content to be focusable and therefore scrollable by arrow keys, I added tabindex="0" to the section. On mobile devices it is not the content that should be scrollable, but the whole modal.

The issue that this solution creates is: when opening the modal on smaller screens, the content is focussed first (due to tabindex of 0 being larger than tabindex of -1, I guess?) and the whole header of the modal is not visible.

The desired behavior is that the modal header is visible when it opens. How could I achieve that with still providing an accessible UX?

Code example: https://codepen.io/AstiV/pen/vYKopNZ

Current behavior:

...

ANSWER

Answered 2020-Nov-26 at 21:07

First of all, you need to review carefully the difference between tabindex=0 and tabindex=-1. Setting tabindex=0 means that the element is focusable, both manually with tab key and automatically via script. Setting element to tabindex=-1 means that only a script can set focus on it, while it isn't possible to focus the element manually.

Knowing this, you should understand what you did wrong. The most obvious solution would be to focus the element with tabindex=-1 when your modal is shown. If for any reason it's much more logical to have the element with tabindex=0 focused when the modal is opened, then you may first focus the element with tabindex=-1, wait for a short while (50-100ms), and then focus the element with tabindex=0.

Concerning scroll, normally, focusing any element (with whatever tabindex or none) should automatically bring it into view it it isn't yet visible, but if is already visible then the scroll shouldn't change. So even by focusing the element with tabindex=-1 and then the one with tabindex=0, the element with tabindex=-1 should stay visible.

Source https://stackoverflow.com/questions/64974338

QUESTION

webpacker Uncaught Error: Module build failed / Cannot find module 'babel-plugin-syntax-dynamic-import'

Asked 2020-Sep-17 at 00:54

In setting up webpacker with my Rails 5.2.4 app, I've introduced this bug to my browser console: Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-plugin-syntax-dynamic-import' from '/Users/me/code/project' - Did you mean "@babel/syntax-dynamic-import"

@babel/syntax-dynamic-import is not a real package, so what does this mean? Looking through that index.js file I see no mention of babel-plugin-syntax-dynamic-import. Furthermore, said plugin is stored in node_modules/@babel/babel-plugin-syntax-dynamic-import. After reading this I made sure that all my babel packages were on version 7. Except for babel-loader v8, because v7 was looking for an incorrect dependency.

My package.json looks alright as far as I can tell:

...

ANSWER

Answered 2020-Sep-17 at 00:54

Solution was to downgrade babel-loader@8.1.0 to babel-loader@8.0.6

Source https://stackoverflow.com/questions/63929138

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install Micromodal

You can download it from GitHub.

Support

We are always open and invite developers to contribute to Micromodal. We have kept the guidelines and process dead simple, so you invest more time in making modals accessible to all. Micromodal follows the standardjs coding standard and is part of our package.json file. It will help us to maintain consistency in the code base.

Find more information at: