nico3333fr / van11y-accessible-modal-window-aria Goto Github PK

Hey,

cf bug

• 1. Go => demo modal
• 2. Click Montre-moi une autre modale or C’est si facile
• 3. Close the modal via ESC_KEY
• 4. Click Montre-moi une autre modale or C’est si facile

What is the expected result ?

What happens instead ?

the innerHTML of #modal_id_2nd_example changes:

Hi,

It's required to use a link or button to display the modal window.

It would be nice to be able to display one with a JS call, something like showVan11y(config).

My current usecase : display a modal window at a form submit for data validation (choosing a corrected address among several guesses from the user's data).

The license is currently defined as follows:

 "license": [
    {
      "name": "MIT",
      "url": "https://github.com/nico3333fr/van11y-accessible-modal-window-aria/blob/master/LICENSE"
    }
  ]

Per npm documentation, this is an old/invalid format for a license. It also breaks a standard license parser. Is it possible to correct this to a valid format?

Hi,

I think it's not an issue but more a question. What would be the best way to re init a script when openend in this modal.
Like i have an image slider and want to use this modal for a full screen version, but then the slider does not work any more.

I hope you could help point me in the good direction.

Hi

I want to open a modal from inside another modal. This totally messes with the contentBackId and HTML is not moved back to the original container.

Is there some way I can close the first modal before opening the second?

J'essaie d'importer vani11y dans un projet Astro.build + Vite.
Que penser de ce message @nico3333fr ?

van11y-accessible-modal-window-aria doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

I use this plugin for a confirmation window, which has additional buttons to close/confirm an action.

After confirmation or cancellation I want to close the modal window, but I can't seem to find a way to this except for adding id="js-modal-close" to the buttons, but this is technically against the spec as there would be multiple elements with the same id.

So I was wondering if there's a class I can add (class="js-modal-close" doesn't work) to close the modal? Or if there's a function I can call to close the modal?

I would like to change modal styles per modal instance. Is there anyway to add a data-attribute on the trigger button that would apply a class to the dialog?

this feature may be use in case of alertdialog instead of dialog so if it's not currently the case this must also prevent to close the dialog using esc key.

Otherwise maybe you can do extra data attributes like :

• data-modal-esc-key="disabled"
• data-modal-role="alertdialog" -> will automatically, change role to alertdialog instead of dialog, disable click on background and esc key to close, remove close button and move focus on the dialog itself instead of on the close button

Hello, I would like to request the ability to specify an initial focus. I actually need it to be able to focus on the entire layer initially, then tab loop inside the modal as currently does. The problem is screen readers read the X button first, which isn't the intent. We want to ensure that the message is read out first, then the user can cycle between content button and X button.

Bonjour,

Tout d'abord merci pour ce super plugin qui marche à merveille.

Je cherche néanmoins un moyen de pouvoir gérer une ouverture de la modale sans passer par un trigger click sur le button mais avoir une fonction qui détectera son ouverture.

j'espère que c'est assez clair.

Merci d'avance

Lorsque le bouton est composé de HTML (une image dans mon cas), le script bug :

<button class="js-modal"><img src='[...]' alt='[...]' /><button>

Ce test renvoi false :

hasClass(e.target, MODAL_JS_CLASS)

Et le script ne construit pas la modale

If there is an apostrophe in the data-modal-text attribute value then this breaks the html

Coucou M'sieu, :)

Je me suis rendue compte que lorsque tu as la règle overflow-x: hidden; qui est aplliquée à la balise html, ta classe no-scroll (appliquée à body devient alors non fonctionnelle).
Pour résoudre le problème j'ai appliqué la classe no-scroll à la racine htmldirectement, sans rencontrer d'effet de bord.

Merci encore pour ce super script !

While testing the modal for accessibility with various screen reader and browser combinations (NVDA + FIREFOX, JAWS + IE, VOICEOVER + IOS) the results are not as expected.

When the modal window displays, NVDA reads the whole content automatically which is ok but with JAWS and VOICEOVER the content is not read at all.

Moving the focus to the content will read the content but not the inputs inside the modal and the aria spec says If a dialog is limited to interactions that either provide additional information or continue processing, it may be advisable to set focus to the element that is likely to be most frequently used, such as an OK or Continue button.

Using aria-describedBy on the modal and point it to the content on the layer at least fixes the issue in JAWS and VOICEOVER but this introduces and issue with NVDA + FIREFOX where the content is read twice.

After doing some research found that role="document" is causing the issues across multiple screen readers. Removing the role and adding an aria-describedBy pointing to the dialog content will give the consistent behavior among all the screen reader and browser combinations.

Here is an example from deque university which suggest not to use role="document" - Alert Dialog (under Dialog source code).

Bonjour,

J'ai une suggestion à proposer pour éviter ce cas :

Sur la page https://van11y.net/downloads/modal/demo/index.html :

.simple-modal, .simple-animated-modal { top: 5vh; max-height: 90vh; }

Hello,

the focus is somewhat not trapped when the content of the modal is an iframe. When you press tab after the last element, the focus goes out. It focuses on the browser controls, address bar, and then back to the modal. Any insights would be very much appreciated!

Hello, I have tested a fix to my problem, and am wondering if it can be implemented. I need to be able to tab to a button in my content first before the X button. Currently the X button takes taborder precedence because it is implemented first in the modal creation. By simply creating the X button html after the content, this can be done. This could be a customized feature if you believe X button should be first in some cases.

Screen readers are reading the x button first, which is not the primary action to be taken, only secondary.

Hello,

I would like to open and close modal(s) through javascript. I mean without the user clicking on a specific button. My question is: is there something that looks like this: open_modal('modal_id);?
I have seen a previous question closed to this one but I think it was about detection which is not the point here.

And thank you for your plugin!

Bonjour @nico3333fr ,
comment me conseillerais-tu de procéder pour ajouter un écouteur d'événement à un élément dans la modale ? Est-ce que Van11y propose, par exemple, une callback une fois ouverte ?…

Merci de ton script et de ton aide,
Bonne journée

Currently, the modal begins to render on DOMContentLoaded. We have some code that wants to use the modal, but the modal won't be immediately launched. As so, we don't want to bother rendering it out initially, so we load the JavaScript with 'async'. This means the script may be loaded after the DomContentLoaded event is fired. As such, we'd prefer to have it run on the window.load event.

Can we have the option to choose to render it on the load event instead of DOMContentLoaded, or just disable the initial render and let us call a render function manually on load?

Hello, I am are looking for the ability to provide aria-describedby on the modal. This establishes a relationship between dialog and text that described them. Additionally provides descriptive information about the dialog once defined.