Open ianthedev opened 3 years ago
Just encountered the same issue today, since the container element is an acnhor tag it messes up the announcements by assistive technology. I played around a bit and found out that we can use other element as the children
of gallery
:
<ul class="project-grid">
{#each projects as project}
<li on:keydown={triggerPSWP} tabindex="0" aria-label="{project.title} Project: {project.description}" class="project-card">
<!--
Hiding the actual pswp anchor element as the first child of our
registered pswp children element (project-card). Hidden for both screen reader and visual users
-->
<a href={project.imageURL} target="_blank" rel="noreferrer" data-pswp-width="2500" data-pswp-height="1200" aria-hidden="true" class="pswp-link hidden">{ project.title }</a>
<!-- Other content here -->
</li>
{/each}
</ul>
Our pswp gallery is the element with a class of project-grid
and the children are li
elements with a class of project-card
. By default PSWP tries to look inside of the children for the very first anchor element, this is why it is important we ad the hidden anchor link as the very first child of the registered pswp children element.
Now if we click on the li
element, it will trigger PSWP and reveal the image and animate it on screen. But one issue here is that PSWP will only listen for click events and not keyboard events on the registered element and only anchor element can do navigation when pressing Enter or Space key which PSWP listens to. This is where we add tabindex and attach our custom keydown listener on li
element as denoted by the markup on:keydown={triggerPSWP}
, below is the code to trigger a click event on the hidden anchor link:
function triggerPSWP(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault()
const pswpTrigger = event.target
if (pswpTrigger instanceof HTMLElement) {
const pswpLink = pswpTrigger.querySelector('.pswp-link')
if (pswpLink instanceof HTMLAnchorElement) {
pswpLink.click()
}
}
}
}
With this PSWP is now accessible friendly! 🎉
After initializing the plugin, links are still look like links to assistive technologies. Assistive technologies do not know these links will trigger a dialog.
So the links need
role="button"
andtabindex="0"
and thehref
attributes would need to be removed.