Steven

<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