Image Gallery Demo

[zoltan-dulac]

Image Gallery component demo. Image Galleries need to be coded a particular way to work properly.

Solution: Make sure the following requirements are in place:

• Side arrows do not get keyboard focus.
• Pagination dots below the carousel get keyboard focus. They must be coded as buttons. Their labels should be "Display photo 1 of X"
• Activating the button with the keyboard moves the panel into view THE SAME WAY AS CLICKING THE MOUSE ON AN ARROW BUTTON.
• Each image in the carousel must have a descriptive alt attribute. When the image moves into view, at the same time, inject the alt attribute content into an empty div with an aria-live="polite" attribute. Since the content within the div is changing, the screen reader will announce the alt attribute.

Use the Shiseido image gallery as a starting point:
https://www.shiseido.com/us/en/colorgel-lipbalm-9990000000180.html?cgid=lips

Don't use any images from a real company -- they are copyrighted.
The large images should have alt text generated from ChatGPT 4.0 Turbo with Images.

Make a gallery of images from here: https://commons.wikimedia.org/wiki/Main_Page