YALB-1319 - Bug: Image Gallery - caption cut off | YALB-1473 - Bug: Image Gallery issues with pagination on different browsers and devices

[joetower]

YALB-1319 - Bug: Image Gallery - caption cut off | YALB-1473 - Bug: Image Gallery issues with pagination on different browsers and devices

Description of work

• Adds fix for the modal gallery pager in Firefox
• Adds toggle to caption text. Sets a character limit to 80 characters

Testing Link(s)

• Navigate to the Interactive Gallery Component Story

Functional Review Steps

• Verify that, if caption text is present on a slide, it will truncate to 100 characters in JS, and truncate to 1 line length using CSS line-clamp (this way we can better handle responsiveness while still checking if we need to display the expand arrow) and an expand arrow button will appear.
• When clicked, the expand button will animate and the caption text will fill in with the remaining text and a dark background will render behind the full caption
• Note: in Drupal, caption headings have a soft limit of 80 characters. If both a caption heading and a caption content are present, the heading will also use line-clamp to keep it to 1 line. If only a heading is present the expand button will not appear.
• Verify it is usable at different breakpoints. You may want to open the component in story mode to remove some UI elements: https://deploy-preview-279--dev-component-library-twig.netlify.app/iframe.html?id=organisms-galleries--interactive-grid&viewMode=story. I tested on a physical iPhone (12 running iOS 16.3.1 - Safari), a Google Pixel 7 Pro (Chrome and Firefox), an iPad running iPadOS 16.5.1 (Safari)
• Using different browser: Firefox, Safari, Chrome, test and make sure the modal gallery pager is always present
• Verify the mobile pager correctly renders current slide number / total slide number (2/8)

yalb-modal-gallery-toggle.mp4

yalb-modal-gallery-toggle-mobile.mp4

Design Review

• Verify the designs match the Figma Designs

Accessibility Review

• Verify the component meets Accessibility requirements

Notes

• The implementation doesn't 100% match the Figma animation, but it is close.
• If you can think of a better way to conditionally show the toggle button than what I have here (checking for maxLength for the truncation), please let me know.

[netlify]

✅ Deploy Preview for dev-component-library-twig ready!

Name	Link
🔨 Latest commit	90c66d3
🔍 Latest deploy log	https://app.netlify.com/sites/dev-component-library-twig/deploys/64da592f970d060008c9b64b
😎 Deploy Preview	https://deploy-preview-279--dev-component-library-twig.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[dblanken-yale]

Very nice work! All is working for me. The expand/collapse works great. Offhand I can't think of a better way to do it and it works on multiple devices I've tried at different screen sizes. If I think of one or see something elsewhere online I'll let you know.

[codechefmarc]

Desktop and different browsers all worked well for me too. I set a slide to not have enough to engage the "..." and arrow expander on desktop:

"Cupcake ipsum dolor sit amet. Oat cake cupcake muffin dragée tart pie sweet roll."

However, on a very small screen (iPhone SE 375px wide) it cuts off the text a little bit:

Landscape on iPhone will cut the caption out completely:

And when there is enough text for an arrow to appear, iPhone SE does show the arrow and it is tappable, but it's too low on the screen.

Small screens are tricky!

[joetower]

@codechefmarc This should be ready for another look, please.

I reduced the font-size of both the heading and the content if on a very small screen or on a small screen and in landscape mode. I also increased the row count the content can use when in landscape mode.

[codechefmarc]

Thanks for the fixes, looks great on Storybook, so I'm going to approve. However, I can't get this to show up in Drupal. (It did for my previous tests...) In Drupal, it's still showing the text and you can scroll the text but the arrow and show/hide doesn't seem to show up. Not sure if that is a blocker or if we need to do some additional wiring?

[joetower]

@codechefmarc In my experience, testing this in Drupal, none of the existing captions were long enough to trigger the expand/collapse functionality.

[kara-franco]

Very nice! Animations respected reduced motion, good use of semantic HTML-button and the states are announced via screen reader.

• My only suggestion is to use aria-expanded on the button to announce state change, just swap out the <span> that updates with ARIA on the button that updates true/false. This will be more reliable for assistive tech.

[joetower]

@kara-franco Thank you!

I pushed up a fix to add aria-expanded to the button and removed the span. I also have aria-expanded on the media-grid-modal__content element. Is that silly/confusing or helpful (beyond using it for styling purposes) for screen readers?

Please take another look.

https://deploy-preview-279--dev-component-library-twig.netlify.app/iframe.html?args=&id=organisms-galleries--interactive-grid&viewMode=story

[kara-franco]

Very nice!! A11y approved.

[github-actions]

🎉 This PR is included in version 1.34.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀