Gallery pattern

[mjbp]

The Storm modal gallery component (https://github.com/stormid/components/tree/master/packages/modal-gallery) needs an update, there are elements of the implementation that could be more accessible.

• does the dialog element need to be server-rendered?
• the navigation needs improvement
• announcing slide changes needs to improvement
• revisit gallery mark up
• dialog label?

The Storm modal and modal patterns are good references for modal best practice - https://github.com/stormid/components/tree/master/packages/modal
https://storm-ui-patterns.netlify.app/patterns/modal-search/

[mjbp]

https://github.com/stormid/components/tree/feature/gallery
Work underway on a new Gallery component that can be in a modal (or not), modal dialog functionality would be taken care of 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
• 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 be accessible (ref - https://www.w3.org/WAI/tutorials/carousels/)
  • region with heading (e.g. section and h2)
  • announce the current item (live region) e.g. '1 of 10'
  • use lis
  • use button and click event (click is dispatched on button on space/enter keydown)
  • focus the selected item (li)
  • no auto-play (and not included as an option either!)
  • aria-hidden on non-active slides