Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

Hello @SAP/ui5-webcomponents-topic-b,

Please take a look at this issue/feature request for additional indicators (other than color) for icons in the timeline component.

Best Regards,
Konstantin

Hello @durgaprasad1995,

How are those icons from the provided screenshot colored?
Could you edit the sample, so the icons are colored.

In the openui5 project there is a property called status for the timeline item. Form there an application developer could set for example an "Error", "Information", "Success" status, which has accessibility semantics.
There is no such property for the ui5-timeline-item component though.

Best regards,
Boyan

HI @unazko

Here is the information on how our implementation in React using UI 5 Web component

import {
Timeline,
TimelineItem,
TimelineLayout,
TitleLevel,
} from "@ui5/webcomponents-react";

Our accessibility team expects that the icon should be announced so that users can understand

@unazko There is no update on this ticket

Hi @durgaprasad1995,

Please checkout the following sample: https://stackblitz.com/edit/github-pwfft8-hktoie?file=index.html
and edit if possible.
I suspect that in the provided screenshot the icons are colored via CSS.

If that is the case then this would be a feature request for a state property, which would give the application developers the possibility to change the color and accessibility semantics of those icons.

Hi @unazko You are correct we are using the CSS to add the color

Here is the code for that color adding
useEffect(() => { const justificationTimelineActiveList = Array.from( document.getElementsByClassName( "justification-timeline-list-active" ) as HTMLCollectionOf<HTMLElement> ); justificationTimelineActiveList?.forEach((element) => { const [list] = ( element?.shadowRoot?.childNodes[1] as HTMLElement )?.getElementsByClassName("ui5-tli-icon"); list?.setAttribute("style", "color:#187D08 !important;"); }); const justificationTimelineInactiveList = Array.from( document.getElementsByClassName( "justification-timeline-list-inactive" ) as HTMLCollectionOf<HTMLElement> ); justificationTimelineInactiveList?.forEach((element) => { const [list] = ( element?.shadowRoot?.childNodes[1] as HTMLElement )?.getElementsByClassName("ui5-tli-icon"); list?.setAttribute("style", "color:#BB0000 !important;"); }); });

Here is the code for the Timeline Element

<Timeline layout={TimelineLayout.Vertical} style={theme.uiFullWidth}> {justificationList?.map( /* istanbul ignore next */ (list) => ( <TimelineItem key={list?.id} icon="icon-activity-items" name={concatThreeValueFunction( list?.createdBy?.firstName, list?.createdBy?.lastName, list?.createdBy?.uniqueName )} subtitleText={replaceEmptyDateWithHyphen( list?.createdTimestamp )} className={ list?.isActivationJustificationText ? "justification-timeline-list-active" : "justification-timeline-list-inactive" } style={{ wordBreak: "break-all", }} > <div>{list?.justification}</div> </TimelineItem> ) )} </Timeline>

Hi @durgaprasad1995,

We already have a design according to which we could provide semantic meaning to the ui5-timeline-item's.
According to the design we'll have announcement for a predefined states of the items ("Error", "Information", "Success" and "Warning").

The provided colors from the code snippet are:

• #187D08 corresponds to green ("Success" semantics)
• #BB0000 corresponds to red ("Error" semantics)

I guess custom colors aren't part of your requirement and we could use the already existing design.
We need to provide a new property like the status property in the openui5 timeline item control.
This property will be used to set one of four predefined states indicating an icon color and accessibility semantics.

Moving the request for planning.

Okay Thanks a lot Once it is updated let me know the version of it

Hi @unazko

Ques:-We already have a design according to which we could provide semantic meaning to the ui5-timeline-item's.
Ans: I don't see the property to add semantic meaning to the ui5-timeline-item's. can you please help us

https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/data-display-timeline--docs

Hi @unazko any update

Hi @durgaprasad1995,

@unazko meant that it's expected to have a design for that since it's implemented in Classing UI5: https://ui5.sap.com/#/api/sap.suite.ui.commons.TimelineItem (check "status" property).
However, I'm not able to find it at the moment and I'm in sync with the corresponding designers.

Thanks for your understanding,
Diana