[MCL-8] Carousel Created: 08/Dec/23 Updated: 25/Jan/24 |
|
| Status: | In Progress |
| Project: | Magnolia Component Library |
| Component/s: | Core Content |
| Affects Version/s: | None |
| Fix Version/s: | None |
| Type: | Story | Priority: | Neutral |
| Reporter: | Raymond Tran | Assignee: | Le Hai Thanh |
| Resolution: | Unresolved | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | Not Specified | ||
| Template: |
|
| Acceptance criteria: |
Acceptance Criteria
[ ]*
Parent component is called "Carousel"
[ ]*
Carousel slide component is called "Carousel Slide"
[ ]*
Carousel slides animate when scrolled
[ ]*
Up to 5 Carousel slides are supported
[ ]*
Carousel slides scroll with a pre-determined delay
[ ]*
Carousel slide (Image) is capable of displaying any combination of:
Headline without text Headline with text Headline with button Headline with text and button All the above with or without a background image or video
[ ]*
Video playback is looped
[ ]*
Video playback controls are hidden
[ ]*
The carousel slide elements can be justfied to the left, right or centred
[ ]*
User can scroll the slides using the arrow previous/next controls
[ ]*
User can select / jump to a desired carousel slide using the the the indicator controls at the bottom
[ ]*
User can pause/resume scrolling using Play/Pause button controls
[ ]*
Background image is rendered using the Imaging module with support for focal point and areas, with support for all breakpoints.
[ ]*
If there is only one Carousel slide, hide all controls, constituting this component as a "Hero Banner"
[ ]*
If the data is absent for any element, it is not rendered in the markup
[ ]*
Shows animation when Carousel button is depressed
Documentation Acceptance Criteria
[ ]*
Contains Title, Description and Examples
[ ]*
Contains FTL and YAML code
Content Author Acceptance Criteria
[ ]*
Component can be added to any page template in the Header area only.
[ ]*
Up to 5 carousel slides can be added to a Carousel parent component. This can be modified by changing maxComponents property
[ ]*
Headline is mandatory
[ ]*
Headline, text, button, button style, button internal / external link and background image/video can be entered via the dialog
[ ]*
Configuration of carousel slide elements justification is possible
[ ]*
Video can be selected from DAM or linked from YouTube / Vimeo / Twentythree
[ ]*
Visibility of Play/pause, indicator and previous/next controls, auto-scroll and auto-scroll delay are configurable via the dialog
[ ]*
CSS and class can be overridden in the CMS
Accessibility Acceptance Criteria
[ ]*
Logical tab order should be maintained, ensuring that keyboard users navigate through the elements in a coherent sequence.
[ ]*
A “skip to content” link should be available, permitting users to bypass the accordion if they don’t wish to interact with it.
[ ]*
ARIA landmarks, roles, and states (like
aria-hidden) should be implemented for the carousel to convey its status and function to assistive technologies.
[ ]*
The Carousel can be scrolled left or right using the cursor buttons on the keyboard
[ ]*
All Carousel controls must be selectable and usable with tab and return keys
[ ]*
When a Carousel control has been selected with the keyboard, there should be a visual highlight indicator showing that it has been selected.
[ ]*
When using the Accessible theme, the animations of this component should be minimised via the prefers-reduced-motion media query.
|
| Date of First Response: |
| Description |
User Story:As a content author, Description:Exists in BTK already as a Carousel + item component Bootstrap documentation: https://getbootstrap.com/docs/5.3/components/carousel/ |
| Comments |
| Comment by James Hirka [ 11/Dec/23 ] |
|
Should we support videos for V1 carousels? |
| Comment by Raymond Tran [ 11/Dec/23 ] |
|
I think so because a Video component is already included in V1. |