Scrollable containers

scrollwrapper.js

(function () {
  /* Scroll wrapper

      Finds all `.scroll-wrapper` elements, adds a `role="region"` and `aria-label="Scrollable content"` attribute,
      and sets up a resize observer to add a `tabindex="0"` attribute if the table is scrollable.

      Note: Chrome and Firefox now automatically make elements with `overflow` keyboard-focusable, so the script
      here is mostly redundant (though it does add nice `role` and `aria-label`); Safari, however, does not,
      so it's still needed.

  */

  const scrollWrapperResizeObserver = new ResizeObserver((entries) => {
    for (const entry of entries) {
      if (entry.target.scrollHeight > entry.target.clientHeight || entry.target.scrollWidth > entry.target.clientWidth) {
        entry.target.setAttribute('tabindex','0');
      } else {
        entry.target.removeAttribute('tabindex');
      }
    }
  });

  window.addEventListener('DOMContentLoaded', (event) => {
    const scrollers = document.querySelectorAll('.scroll-wrapper');
    scrollers.forEach((scrollWrapper) => {
      if (!scrollWrapper.hasAttribute('role')) {
        scrollWrapper.setAttribute('role','region');
      }
      if (!scrollWrapper.hasAttribute('aria-label')) {
        scrollWrapper.setAttribute('aria-label','Scrollable content');
      }
      scrollWrapperResizeObserver.observe(scrollWrapper);
    });
  });
})();