Table of Contents

a title - the title text can wrap up to two lines of text, but it is not recommended (always keep it short and to the point). If the title exceeds two lines it will be truncated, showing a tooltip on hover.
a chevron icon (included in the Verint Font Icon).
In case the content was changed, a mark (blue dot) is added to the header of the section.
In case the entire section is selectable, a Check Box will appear in the header, before the title.
In case there is a warning or an error on a section, an icon will appear on the right side of the header.

...

State	Image	Comment
Changed content mark
Section header with checkbox
Section header with warning

Interaction

You can click on any part of a section header to select (open) it. This has two exceptions:
- When a checkbox is shown, clicking it selects/deselects the checkbox.
- When a warning icon is shown, clicking it opens a tooltip.
When opening a new section, the previously-open section should close automatically.
In case the title is longer than its container, hovering over a section header should show a tooltip with the full name of the section header.

...

In case the accordion contains a long list, consider using Search within the section.
Use clear labels: they need to clearly describe the hidden content.

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Keyboard	Description
Tab	Moves focus to the next focusable element.
Shift + Tab	Moves focus to the previous focusable element.
Space	When focus is on the accordion header of a collapsed section, expands the section.
Enter	When focus is on the accordion header of a collapsed section, expands the section.
Esc	N/A
Arrows	Down When focus is on an accordion header, moves focus to the next accordion header. When focus is on last accordion header, moves focus to first accordion header. Up When focus is on an accordion header, moves focus to the previous accordion header. When focus is on first accordion header, moves focus to last accordion header.
Home	When focus is on an accordion header, moves focus to the first accordion header.
End	When focus is on an accordion header, moves focus to the last accordion header.

Zeplin link

Screen thumbnail

...