Gallery component

[mjbp]

A new Gallery component to replace the Modal Gallery. The new gallery component can be in a modal or not with modal functionality provided by the separate @stormid/modal module.

Rough sketch spec:

• UI is server-rendered rendered except images which are lazy-loaded
• gallery does not expect or depend upon any content other than an image for each item
• gallery should not load all images at once (current image + indexes on each side), unless preload option is set
• state and content is described by data-attributes on the server-rendered DOM
• supports being on the page or in a modal - modal functionality should use a different package (e.g. @stormid/modal), and the gallery would be server-rendered into the modal dialog
• API to defer image loading/DOM initialisation for use-case (e.g. in a modal, behind a tab, far down the page) where the gallery is not visible
• API to navigate to a specific image (by index) so the gallery can show any image at a specified point
• forward/back navigation via buttons
• option to prevent circular nav?
• fullscreen button using requestFullscreen API
• gallery should support imgs with src, srcset, sizes, and picture tags using sources
• need to support a loading state (image/svg/element) that would be replaced when an image is loaded
• need CSS hooks for loading and loaded states
• it should be style agnostic, with no animations, sliding or otherwise (to remove the need to support swiping), however it would be good to have basic CSS included as reference for dealing with the position of images of different dimensions
• individual items must be addressable and update the URL when navigated to (so they can be shared), this should (probably) be configurable (on/off)
• gallery should dispatch custom events? gallery.change?
• gallery should be accessible (ref - https://www.w3.org/WAI/tutorials/carousels/)
  1. region with heading (e.g. section and h2)
  2. announce the current item (live region) e.g. '1 of 10'
  3. use lis
  4. use button and click event (click is dispatched on button on space/enter keydown)
  5. focus the selected item (li)
  6. no auto-play (and not included as an option either!)
  7. aria-hidden on non-active slides