[MCL-6] Accordion Created: 07/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
[X]* Parent component is called "Accordion"
[X]* Accordion item component is called "Accordion Item"
[X]* Content inside accordion items can be hidden or shown by clicking or touching the header
[X]* Accordion icon and expansion/collapse are animated as per default Bootstrap behaviour
[X]* Up to 10 accordion items are supported
[X]* Only rich text is supported inside accordion item
[X]* Clickable links and anchors are supported inside accordion item
[X]* Nesting is not supported
[X]* Supports all accordion items being expanded at once
[X]* Supports only one accordion item being expanded at once
Documentation Acceptance Criteria
[X]* Contains Title, Description and Examples
[X]* Contains FTL and YAML code
Content Author Acceptance Criteria
[X]* Component can be added to any page template in Column area of a Row component only.
[X]* Up to 10 accordion items can be added to an accordion parent component. This can be modified by changing maxComponents property
[X]* A heading and body rich text can be entered via the dialog
[X]* Links to other pages, external links and anchors are supports via the RTE
[X]* The expand/collapse behaviour can be configured to allow either all accordion items being expanded at once or only one accordion item being expanded at once
[X]* Accordion items can be configured to be open or closed by default
[X]* CSS and class can be overridden in the CMS
Accessibility Acceptance Criteria
[X]* ARIA landmarks, roles, and states (like aria-expanded) should be implemented for the accordion to convey its status and function to assistive technologies.
[X]* Logical tab order should be maintained, ensuring that keyboard users navigate through accordion elements in a coherent sequence.
[X]* Accordion items can be selected, expanded and collapsed using the keyboard.
Date of First Response:

 Description   

User Story:

As a content author,
I want to create a vertically collapsing accordion component
So that I can showcase content in an organized, collapsible format that’s inclusive to all users, including those with accessibility needs.

Description:

Exists in BTK already as a parent template + Accordion item component

Bootstrap documentation:

https://getbootstrap.com/docs/5.3/components/accordion/



 Comments   
Comment by Le Hai Thanh [ 23/Jan/24 ]

Follow https://getbootstrap.com/docs/5.3/components/collapse/#accessibility for bellow AC

ARIA landmarks, roles, and states (like `aria-expanded`) should be implemented for the accordion to convey its status and function to assistive technologies.

 

Comment by Le Hai Thanh [ 25/Jan/24 ]

Hi rtran 

The PR for this ticket has been created, https://git.magnolia-cms.com/projects/LIGHT-MODULES/repos/btk/pull-requests/6/overview

Please help to take a look if you have time.

Thanks,

Thanh Le.

Generated at Mon Feb 12 04:48:36 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.