-
Notifications
You must be signed in to change notification settings - Fork 272
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui5-timeline-item): introduce
state
property (#10277)
Introducing **`state`** property into the `<ui5-timeline-item>` web component. The `state` property allows you to set the semantic state of the icon using the following values: `Information`, `Positive`, `Critical`, `Negative` or `None`. Each state automatically changes the icon's color to visually represent the corresponding state, improving clarity and consistency. The `state` is also accessible. Screen readers will read the text, ensuring that users with assistive technologies can understand the semantic meaning.
- Loading branch information
Showing
13 changed files
with
216 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { html } from "lit"; | ||
import "../../src/Timeline.js"; | ||
import "../../src/TimelineItem.js"; | ||
import "@ui5/webcomponents-icons/dist/accept.js"; | ||
import "@ui5/webcomponents-icons/dist/message-information.js"; | ||
import "@ui5/webcomponents-icons/dist/decline.js"; | ||
import "@ui5/webcomponents-icons/dist/message-warning.js"; | ||
|
||
describe("Accessibility", () => { | ||
beforeEach(() => { | ||
cy.mount(html` | ||
<ui5-timeline id="test-timeline"> | ||
<ui5-timeline-group-item group-name="Build"> | ||
<ui5-timeline-item | ||
id="item1" | ||
title="Compile" | ||
subtitle="Testing suite A" | ||
icon="sap-icon://accept" | ||
name="Testing suite A" | ||
state="Positive" | ||
> | ||
Compilation succeeded. | ||
</ui5-timeline-item> | ||
<ui5-timeline-item | ||
id="item2" | ||
title="Lint" | ||
subtitle="Testing suite B" | ||
icon="sap-icon://message-information" | ||
name="Testing suite B" | ||
> | ||
Lint completed with minor issues. | ||
</ui5-timeline-item> | ||
</ui5-timeline-group-item> | ||
</ui5-timeline> | ||
`); | ||
|
||
cy.get("#test-timeline").as("timeline"); | ||
}); | ||
|
||
it("item with state attribute has aria-description, item without state does not", () => { | ||
cy.get(`ui5-timeline-item[state="Positive"]`).each($itemWithState => { | ||
cy.wrap($itemWithState) | ||
.shadow() | ||
.find(".ui5-tli-bubble") | ||
.should("have.attr", "aria-description"); | ||
}); | ||
|
||
cy.get(`ui5-timeline-item:not([state="Positive"])`).each($itemWithoutState => { | ||
cy.wrap($itemWithoutState) | ||
.shadow() | ||
.find(".ui5-tli-bubble") | ||
.should("not.have.attr", "aria-description"); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
packages/website/docs/_samples/fiori/Timeline/WithState/WithState.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
import html from '!!raw-loader!./sample.html'; | ||
import js from '!!raw-loader!./main.js'; | ||
|
||
<Editor html={html} js={js} /> |
9 changes: 9 additions & 0 deletions
9
packages/website/docs/_samples/fiori/Timeline/WithState/main.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import "@ui5/webcomponents/dist/Label.js"; | ||
|
||
import "@ui5/webcomponents-fiori/dist/Timeline.js"; | ||
import "@ui5/webcomponents-fiori/dist/TimelineItem.js"; | ||
|
||
import "@ui5/webcomponents-icons/dist/message-information.js"; | ||
import "@ui5/webcomponents-icons/dist/decline.js"; | ||
import "@ui5/webcomponents-icons/dist/message-warning.js"; | ||
import "@ui5/webcomponents-icons/dist/accept.js"; |
40 changes: 40 additions & 0 deletions
40
packages/website/docs/_samples/fiori/Timeline/WithState/sample.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<!-- playground-fold --> | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Sample</title> | ||
</head> | ||
|
||
<body style="background-color: var(--sapBackgroundColor); padding: 2rem;"> | ||
<!-- playground-fold-end --> | ||
|
||
<ui5-timeline id="test-timeline"> | ||
<ui5-timeline-group-item group-name="Build"> | ||
<ui5-timeline-item title="Compile" subtitle="Testing suite A" icon="sap-icon://accept" name="Testing suite A" state="Positive"> | ||
Compilation succeeded. | ||
</ui5-timeline-item> | ||
<ui5-timeline-item title="Lint" subtitle="Testing suite B" icon="sap-icon://message-information" name="Testing suite B" state="Information"> | ||
Lint completed with minor issues. | ||
</ui5-timeline-item> | ||
</ui5-timeline-group-item> | ||
<ui5-timeline-group-item group-name="Test"> | ||
<ui5-timeline-item title="Unit Test" subtitle="Testing suite C" icon="sap-icon://decline" name="Testing suite C" state="Negative"> | ||
Unit tests failed. | ||
</ui5-timeline-item> | ||
<ui5-timeline-item title="Integration Test" subtitle="Testing suite D" icon="sap-icon://message-warning" name="Testing suite D" state="Critical"> | ||
Integration tests have warnings. | ||
</ui5-timeline-item> | ||
<ui5-timeline-item title="E2E Test" subtitle="Testing suite E" icon="sap-icon://accept" name="Testing suite E" state="Positive"> | ||
End-to-end tests passed. | ||
</ui5-timeline-item> | ||
</ui5-timeline-group-item> | ||
</ui5-timeline> | ||
<!-- playground-fold --> | ||
<script type="module" src="main.js"></script> | ||
</body> | ||
|
||
</html> | ||
<!-- playground-fold-end --> |