Lightning Activity Timeline
Salesforce Lightning activity timeline displays each of the user’s upcoming, current, and past activities. Each Activity timeline item receives its width from the parent list. It can consume the full width of the main page area or be placed in the smaller right sidebar.
Lightning Activity Timeline – Accessibility
Text describing the type of timeline item is placed in a span. It is the first element in the timeline item and should be hidden with the slds-assistive-text class. The SVG image does not need the slds-assistive-text class.
Button:
aria-controlsis used to create an association between the button and the details section. If the details section has anid="email-content", then the button should havearia-controls="email-content".- The title of the timeline item can also be used as a button to open the details section. If the details section has an
id="email-content", then the div withslds-timeline__triggershould havearia-controls="email-content"and the click handler. aria-expandedindicates if the details section is open or closed and is read aloud by assistive technology when the button is focused.
Section:
aria-hiddenindicates if the details section is open or closed, and if set totrue, assistive technology hides the details section.
- The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.
Activity Timeline – CSS Classes
The following table lists out the CSS classes for Lightning Activity Timeline component, their usage, and the CSS selectors that these Activity TimelineCSS classes can be used on.
| CSS Class Name | Description |
|---|---|
| slds-timeline | Initializes activity timeline. This CSS class can be used for the elements with CSS selector ul only. |
| slds-avatar__initials | Used for initials inside an avatar. This CSS class can be used for the elements with CSS selector .slds-avatar abbr only. |
| slds-timeline__item_expandable | Create each expandable activity timeline item in a list. This CSS class can be used for the elements with CSS selector .slds-timeline div only. |
| slds-timeline__item_details | Class to show and hide details. This CSS class can be used for the elements with CSS selector .slds-timeline__item_expandable article only. |
| slds-is-open | Toggles the visibility of the timeline item. This CSS class can be used for the elements with CSS selector .slds-timeline__item_expandable only. |
| slds-timeline__item_call | Applies line connector for a call timeline item. This CSS class can be used for the elements with CSS selector .slds-timeline__item_expandable only. |
| slds-timeline__item_email | Applies line connector for an email timeline item. This CSS class can be used for the elements with CSS selector .slds-timeline__item_expandable only. |
| slds-timeline__item_event | Applies line connector for an event timeline item. This CSS class can be used for the elements with CSS selector .slds-timeline__item_expandable only. |
| slds-timeline__item_task | Applies line connector for a task timeline item. This CSS class can be used for the elements with CSS selector .slds-timeline__item_expandable only. |
| slds-timeline__icon | Icon associated with timeline item. This CSS class can be used for the elements with CSS selector .slds-timeline__item_expandable .slds-icon_container only. |
| slds-timeline__details-action-icon | Icon inside of actionable button within an expandable timeline item. This CSS class can be used for the elements with CSS selector .slds-timeline__item_expandable svg only. |