Modal window tab/focus priority

  • Resolved jmgreen

    (@jmgreen)


    8 years, 6 months ago

    Hi Popup Maker Folks,

    I really like your plugin and in the testing/review phase. There is an accessibility challenge that I would like to see if you have a solution to. Presently the popup modal window will not receive priority focus or priority keyboard tabbing once it displays. For example, I can keyboard tab to a link on a base website age, and on keyboard Enter it triggers your wonderful popup, but then the tab flow does not continue within the modal window. Any tabbing/focus that you try when the modal window occurs in the background such as to the “skip to content” or to the website’s navigation. You can even see the tabs focusing behind your transparent modal background and via the (Chrome, Firefox) browser’s referencing the tab-focused links in the lower left.

    I did try adding tabindex attributes to divs in your template: popup-maker/templates/popup.php. They only work when I physically click the mouse within the div; again I’m unable to get there via keyboard tabbing.

    Any advice or assistance will be greatly appreciated. If this is something that may be part of a future update that would be awesome; I would like to continue using your plugin. I’m a web developer that supports literally hundreds of financial institution websites that could potentially use your plugin including the paid version or extensions. We have the mandate to update all these websites to meet Web Content Accessibility Guidelines WCAG 2, Level AA. So far your plugin does provide a lot of accessibility features (noting the aria attributes), but the ability to focus-tab within the modal is a must have.

    I’ll look forward to your prompt reply and thank you for your attention and any effort!

    Sincerely, Jeff Green

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Daniel Iser

    (@danieliser)

    8 years, 6 months ago

    @jmgreen – Hmm. Strange because we have addressed this some time ago: https://github.com/PopupMaker/Popup-Maker/blob/master/assets/js/src/site/plugins/pum-accessibility.js

    I will retest it this week to be sure we didn’t break it along the way with other changes, but it was self contained and shouldn’t have been impacted based on my look over it just now.

    I see we store the focused item on open, then set popups first focusable element as the focused element, then reset it when you close.

    We also trap the tab key and if it try to focus outside the popup we force it back to the first element. I’m not quite sure why it wouldn’t be working. I put in dozens of hours working through all the accessibility issues and testing so hopefully its simple.

    Thread Starter jmgreen

    (@jmgreen)

    8 years, 6 months ago

    Thanks for your prompt reply daneiliser. All your efforts and your time investment are greatly appreciated! If it helps, I’ll send you the site/page example. As I cannot share the dev site in this public forum, I’ll send it via your website’s contact form.

    I’ll look forward to any news and Thank You! Jeff

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Modal window tab/focus priority’ is closed to new replies.