[Timeline]: [No text alternative for the icons]

[durgaprasad1995]

Describe the bug

Accessibility Issue.

The information conveyed through color (green/red) for the icons is unavailable in alternate (accessible) text.

Expected Behavior:

The information conveyed through color for each & every non-text element must have an (accessible) text alternative conveying similar information.

Color or color differences are an often-used asset to convey information i.e. "errors shown in red" or "required fields are red" or "already visited links are purple". However, if color is the only characteristics indicating that information it might be not accessible for people with color blindness. Thus, an additional indicator is needed.

here you can plug and play https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/data-display-timeline--default

Isolated Example

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

Reproduction steps

1. you can open any voice assistant (Jaws,NVDA etc)
2. go to this timeline component(https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/data-display-timeline--default) in UI 5 check that icon is announcing to the user.

Expected Behaviour

The information conveyed through color for each & every non-text element must have an (accessible) text alternative conveying similar information.

Color or color differences are an often-used asset to convey information i.e. "errors shown in red" or "required fields are red" or "already visited links are purple". However, if color is the only characteristics indicating that information it might be not accessible for people with color blindness. Thus, an additional indicator is needed.

Screenshots or Videos

UI5 Web Components for React Version

1.23.1

UI5 Web Components Version

1.23.1

Browser

Chrome

Operating System

windows

Additional Context

No response

Relevant log output

No response

Organization

SAP

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[Lukas742]

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

[kskondov]

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

[unazko]

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

[durgaprasad1995]

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";

{justificationList?.map( /* istanbul ignore next */ (list) => (

{list?.justification}

) )}

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

[durgaprasad1995]

@unazko There is no update on this ticket

[unazko]

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.

[durgaprasad1995]

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

` {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", }}

{list?.justification}

) )} `

[unazko]

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.

[durgaprasad1995]

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