gdkraus/accessible-modal-dialog

An demonstration of how to code a modal dialog/window so that it is accessible to people with disabilities.

accessible-modal-dialog's Issues

Problem with Safari

Hello,
When trying your demo on safari browser, using the tab key let you get out of the modal box.
From the third input field, pressing tab sets the focus to the address bar instead of the submit button.
Thank you.

Popup with external php file

Would it be possible to replace the form with an external php file (with my own form)?

New and improved script version

Hey I took the liberty to make a new version for the script including the following features:

• no more jQuery dependency 🎉
• possibility to have several different modals on the page
• DOM API for openers (data-show-modal="modal-id") / closers (data-hide-modal)
• JS API to manually show and hide the modal (modal.show(), modal.hide())
• JS API to know whether it’s hidden or shown (modal.shown)
• Addition of [tabindex]:not([value="-1"]) to focusable elements
• Cleaner code

Find the code here: https://github.com/edenspiekermann/accessible-modal-dialog.
Find a demo here: http://codepen.io/HugoGiraudel/pen/jWQqeq?editors=0100.

Would you like me to submit a PR?

lightbox content not visible when longer than viewport

because of the fixed positioning parts of the lightbox content are currently not visible if the viewport is too small. a potential fix would be to set the lightbox height relative to the page height (with some margins) and make the lightbox-content scrollable.

dialog comes up zoomed on ios (might be apple issue)

The initial demo page is normal unzoomed.

When the dialog is opened, focus is on "First Name" and the dialog is zoomed. I'm not sure if this is a normal Apple thing when focus is put on an input field.

This is what I expected it to look like

I'm using an iphone 6s with ios 12.4.1. It's not a recent behavior for this iOS. It's been doing this for some time. Was just curious if it's an apple thing or if the dialog is somehow causing it. Would like to know if it happens for others.

Go full screen on smaller screens as a responsive solution

On say a iPhone 4 sized screen the demo modal is not fully usable. It's centred and fixed and some of it is below the viewport.

I've found that the best solution on smaller screens is to go full screen and allow scrolling of the modal as required. Or at a minimum full width and max height 100% and allow scrolling.

Doesn't capture click events on background window

Seems like basic functionality :)

Missing names of sections in Documentation

Hi

I was just going through documentation where the names of the three sections is missing.It is given that there are three sections in the example. But the names of the sections are not given.

Please find the screenshot attached. Please mention these names.

Regards
VG

The license doesn't include your name

Hi,
The unique license is nice but it refers to your name, but does not include it.
Do you have a version that includes your name?
Thanks,

Clicking outside the modal allows user to tab between non-dialog elements

Referring to http://accessibility.oit.ncsu.edu/training/aria/modal-window/version-3/

1. Click "view the modal window" to show the modal dialog.
2. Click anywhere outside the modal, in the "greyed-out" area.
3. Hit "tab" and you can see the focus move between the links and buttons of the main content.

Multiple Modals?

How difficult would it be to make this support multiple modals? I was looking over the JS and realized it is beyond my capabilities.

site still shows scrollbar when lightbox is opened

after opening the lightbox the site content can still be scrolled. setting the site overflow to hidden when the lightbox is open should fix the issue.