[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,
I want to create a tab panel component
So that I can showcase content in an organized, collapsible format that’s inclusive to all users, including those with accessibility needs.

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
https://getbootstrap.com/docs/5.3/components/navs-tabs/#javascript-behavior

AEM Components:

https://www.aemcomponents.dev/content/core-components-examples/library/core-content/tabs.html


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