The product carousel and photo gallery now have a name for screen readers
FixedThe product carousel and the photo gallery on a product detail card, and the slides inside them, had no name for a screen reader to announce. When a keyboard user presses an arrow button through to the end of the row, focus moves onto the carousel itself: until now, a block with no name. The rest of what these two blocks expose to a screen reader was in English whatever the chat's language: the words "carousel" and "slide", and the "Previous slide" and "Next slide" labels of the arrow buttons.
Both blocks and their slides now carry a name:
- The product carousel is named by how many products it shows, such as "4 products".
- The photo gallery is named "Photos of" followed by the product title, such as "Photos of Merino Roll-Neck Sweater".
- Each slide, a product card or a photo, is named by its position, such as "2 of 4".
A product detail card with a single photo no longer exposes it as a carousel of one: the photo is a plain image, read by its alt text (the product title when the photo has none). The gallery's name and the word "carousel" only apply with two photos or more.
These names, the words "carousel" and "slide" and the arrow labels now follow the chat panel's language, in all six chat languages. A shopper chatting in French gets "4 produits", "2 sur 4", "carrousel", "diapositive", "Diapositive précédente" and "Diapositive suivante". This applies on your storefront's chat panel, on the public link, and in the playground, where it follows the Test language. In a conversation's transcript in the dashboard, it follows your own dashboard language instead.
Each block is exposed as a group, not as a landmark, so a conversation that shows several product blocks doesn't add one entry per block to a screen reader's list of page landmarks.
Nothing changes on screen: the cards, photos and arrows look and work as before, and there is nothing to set up on your side.