[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, 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. |