Accessibility issue for buttons

Steven
(@stevenw721)

11 months, 2 weeks ago
I like how the modal dialog is set up as a modal in the editor to better simulate the functionality that’ll be seen on the frontend, and the triggering ability on a few block elements including buttons is great too.

The main issue that is blocking me from using this plugin is that buttons set up to trigger opening a modal remain as empty link (<a>) tags so they’re not included in the interactive elements that are highlighted when hitting tab on your keyboard.

I was going to set up a demo page for this but then I noticed the exact issue I’m having is present on your demo page at https://light-modal-block.cloudcatch.io/. Try to get to any of the buttons with keyboard only to see what I mean. To fix this, you’d need to make sure the button is an actual <button> and that the trigger modal attribute is on that button instead of the parent div.

So changing this:
```
<div class="wp-block-button" data-trigger-modal="dY4TiQP8ZWX"><a class="wp-block-button__link wp-element-button">Open Modal</a></div>
```
to something more like this:
```
<div class="wp-block-button"><button class="wp-block-button__link wp-element-button" data-trigger-modal="dY4TiQP8ZWX">Open Modal</button></div>
```
The page I need help with: [log in to see the link]

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

Plugin Author David Jensen
(@dkjensen)

11 months, 1 week ago

Hi @stevenw721

Thank you for calling this out, I agree this is definitely something that should be fixed.

I am working on a solution and will report back here with an update.

Plugin Author David Jensen
(@dkjensen)

9 months, 3 weeks ago

@stevenw721 Apologies for the delay on this.

I have a solution prepared which adds role=”button” and tabindex=”0″ to button blocks that trigger a modal which does enable keyboard navigation to the button. With that said, this is specific to the button block. Do you have other use-cases which might not be a button block?

Thread Starter Steven
(@stevenw721)

9 months, 1 week ago

<a role="button" tabindex="0" does work to add it to the tab order and treat it like a button, a <button> would be even cleaner (role and tabindex are default) but if that’s significant more effort to change then this still solves the main issue.

Do you have other use-cases which might not be a button block?

Another case that isn’t solved yet is the example at the bottom of https://light-modal-block.cloudcatch.io/ under the headline “Use inside a Query Loop”. Looks like those are all still setting the trigger on a div so this has the same problem. Rather than adding `role="button" tabindex="0" to the div, I’d suggest a separate button inside the list item that can be used to trigger the modal.

Adding role and tabindex would work, but it’d make it more difficult for screen readers to perceive the individual pieces of content inside that div. For example, doing that to the first modal trigger list item under “Use inside a Query Loop” would read as the following in VoiceOver:

Nunc lobortis risus libero April 18, 2025, button, group, list 3 items

Moderator Support Moderator
(@moderator)

7 months, 2 weeks ago

@jaiji

If you need support then per the forum guidelines please start your own topic.

https://wordpress.org/support/forum-user-guide/faq/#i-have-the-same-problem-can-i-just-reply-to-someone-elses-post-with-me-too

Plugin Author David Jensen
(@dkjensen)

7 months, 2 weeks ago

@stevenw721 Thanks for the input. I’ll go ahead and update the plugin so it converts button blocks that trigger a modal into <button> elements, as in my testing that is indeed the mostly widely supported option especially when triggering the modal via keyboard/screen reader.

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

The topic ‘Accessibility issue for buttons’ is closed to new replies.