Fix image carousel accessibility issues

[spencercanner]

Why

It should be possible to interact with the carousel using a mouse, or keyboard, and visible changes should be communicated to screen readers. It should also be possible to interact with the carousel in high contrast mode.

How

Carousel

• Add aria-label="Image gallery" and aria-roledescription="Carousel" to the image/button container to better communicate the carousel element to screen readers

Carousel buttons

• Move the carousel buttons below the image so their visibility is not reliant on the image size/color
• Add visible focus state to the carousel buttons
• Update the aria labels of the
• Update carousel button arrows to use a hardcoded SVG instead of pulling from an image from a remote source
  • Reduces the number of network calls required
  • The fill: currentColor will allow the SVG colour to be updated automatically in high contrast mode so it is visible

Progress / image changes

• Add visually hidden text to the carousel to communicate the index of the current image
  • Add in a helper function to the product class to generate this text using a new string template replacement helper
  • The helper will allow placeholders to be replaced in a given strings, given a map of replacements keys and values
• Wrap image and visually hidden text in a div with aria-live="polite" and aria-atomic="true" so screen readers announce image details when it changes

Thumbnail gallery

• Wrap list of images in a <ul /> and each image in a <li /> to reflect the semantic structure of the items
• Update the aria-label of the thumbnail to better communicate what the link does - Load image into gallery viewer.
• Add aria-current="true" to the list item that corresponds to the image currently being displayed in the carousel

To 🎩

Setup

• Create a buy button for a product with multiple variants that have their own images (ex. a t-shirt with different coloured variants)
• Ensure the images have their own distinct alt text
• Update the config: product > contents > img: false, product > contents > imgWithCarousel: true, and product > buttonDestination: modal

Product carousel - mouse

• Verify that the carousel arrow buttons appear below the image, and clicking the buttons changes the image and the selected thumbnail
• Verify that the layout of the thumbnail images is not affected by the new list markup, and clicking a thumbnail changes the main image
• Verify that updating the selected variant updates the main image to the variant's image

Modal product carousel - mouse

• Verify that the carousel arrow buttons appear below the image, and clicking the buttons changes the image and the selected thumbnail
• Verify that the layout of the thumbnail images is not affected by the new list markup, and clicking a thumbnail changes the main image
• Verify that updating the selected variant updates the main image to the variant's image

Product carousel - keyboard

• Verify that the carousel buttons can be tabbed to, and have a visible focus state
• Verify that pressing space/enter when focused on the carousel button updates the main image and selected thumbnail, and focus remains on the button
• Verify that each thumbnail can be tabbed to and has a visible focus state
• Verify that pressing space/enter when focused on a thumbnail updates the main image, and the focus stays on the thumbnail

Modal product carousel - keyboard

• Open the modal
• Verify that the carousel buttons can be tabbed to, and have a visible focus state
• Verify that pressing space/enter when focused on the carousel button updates the main image and selected thumbnail, and focus remains on the button
• Verify that each thumbnail can be tabbed to and has a visible focus state
• Verify that pressing space/enter when focused on a thumbnail updates the main image, and the focus stays on the thumbnail

High contrast mode

• Verify that the carousel arrows are visible in product carousel and modal product carousel