Accordion Item

Overview

• The Dynamic Accordion Item is a collapsible section inside a Dynamic Accordion container.
• Each item represents one expandable or collapsible segment with its own title, content, and layout.
• When expanded, the item displays its content, and when collapsed, only the header remains visible.

Specs

Tokens

Token	Description
displayName	Display name shown in the structure panel
titleTranslations	Localized title text for the header
disabled	Controls if the item can be expanded or collapsed
elements	Components rendered inside the item when expanded
layout	Arrangement of elements (horizontal or vertical)
visibilityPolicySetId	Determines visibility based on policy sets
dataTestId	Identifier for automated testing
events	Configurable component events
ON_INIT (Events)	Event triggered when the item is initialized
ON_DESTROY (Events)	Event triggered when the item is removed

Structure

(Configured in General Properties)

• displayName – Sets the display name of the component shown in the structure panel. For example, "Product Details" allows for easy identification of this accordion item in the component structure.

(Configured in Visual Properties)

• elements – Contains all components to be rendered within this accordion item when it is expanded. This array can include any dynamic components like forms, fields, images, or other UI elements that form the content of the accordion item.
• layout – Defines the layout arrangement of elements within the accordion item. Options include "horizontal" (elements arranged side by side) or "vertical" (elements stacked on top of each other). For example, using "vertical" layout provides a clean presentation for form fields in an accordion item.

Styling

(Configured in Visual Properties)

• title – Defines the header text displayed for the accordion item. It represents the visible label that users click to expand or collapse the item.
  • titleTranslations – Sets the title text displayed in the accordion item header with support for multiple languages. For example, {"en-US": "Product Specifications", "de-DE": "Produktspezifikationen"} ensures proper localization of the header text.
• disabled – Controls whether the accordion item can be expanded or collapsed. When set to true, the item appears grayed out and cannot be clicked.

Actions & Variants

(Configured in Events)

• events – Configures the events that the component can trigger and respond to:
  • ON_INIT – Triggered when the accordion item component is initialized. Can be used to perform setup operations like loading default data or setting initial states.
  • ON_DESTROY – Triggered when the accordion item component is removed from the DOM. Useful for cleanup operations and releasing resources.

Tests

(Configured in Testing hooks)

• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "product-details-accordion-item" allows test scripts to reliably locate this component.

Authorization

(Configured in Authorization)

• visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting it to "adminOnlyPolicySet" restricts the accordion item to users with admin privileges.

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11521-150180&t=iosNC2AkSTGs5lMh-1
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id5/1-accordion

Guidelines

Usage

• Use an accordion item to progressively disclose a titled block of content that’s only needed on demand. Configure the visible header with title / titleTranslations.
• Keep the header copy short and action-oriented (sentence case). Localize the title; don’t hardcode strings.
• Prevent interaction when the section must not open (e.g., prerequisites not met) by setting disabled: true.

Sizing & Layout

• Use vertical layout for forms or sequential reading; use horizontal for short, side-by-side atoms (e.g., an icon next to a value).
• Keep related controls/content together by placing them within the same item and ordering them in elements.
• Name the item meaningfully for authors via displayName so it’s easy to find in structure panes.

Visibility & Authorization

• Hide sensitive sections for unauthorized users with visibilityPolicySetId.
• Prefer hiding over disabling when users shouldn’t know a section exists; prefer disabling over hiding when discoverability is required.

Content & Localization

• Provide localized titles for every target market using titleTranslations.
• Keep titles concise (aim for a single line where possible) with title / titleTranslations.

Dos & Don’ts

Do	Don’t	Article setting(s)
Localize the header text for each language.	Hardcode an English-only title.	titleTranslations
Disable the item while prerequisites load.	Let users open a section that can’t function yet.	disabled
Use vertical layout for stacked form fields.	Force fields into horizontal rows that hinder reading.	layout
Keep the header short and clear.	Put long descriptions in the header.	title, titleTranslations
Clean up resources when the item goes away.	Leave listeners/timers running after removal.	events.ON_DESTROY
Hide admin-only sections entirely for standard users.	Show the section and rely on content to say “no access.”	visibilityPolicySetId
Use stable test IDs for automation.	Select the item by its visible title in tests.	dataTestId

Accessibility

• Localize visible header text so assistive technologies announce accurate labels (titleTranslations). Keep them concise and in plain language.
• Prevent non-functional interaction by disabling the item until ready (disabled).
• Reduce cognitive load with appropriate content orientation (layout).
• Ensure deterministic automation and QA checks that support accessibility testing (dataTestId).
• Prefer hiding unauthorized sections to avoid confusing content (visibilityPolicySetId).