New and improved script version #11

Open
HugoGiraudel opened this Issue Feb 8, 2016 · 4 comments

Comments

Projects
None yet
2 participants
@HugoGiraudel

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鈥檚 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?

@HugoGiraudel HugoGiraudel changed the title from New script version to New and improved script version Feb 8, 2016

@goetsu

This comment has been minimized.

Show comment
Hide comment
@goetsu

goetsu Feb 9, 2016

Hi, there is some issue in your demo, the focus trap inside the modale isn't good :

  • when you use shift tab
  • when you use tab the close button just get focused once

Furthermore, there is also an issue if for some reason after opening a modal the user use keyboard shortcut to access the browser interface (like the search feature or adress bar) then go back to the page. In that case, the focus go under the modal window

goetsu commented Feb 9, 2016

Hi, there is some issue in your demo, the focus trap inside the modale isn't good :

  • when you use shift tab
  • when you use tab the close button just get focused once

Furthermore, there is also an issue if for some reason after opening a modal the user use keyboard shortcut to access the browser interface (like the search feature or adress bar) then go back to the page. In that case, the focus go under the modal window

@HugoGiraudel

This comment has been minimized.

Show comment
Hide comment
@HugoGiraudel

HugoGiraudel Feb 9, 2016

when you use shift tab
when you use tab the close button just get focused once

Not sure I get what the problem is here.

when you use shift tab
when you use tab the close button just get focused once

Not sure I get what the problem is here.

@goetsu

This comment has been minimized.

Show comment
Hide comment
@goetsu

goetsu Feb 9, 2016

  • go to the open modal button,
  • activate it with space key,
  • the focus go to the close button inside the modal then use tab key
  • the focus go to the links under it but when you reach the last one "trap" and hit tab key once again the focus go back to the first link instead of going back to the close button
  • then try shift tab the focus go back to the close button and hit shift tab once again the focus go to "focus" instead of "trap"

I'm using last version FF on osX

goetsu commented Feb 9, 2016

  • go to the open modal button,
  • activate it with space key,
  • the focus go to the close button inside the modal then use tab key
  • the focus go to the links under it but when you reach the last one "trap" and hit tab key once again the focus go back to the first link instead of going back to the close button
  • then try shift tab the focus go back to the close button and hit shift tab once again the focus go to "focus" instead of "trap"

I'm using last version FF on osX

@HugoGiraudel

This comment has been minimized.

Show comment
Hide comment
@HugoGiraudel

HugoGiraudel Feb 9, 2016

Non reproducible on Chrome. Investigating on the Firefox case right now.

Furthermore, there is also an issue if for some reason after opening a modal the user use keyboard shortcut to access the browser interface (like the search feature or adress bar) then go back to the page. In that case, the focus go under the modal window

This should be fixed.

Non reproducible on Chrome. Investigating on the Firefox case right now.

Furthermore, there is also an issue if for some reason after opening a modal the user use keyboard shortcut to access the browser interface (like the search feature or adress bar) then go back to the page. In that case, the focus go under the modal window

This should be fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment