Keyboard Focus On Links

Hello @sincityserver:

The key to targeting a class attribute in the trigger is to add it to your site theme stylesheet, not the Popup Maker plugin stylesheet. Based on the CSS ‘cascade’, if you add your :focus pseudo-element to the plugin stylesheet, a later pseudo-element may fire in the theme stylesheet that overrides any changes you make in the plugin stylesheet. In short, your changes may be correct, but you’re making them too soon in the styling process.

Did you know that you can copy and paste all the core and theme styles from our plugin to add them to your theme stylesheet?

From the WP Admin, go to ‘Popup Maker’ >> ‘Settings’ >> ‘Assets (tab)’ >> ‘Show Popup Maker CSS (button)’. Copy the Core and whatever plugin theme styles you want, and paste them to the end of your active theme stylesheet.

Inspect the CSS and add whatever :focus pseudo-element(s) you need to the plugin styles within the theme stylesheet.

@yogaman5020

It seems the links aren’t anchor tags, but <span>’s, so they aren’t focusable, meaning the :focus pseudo-element has no effect. Is there a way to make them anchor tags?

If not, maybe there is a way to add the tabindex attribute to the <span>’s to make them tab-focusable, however the plugin does not expose this option. It seems the right way to do it would require parsing the HTML WordPress generates for a page and either adding the tabindex attribute to the spans or replacing them with anchor tags. Is it possible to write a sort of PHP middleware function for WordPress to run all pages through to do this, or (feature request) could this be added to the plugin?

• This reply was modified 6 years, 11 months ago by modalman.
• This reply was modified 6 years, 11 months ago by modalman. Reason: Fix formatting
• This reply was modified 6 years, 11 months ago by modalman. Reason: Fix formatting 2
• This reply was modified 6 years, 11 months ago by modalman. Reason: Fix formatting 3

Hello @modalman:

Can you provide a url (including permalink) on which the popups you describe are activated? If you don’t want to post the url in this forum, come over to https://wppopupmaker.com/support and post it there.

I need to inspect the page markup on your site to understand what you’re talking about. Before you and I discuss any further activity (i.e. solutions / workarounds), I need to fully understand the problem.

• This reply was modified 6 years, 11 months ago by Robert Gadon.

@yogaman5020:

Here is the URL:
https://aarsi.ccsd.net/accountability/nspf/

Hello @modalman @sincityserver:

Another plugin user contacted us about 2 months ago with a concern about keyboard accessibility inside a popup. Our plugin developer refactored the Popup Maker plugin code for an upcoming version update and addressed the issue. Please install the following plugin beta version in a clean test site to test for yourself.

https://docs.wppopupmaker.com/article/335-test-popup-maker-with-a-fresh-wordpress-installation

https://www.dropbox.com/s/htb566enpmv541u/popup-maker_v1.6.7-beta.2.zip?dl=0

Let us know if your testing confirms that the beta works as intended.

• This reply was modified 6 years, 10 months ago by Robert Gadon.

@yogaman5020

I tested 1.6.7-beta.2 and am able to change the HTML tag to an anchor element and add a custom CSS class, but unfortunately without an href attribute on the anchor tag, it still isn’t focusable.

I suppose we could use JavaScript on our site to add href=”#” to the a tags, but that would involve editing our site’s theme which we are trying to avoid.

The ability to change the HTML tag and add custom CSS classes is nice, but it seems this has to be done for each popup trigger. It would instead be nice to have a site-wide setting in the plugin to make it output anchor tags for popup triggers by default (instead of spans), as well as a site-wide setting to add href=”#” to the anchor tags. These defaults could then be overridden for an individual popup trigger.

The reason for this logic is that we have a lot of editors who might like to add popups to their pages, and they are probably not going to change the HTML Tag or adjust other options for each popup trigger that they add, so it would be good to be able to set these options as site-wide defaults.

Might your team be able to implement such a feature?

• This reply was modified 6 years, 10 months ago by modalman.

Hello @modalman @sincityserver,

If you want to take this matter up with the plugin developer directly, please repost to https://github.com/PopupMaker/Popup-Maker/issues. He and his team have actually done a lot work on making our plugin keyboard accessible. It’s not an area in which I have a lot of expertise. He’s the authority in this matter that you need to contact.