[MCL-14] Tabs Created: 11/Dec/23 Updated: 06/Feb/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: | Huy Pham |
| 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 "Tabs"
[ ]*
Tab item component is called "Tab panel"
[ ]*
Content inside Tab panels be shown by clicking or touching the relevant tab.
[ ]*
Tab selection animation are as per default Bootstrap behaviour
[ ]*
Up to 5 Tab panels are supported
[ ]*
Only rich text is supported inside Tab panel
[ ]*
Clickable links and anchors are supported inside the Tab panel
[ ]*
Nesting is not supported
[ ]*
One Tab panel can be selected at once
[ ]*
When a tab is active, the relevant tab navigation link is highlighted.
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 Column area of a Row component only.
[ ]*
Up to 5 Tab items can be added to an Tabs parent component. This can be modified by changing maxComponents property
[ ]*
A Tab title and body rich text can be entered via the dialog
[ ]*
Links to other pages, external links and anchors are supported via the RTE
[ ]*
CSS and class can be overridden in the CMS
Accessibility Acceptance Criteria
[ ]*
A default tab that is open when the page is loaded can be configured
[ ]*
Logical tab order should be maintained, ensuring that keyboard users navigate through accordion elements in a coherent sequence.
[ ]*
ARIA landmarks, roles, and states (like
aria-selected) should be implemented for the Tab to convey its status and function to assistive technologies.
[ ]*
Tab panels can be selected and switched using the keyboard. For example, the tab selection links can be slected using the Tab key, and the tabs can be switched using the cursor keys.
[ ]*
Clickable links and anchors inside the tab panel can be selected using a keyboard
|
| Description |
User Story:As a content author, Description:Allows a content editor to create a switchable set of tab panels, with content that switches out depending on the tab that has been selected. Bootstrap documentation: https://getbootstrap.com/docs/5.3/components/navs-tabs/#tabs AEM Components: https://www.aemcomponents.dev/content/core-components-examples/library/core-content/tabs.html |