Skip to content

Commit

Permalink
feat(ui5-timeline): add accessible-name support (#4721)
Browse files Browse the repository at this point in the history
Add new property "accessibleName"

FIXES: #4644
Todor-ads authored Feb 14, 2022
1 parent 16246a8 commit 0562e89
Showing 4 changed files with 24 additions and 4 deletions.
2 changes: 1 addition & 1 deletion packages/fiori/src/Timeline.hbs
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@
@keydown={{_onkeydown}}>

<div class="ui5-timeline-scroll-container">
<ul class="ui5-timeline-list" aria-live="polite" aria-label="{{accessibleName}}">
<ul class="ui5-timeline-list" aria-live="polite" aria-label="{{ariaLabel}}">
{{#each items}}
<li class="ui5-timeline-list-item">
<slot name="{{this._individualSlot}}"></slot>
18 changes: 16 additions & 2 deletions packages/fiori/src/Timeline.js
Original file line number Diff line number Diff line change
@@ -4,8 +4,8 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
import TimelineTemplate from "./generated/templates/TimelineTemplate.lit.js";
import { TIMELINE_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
import TimelineTemplate from "./generated/templates/TimelineTemplate.lit.js";
import TimelineItem from "./TimelineItem.js";

// Styles
@@ -43,6 +43,18 @@ const metadata = {
type: TimelineLayout,
defaultValue: TimelineLayout.Vertical,
},

/**
* Defines the accessible aria name of the component.
*
* @type {String}
* @defaultvalue: ""
* @public
* @since 1.2.0
*/
accessibleName: {
type: String,
},
},
slots: /** @lends sap.ui.webcomponents.fiori.Timeline.prototype */ {
/**
@@ -115,7 +127,9 @@ class Timeline extends UI5Element {
}

get ariaLabel() {
return Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL);
return this.accessibleName
? `${Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL)} ${this.accessibleName}`
: Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL);
}

_onfocusin(event) {
2 changes: 1 addition & 1 deletion packages/fiori/test/pages/Timeline.html
Original file line number Diff line number Diff line change
@@ -37,7 +37,7 @@ <h2>Timeline within Card Vertical</h2>
<ui5-card>
<ui5-card-header slot="header" title-text="Upcoming Activities" subtitle-text="For Today">
</ui5-card-header>
<ui5-timeline layout="Vertical">
<ui5-timeline layout="Vertical" accessible-name="vertical" id="timelineAccName">
<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="Stanislava Baltova" name-clickable></ui5-timeline-item>
<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="Stanislava Baltova"></ui5-timeline-item>
<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.08.2017 (11:00 - 12:00)" icon="calendar">
6 changes: 6 additions & 0 deletions packages/fiori/test/specs/Timeline.spec.js
Original file line number Diff line number Diff line change
@@ -13,4 +13,10 @@ describe("Timeline general interaction", () => {
await timelineItemName.click();
assert.strictEqual(await result.getText(), "Stanislava Baltova", "Click event is fired");
});

it("setting accessible-name applied on the host element is reflected on the ul tag", async () => {
const timeline = await browser.$("#timelineAccName");

assert.strictEqual(await timeline.shadow$("ul").getAttribute("aria-label"), "Timeline vertical", "Attribute is reflected");
});
});

0 comments on commit 0562e89

Please sign in to comment.