feat(ui5-timeline-item): introduce status property #10277
Conversation
There was a problem hiding this comment.
- From the commit description - the semantic meaning gets set over the
ui5-timeline-itemand not only over the icon. - You could add a test, in order to check whether the
accessible-descriptionproperty results intoaria-descriptionover the inner element.
Tested with NVDA and JAWS. The announcements are as expected.
| @@ -1,13 +1,25 @@ | |||
| import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; | |||
| import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; | |||
| import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; | |||
| import event from "@ui5/webcomponents-base/dist/decorators/event.js"; | |||
There was a problem hiding this comment.
Why did you change this?
There was a problem hiding this comment.
hm, probably happened when merging conflicts, reverting it
| @@ -6,7 +6,10 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; | |||
| import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; | |||
| import TimelineLayout from "./types/TimelineLayout.js"; | |||
| import type { ITimelineItem } from "./Timeline.js"; | |||
|
|
|||
| import "@ui5/webcomponents-icons/dist/slim-arrow-left.js"; | |||
There was a problem hiding this comment.
I don't see where you use these 4 icons, they are only imported, but no template uses them.
Is this a bug fix?
Icons are now imported in the template where they are used, not in the component file
There was a problem hiding this comment.
I added them, because previously without them in the Playground samples, when having ui5-timeline-group-item, the arrows in the buttons
weren't present, until imported explicitly.
There was a problem hiding this comment.
OK, I found the code:
get _groupItemIcon() {
if (this.layout === TimelineLayout.Vertical) {
return this.collapsed ? "slim-arrow-left" : "slim-arrow-down";
}
return this.collapsed ? "slim-arrow-up" : "slim-arrow-right";
}These icons were used, but were not imported, so it's a bugfix. After the TSX rework we recommend moving this to the template, and importing the icons from the template as named imports.
Please see packages/main/src/MessageStripTemplate.tsx for an example
| * Available status types of a timeline item. | ||
| * @public | ||
| */ | ||
| enum TimelineItemStatus { |
There was a problem hiding this comment.
Did you consider using valueState? It seems exactly the same. And also calling the property valueState instead of status. I'm not sure this would be right, but maybe it's worth thinking about
There was a problem hiding this comment.
thanks for the suggestions, I will communicate it with the team, and will follow up
Introducing
statusproperty into the<ui5-timeline-item>web component.The status property allows you to set the semantic state of the icon using the following values:
Information,Positive,Critical,NegativeorNone.Each status automatically changes the icon's color to visually represent the corresponding state, improving clarity and consistency.
The
statusis also accessible. Screen readers will read the status, ensuring that users with assistive technologies can understand the semantic meaning.Sample usecases with and without
statuspropertyWith
Without
Fixes: #9806