Making PSWP accessibility friendly

[lnfel]

Just encountered the same issue with #1717 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! 🎉

[dimsemenov]

<li> is not an interactive element, you should try using anchor or button elements for this type of interaction. Otherwise, you get weird issues like you mentioned, where you have to manually program things like keyboard control.

If you're in a situation where you have to nest anchor elements into each other, you probably need to rethink the dom structure.

Also, you don't have to use a hidden anchor element just to let PhotoSwipe know which data to use, you can use domItemData filter:

const lightbox = new PhotoSwipeLightbox({
  gallery: '.project-grid',
  children: 'li.project-card',

  pswpModule: PhotoSwipe
});

lightbox.addFilter('domItemData', (itemData, element, linkEl) => {
  if (element) {
    itemData.src = element.dataset.imageUrl;
    itemData.width = Number(element.dataset.imageWidth);
    // itemData.height = etc...
  }

  return itemData;
});

lightbox.init();

<li data-image-url="" data-image-width="" ...

https://photoswipe.com/data-sources/#custom-html-markup

[lnfel]

button sounds perfect, gonna use domItemData now.