feat(ui5-timeline): implement acc spec (#1471)

Author: tsanislavgatev

packages/main/src/Timeline.hbs

@@ -1,5 +1,5 @@
 <div class="ui5-timeline-root">
-	<ul class="ui5-timeline-list">
+	<ul class="ui5-timeline-list" role="listbox" aria-live="polite" aria-label="{{ariaLabel}}">
 		{{#each items}}
 			<li class="ui5-timeline-list-item">
 				<slot name="{{this._individualSlot}}"></slot>

packages/main/src/Timeline.js

@@ -1,7 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import TimelineTemplate from "./generated/templates/TimelineTemplate.lit.js";
+import { TIMELINE_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/Timeline.css.js";
@@ -69,12 +71,21 @@ class Timeline extends UI5Element {
 		super();
 
 		this.initItemNavigation();
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
+	static async onDefine() {
+		await fetchI18nBundle("@ui5/webcomponents");
 	}
 
 	initItemNavigation() {
 		this._itemNavigation = new ItemNavigation(this);
 		this._itemNavigation.getItemsCallback = () => this.items;
 	}
+
+	get ariaLabel() {
+		return this.i18nBundle.getText(TIMELINE_ARIA_LABEL);
+	}
 }
 
 Timeline.define();

packages/main/src/TimelineItem.hbs

@@ -9,7 +9,7 @@
 			</div>
 		{{/if}}
 	</div>
-	<div class="ui5-tli-bubble" tabindex="{{_tabIndex}}" data-sap-focus-ref>
+	<div class="ui5-tli-bubble" tabindex="{{_tabIndex}}" role="option" data-sap-focus-ref>
 		<div class="ui5-tli-title">
 			{{#if itemName}}
 				{{> itemName}}

packages/main/src/i18n/messagebundle.properties

@@ -268,6 +268,9 @@ TEXTAREA_CHARACTERS_LEFT={0} characters remaining
 #XTXT: Text for characters over
 TEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit
 
+#XACT: ARIA announcement for timeline label
+TIMELINE_ARIA_LABEL=Timeline
+
 #XFLD: Timepicker slider header
 TIMEPICKER_HOURS_LABEL=Hours