@ui5/webcomponents 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/src/{YearPicker.js → YearPicker.ts}

@@ -1,3 +1,7 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import type LocaleT from "sap/ui/core/Locale";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import {
 	isEnter,
@@ -18,53 +22,39 @@ import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import { getMaxCalendarDate } from "@ui5/webcomponents-localization/dist/dates/ExtremeDates.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import CalendarPart from "./CalendarPart.js";
+import type { ICalendarPicker } from "./Calendar.js";
+import {
+	YEAR_PICKER_DESCRIPTION,
+// @ts-ignore
+} from "./generated/i18n/i18n-defaults.js";
+
+// Template
 import YearPickerTemplate from "./generated/templates/YearPickerTemplate.lit.js";
+
+// Styles
 import styles from "./generated/themes/YearPicker.css.js";
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-yearpicker",
-	properties: /** @lends sap.ui.webcomponents.main.YearPicker.prototype */ {
-		/**
-		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
-		 * @type {Array}
-		 * @public
-		 */
-		selectedDates: {
-			type: Integer,
-			multiple: true,
-			compareValues: true,
-		},
-
-		_years: {
-			type: Object,
-			multiple: true,
-		},
-
-		_hidden: {
-			type: Boolean,
-			noAttribute: true,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.YearPicker.prototype */ {
-		/**
-		 * Fired when the user selects a year (space/enter/click).
-		 * @public
-		 * @event
-		 */
-		change: {},
-		/**
-		 * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse.
-		 * @since 1.0.0-rc.9
-		 * @public
-		 * @event
-		 */
-		navigate: {},
-	},
-};
+type Year = {
+	timestamp: string;
+	_tabIndex: string;
+	focusRef: boolean;
+	selected: boolean;
+	ariaSelected: string;
+	year: string;
+	yearInSecType: string | undefined;
+	disabled: boolean;
+	classes: string;
+}
+
+type YearInterval = Array<Array<Year>>;
+
+type SelectedYearChangeEventDetail = {
+	timestamp: number,
+}
 
 /**
  * @class
@@ -73,15 +63,50 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.YearPicker
- * @extends CalendarPart
+ * @alias sap.ui.webc.main.YearPicker
+ * @extends sap.ui.webc.main.CalendarPart
  * @tagname ui5-yearpicker
  * @public
  */
-class YearPicker extends CalendarPart {
-	static get metadata() {
-		return metadata;
-	}
+@customElement("ui5-yearpicker")
+/**
+ * Fired when the user selects a year via "Space", "Enter" or click.
+ * @public
+ * @event sap.ui.webc.main.YearPicker#change
+ */
+@event("change")
+/**
+ * Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse.
+ * @since 1.0.0-rc.9
+ * @public
+ * @event sap.ui.webc.main.YearPicker#navigate
+ */
+@event("navigate")
+class YearPicker extends CalendarPart implements ICalendarPicker {
+	/**
+	 * An array of UTC timestamps representing the selected date
+	 * or dates depending on the capabilities of the picker component.
+	 * @type {array}
+	 * @name sap.ui.webc.main.YearPicker.prototype.selectedDates
+	 * @public
+	 */
+	@property({
+		validator: Integer,
+		multiple: true,
+		compareValues: true,
+	})
+	selectedDates!: Array<number>;
+
+	@property({ type: Object, multiple: true })
+	_years!: YearInterval;
+
+	@property({ type: Boolean, noAttribute: true })
+	_hidden!: boolean;
+
+	_firstYear?: number;
+	_lastYear?: number;
+
+	static i18nBundle: I18nBundle;
 
 	static get styles() {
 		return styles;
@@ -91,6 +116,14 @@ class YearPicker extends CalendarPart {
 		return YearPickerTemplate;
 	}
 
+	static async onDefine() {
+		YearPicker.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
+	get roleDescription() {
+		return YearPicker.i18nBundle.getText(YEAR_PICKER_DESCRIPTION as I18nText);
+	}
+
 	onBeforeRendering() {
 		this._buildYears();
 	}
@@ -110,10 +143,11 @@ class YearPicker extends CalendarPart {
 			return;
 		}
 		const pageSize = this._getPageSize();
-		const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType }, getLocale());
-		const oYearFormatInSecType = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType }, getLocale());
+		const locale = getLocale() as unknown as LocaleT;
+		const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType }, locale);
+		const oYearFormatInSecType = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType }, locale);
 		this._calculateFirstYear();
-		this._lastYear = this._firstYear + pageSize - 1;
+		this._lastYear = this._firstYear! + pageSize - 1;
 
 		const calendarDate = this._calendarDate; // store the value of the expensive getter
 		const minDate = this._minDate; // store the value of the expensive getter
@@ -121,9 +155,9 @@ class YearPicker extends CalendarPart {
 		const tempDate = new CalendarDate(calendarDate, this._primaryCalendarType);
 		let tempDateInSecType;
 		let textInSecType;
-		tempDate.setYear(this._firstYear);
+		tempDate.setYear(this._firstYear!);
 
-		const intervals = [];
+		const intervals: YearInterval = [];
 		let timestamp;
 
 		/* eslint-disable no-loop-func */
@@ -139,12 +173,12 @@ class YearPicker extends CalendarPart {
 
 			if (this.secondaryCalendarType) {
 				tempDateInSecType = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp, true);
-				textInSecType = tempDateInSecType.firstDate.getYear() === tempDateInSecType.lastDate.getYear
+				textInSecType = tempDateInSecType.firstDate.getYear() === tempDateInSecType.lastDate.getYear()
 					? `${oYearFormatInSecType.format(tempDateInSecType.firstDate.toLocalJSDate(), true)}`
 					: `${oYearFormatInSecType.format(tempDateInSecType.firstDate.toLocalJSDate(), true)} - ${oYearFormatInSecType.format(tempDateInSecType.lastDate.toLocalJSDate(), true)}`;
 			}
 
-			const year = {
+			const year: Year = {
 				timestamp: timestamp.toString(),
 				_tabIndex: isFocused ? "0" : "-1",
 				focusRef: isFocused,
@@ -167,7 +201,7 @@ class YearPicker extends CalendarPart {
 			if (this.secondaryCalendarType) {
 				year.classes += " ui5-yp-item-secondary-type";
 			}
-			const intervalIndex = parseInt(i / this._getRowSize());
+			const intervalIndex = Math.floor(i / this._getRowSize());
 
 			if (intervals[intervalIndex]) {
 				intervals[intervalIndex].push(year);
@@ -219,43 +253,43 @@ class YearPicker extends CalendarPart {
 		}
 	}
 
-	_onkeydown(event) {
+	_onkeydown(e: KeyboardEvent) {
 		let preventDefault = true;
 		const pageSize = this._getPageSize();
 		const rowSize = this._getRowSize();
 
-		if (isEnter(event)) {
-			this._selectYear(event);
-		} else if (isSpace(event)) {
-			event.preventDefault();
-		} else if (isLeft(event)) {
+		if (isEnter(e)) {
+			this._selectYear(e);
+		} else if (isSpace(e)) {
+			e.preventDefault();
+		} else if (isLeft(e)) {
 			this._modifyTimestampBy(-1);
-		} else if (isRight(event)) {
+		} else if (isRight(e)) {
 			this._modifyTimestampBy(1);
-		} else if (isUp(event)) {
+		} else if (isUp(e)) {
 			this._modifyTimestampBy(-rowSize);
-		} else if (isDown(event)) {
+		} else if (isDown(e)) {
 			this._modifyTimestampBy(rowSize);
-		} else if (isPageUp(event)) {
+		} else if (isPageUp(e)) {
 			this._modifyTimestampBy(-pageSize);
-		} else if (isPageDown(event)) {
+		} else if (isPageDown(e)) {
 			this._modifyTimestampBy(pageSize);
-		} else if (isHome(event) || isEnd(event)) {
-			this._onHomeOrEnd(isHome(event));
-		} else if (isHomeCtrl(event)) {
+		} else if (isHome(e) || isEnd(e)) {
+			this._onHomeOrEnd(isHome(e));
+		} else if (isHomeCtrl(e)) {
 			this._setTimestamp(parseInt(this._years[0][0].timestamp)); // first year of first row
-		} else if (isEndCtrl(event)) {
+		} else if (isEndCtrl(e)) {
 			this._setTimestamp(parseInt(this._years[pageSize / rowSize - 1][rowSize - 1].timestamp)); // last year of last row
 		} else {
 			preventDefault = false;
 		}
 
 		if (preventDefault) {
-			event.preventDefault();
+			e.preventDefault();
 		}
 	}
 
-	_onHomeOrEnd(homePressed) {
+	_onHomeOrEnd(homePressed: boolean) {
 		this._years.forEach(row => {
 			const indexInRow = row.findIndex(item => CalendarDate.fromTimestamp(parseInt(item.timestamp) * 1000).getYear() === this._calendarDate.getYear());
 			if (indexInRow !== -1) { // The current year is on this row
@@ -266,67 +300,70 @@ class YearPicker extends CalendarPart {
 	}
 
 	/**
-	 * Sets the timestamp to an absolute value
-	 * @param value
+	 * Sets the timestamp to an absolute value.
+	 * @param { number } value
 	 * @private
 	 */
-	_setTimestamp(value) {
+	_setTimestamp(value: number) {
 		this._safelySetTimestamp(value);
-		this.fireEvent("navigate", { timestamp: this.timestamp });
+		this.fireEvent("navigate", { timestamp: this.timestamp! });
 	}
 
 	/**
-	 * Modifies timestamp by a given amount of years and, if necessary, loads the prev/next page
-	 * @param amount
+	 * Modifies timestamp by a given amount of years and, if necessary, loads the prev/next page.
+	 * @param { number } amount
 	 * @private
 	 */
-	_modifyTimestampBy(amount) {
+	_modifyTimestampBy(amount: number) {
 		// Modify the current timestamp
 		this._safelyModifyTimestampBy(amount, "year");
 
 		// Notify the calendar to update its timestamp
-		this.fireEvent("navigate", { timestamp: this.timestamp });
+		this.fireEvent("navigate", { timestamp: this.timestamp! });
 	}
 
-	_onkeyup(event) {
-		if (isSpace(event)) {
-			this._selectYear(event);
+	_onkeyup(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			this._selectYear(e);
 		}
 	}
 
 	/**
 	 * User clicked with the mouser or pressed Enter/Space
-	 * @param event
+	 * @param { Event } e
 	 * @private
 	 */
-	_selectYear(event) {
-		event.preventDefault();
-		if (event.target.className.indexOf("ui5-yp-item") > -1) {
-			const timestamp = this._getTimestampFromDom(event.target);
+	_selectYear(e: Event) {
+		e.preventDefault();
+		const target = e.target as HTMLElement;
+		if (target.className.indexOf("ui5-yp-item") > -1) {
+			const timestamp = this._getTimestampFromDom(target);
 			this._safelySetTimestamp(timestamp);
-			this.fireEvent("change", { timestamp: this.timestamp });
+			this.fireEvent("change", { timestamp: this.timestamp! });
 		}
 	}
 
 	/**
-	 * Called from Calendar.js
+	 * Called by the Calendar component.
 	 * @protected
+	 * @returns { boolean }
 	 */
-	_hasPreviousPage() {
-		return this._firstYear > this._minDate.getYear();
+	_hasPreviousPage(): boolean {
+		return this._firstYear! > this._minDate.getYear();
 	}
 
 	/**
-	 * Called from Calendar.js
+	 * Called by the Calendar component.
 	 * @protected
+	 * @returns { boolean }
 	 */
-	_hasNextPage() {
-		return this._firstYear + this._getPageSize() - 1 < this._maxDate.getYear();
+	_hasNextPage(): boolean {
+		return this._firstYear! + this._getPageSize() - 1 < this._maxDate.getYear();
 	}
 
 	/**
-	 * Called by Calendar.js
-	 * User pressed the "<" button in the calendar header (same as PageUp)
+	 * Called by the Calendar component.
+	 * <b>Note:</b> when the user presses the "<" button in the calendar header (same as "PageUp")
 	 * @protected
 	 */
 	_showPreviousPage() {
@@ -335,8 +372,8 @@ class YearPicker extends CalendarPart {
 	}
 
 	/**
-	 * Called by Calendar.js
-	 * User pressed the ">" button in the calendar header (same as PageDown)
+	 * Called by the Calendar component.
+	 * <b>Note:</b> when the user presses the ">" button in the calendar header (same as "PageDown")
 	 * @protected
 	 */
 	_showNextPage() {
@@ -347,3 +384,6 @@ class YearPicker extends CalendarPart {
 YearPicker.define();
 
 export default YearPicker;
+export type {
+	SelectedYearChangeEventDetail,
+};

package/src/features/{ColorPaletteMoreColors.js → ColorPaletteMoreColors.ts}

@@ -1,7 +1,11 @@
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 
+// @ts-ignore
 import Dialog from "../Dialog.js";
+// @ts-ignore
 import Button from "../Button.js";
 import ColorPicker from "../ColorPicker.js";
 
@@ -9,6 +13,7 @@ import {
 	COLOR_PALETTE_DIALOG_CANCEL_BUTTON,
 	COLOR_PALETTE_DIALOG_OK_BUTTON,
 	COLOR_PALETTE_DIALOG_TITLE,
+// @ts-ignore
 } from "../generated/i18n/i18n-defaults.js";
 
 class ColorPaletteMoreColors {
@@ -20,20 +25,22 @@ class ColorPaletteMoreColors {
 		];
 	}
 
+	static i18nBundle: I18nBundle;
+
 	static async init() {
 		ColorPaletteMoreColors.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	get colorPaletteDialogTitle() {
-		return ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_TITLE);
+		return ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_TITLE as I18nText);
 	}
 
 	get colorPaletteDialogOKButton() {
-		return ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_OK_BUTTON);
+		return ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_OK_BUTTON as I18nText);
 	}
 
 	get colorPaletteCancelButton() {
-		return ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
+		return ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON as I18nText);
 	}
 }
 

package/src/features/{InputElementsFormSupport.js → InputElementsFormSupport.ts}

@@ -1,14 +1,27 @@
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element";
+
+interface IFormElement extends UI5Element {
+	value?: string,
+	name?: string,
+	disabled?: boolean,
+	required?: boolean,
+	multiple?: boolean,
+}
+
+type NativeInputUpdateCallback = (element: IFormElement, nativeInput: HTMLInputElement) => void;
+type NativeInputChangeCallback = (e: Event) => void;
 
 class FormSupport {
 	/**
-	 *
-	 * @param element - the WebComponent that needs form support
-	 * @param nativeInputUpdateCallback - determines how the native input's disabled and value properties are calculated
+	 * Syncs the native input element, rendered into the component's light DOM,
+	 * with the component's state.
+	 * @param { IFormElement} element - the component with form support
+	 * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties
 	 */
-	static syncNativeHiddenInput(element, nativeInputUpdateCallback) {
+	static syncNativeHiddenInput(element: IFormElement, nativeInputUpdateCallback?: NativeInputUpdateCallback) {
 		const needsNativeInput = !!element.name || element.required;
-		let nativeInput = element.querySelector("input[data-ui5-form-support]");
+		let nativeInput = element.querySelector("input[data-ui5-form-support]") as HTMLInputElement;
 		if (needsNativeInput && !nativeInput) {
 			nativeInput = document.createElement("input");
 
@@ -21,10 +34,11 @@ class FormSupport {
 			nativeInput.style.width = "1px";
 			nativeInput.style.bottom = "0";
 			nativeInput.setAttribute("tabindex", "-1");
-			nativeInput.required = element.required;
+			nativeInput.required = element.required!;
 			nativeInput.setAttribute("data-ui5-form-support", "");
+			nativeInput.setAttribute("aria-hidden", "true");
 
-			nativeInput.addEventListener("focusin", event => element.focus());
+			nativeInput.addEventListener("focusin", () => element.getFocusDomRef()?.focus());
 
 			nativeInput.slot = "formSupport"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms
 			element.appendChild(nativeInput);
@@ -34,18 +48,25 @@ class FormSupport {
 		}
 
 		if (needsNativeInput) {
-			nativeInput.name = element.name;
+			nativeInput.name = element.name!;
 			(nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput);
 		}
 	}
 
-	static syncNativeFileInput(element, nativeInputUpdateCallback, nativeInputChangeCallback) {
+	/**
+	 * Syncs the native file input element, rendered into the <code>ui5-file-uploader</code> component's light DOM,
+	 * with the <code>ui5-file-uploader</code> component's state.
+	 * @param { IFormFileElement} element - the component with form support
+	 * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties
+	 * @param { NativeInputChangeCallback } nativeInputChangeCallback - callback, added to native input's "change" event
+	 */
+	static syncNativeFileInput(element: IFormElement, nativeInputUpdateCallback: NativeInputUpdateCallback, nativeInputChangeCallback: NativeInputChangeCallback) {
 		const needsNativeInput = !!element.name;
-		let nativeInput = element.querySelector(`input[type=${element._type || "hidden"}][data-ui5-form-support]`);
+		let nativeInput = element.querySelector(`input[type="file"][data-ui5-form-support]`) as HTMLInputElement;
 
 		if (needsNativeInput && !nativeInput) {
 			nativeInput = document.createElement("input");
-			nativeInput.type = element._type;
+			nativeInput.type = "file";
 			nativeInput.setAttribute("data-ui5-form-support", "");
 			nativeInput.slot = "formSupport"; // Needed to visualize the input in the light dom
 			nativeInput.style.position = "absolute";
@@ -69,18 +90,23 @@ class FormSupport {
 		}
 
 		if (needsNativeInput) {
-			nativeInput.name = element.name;
+			nativeInput.name = element.name!;
 			(nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput);
 		}
 	}
 
-	static triggerFormSubmit(element) {
+	static triggerFormSubmit(element: IFormElement) {
 		let currentElement = element.parentElement;
 		while (currentElement && currentElement.tagName.toLowerCase() !== "form") {
 			currentElement = currentElement.parentElement;
 		}
 
-		if (currentElement) {
+		if (currentElement instanceof HTMLFormElement) {
+			if (!currentElement.checkValidity()) {
+				currentElement.reportValidity();
+				return;
+			}
+
 			// eslint-disable-next-line no-undef
 			const submitPrevented = !currentElement.dispatchEvent(new SubmitEvent("submit", {
 				bubbles: true,
@@ -97,12 +123,18 @@ class FormSupport {
 	}
 }
 
-const copyDefaultProperties = (element, nativeInput) => {
-	nativeInput.disabled = element.disabled;
-	nativeInput.value = element.value;
+const copyDefaultProperties = (element: IFormElement, nativeInput: HTMLInputElement) => {
+	nativeInput.disabled = element.disabled!;
+	nativeInput.value = element.value!;
 };
 
 // Add form support to the global features registry so that Web Components can find and use it
 registerFeature("FormSupport", FormSupport);
 
 export default FormSupport;
+
+export {
+	IFormElement,
+	NativeInputChangeCallback,
+	NativeInputUpdateCallback,
+};

package/src/features/InputSuggestions.js

@@ -14,7 +14,6 @@ import SuggestionListItem from "../SuggestionListItem.js";
 
 import {
 	LIST_ITEM_POSITION,
-	LIST_ITEM_SELECTED,
 } from "../generated/i18n/i18n-defaults.js";
 /**
  * A class to manage the <code>Input</code suggestion items.
@@ -239,7 +238,7 @@ class Suggestions {
 		this.accInfo = {
 			currentPos: this.selectedItemIndex + 1,
 			listSize: allItems.length,
-			itemText: item.textContent,
+			itemText: this._getRealItems()[this.selectedItemIndex].description,
 		};
 
 		// If the item is "Inactive", prevent selection with SPACE or ENTER
@@ -259,8 +258,24 @@ class Suggestions {
 	}
 
 	/* Private methods */
-	onItemPress(oEvent) {
-		this.onItemSelected(oEvent.detail.selectedItems[0], false /* keyboardUsed */);
+	onItemPress(event) {
+		let pressedItem;
+		const isPressEvent = event.type === "ui5-item-click";
+
+		// Only use the press event if the item is already selected, in all other cases we are listening for 'ui5-selection-change' from the list
+		// Also we have to check if the selection-change is fired by the list's 'item-click' event handling, to avoid double handling on our side
+		if ((isPressEvent && !event.detail.item.selected) || (this._handledPress && !isPressEvent)) {
+			return;
+		}
+
+		if (isPressEvent && event.detail.item.selected) {
+			pressedItem = event.detail.item;
+			this._handledPress = true;
+		} else {
+			pressedItem = event.detail.selectedItems[0];
+		}
+
+		this.onItemSelected(pressedItem, false /* keyboardUsed */);
 	}
 
 	_beforeOpen() {
@@ -420,7 +435,7 @@ class Suggestions {
 		this.accInfo = {
 			currentPos: nextIdx + 1,
 			listSize: items.length,
-			itemText: currentItem.textContent,
+			itemText: this._getRealItems()[items.indexOf(currentItem)].description,
 		};
 
 		if (previousItem) {
@@ -520,10 +535,9 @@ class Suggestions {
 	}
 
 	get itemSelectionAnnounce() {
-		const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION, this.accInfo.currentPos, this.accInfo.listSize),
-			itemSelectionText = Suggestions.i18nBundle.getText(LIST_ITEM_SELECTED);
+		const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION, this.accInfo.currentPos, this.accInfo.listSize);
 
-		return `${itemPositionText} ${this.accInfo.itemText} ${itemSelectionText}`;
+		return `${this.accInfo.itemText} ${itemPositionText}`;
 	}
 
 	getRowText(suggestion) {

package/src/i18n/messagebundle.properties

@@ -134,7 +134,7 @@ FILEUPLOADER_TITLE=Upload File
 GROUP_HEADER_TEXT=Group Header
 
 #XACT: ARIA announcement for the Select`s roledescription attribute
-SELECT_ROLE_DESCRIPTION=Select ComboBox
+SELECT_ROLE_DESCRIPTION=Select Combo Box
 
 #XTXT: MultiComboBox and ComboBox icon accessible name
 SELECT_OPTIONS=Select Options
@@ -254,7 +254,7 @@ SLIDER_ARIA_DESCRIPTION=Slider handle
 LOAD_MORE_TEXT=More
 
 #XTXT Table's header row text.
-TABLE_HEADER_ROW_TEXT=Header Row
+TABLE_HEADER_ROW_INFORMATION=Header Row 1 of {0}
 
 #XACT Table row's position
 TABLE_ROW_POSITION={0} of {1}
@@ -268,6 +268,18 @@ ARIA_LABEL_ROW_SELECTION=Item selection
 #XACT ARIA label for select all checkbox in a multiselect mode table
 ARIA_LABEL_SELECT_ALL_CHECKBOX=Select All Rows
 
+#XACT: ARIA announcement for the positive design
+TAB_ARIA_DESIGN_POSITIVE=Positive
+
+#XACT: ARIA announcement for the negative design
+TAB_ARIA_DESIGN_NEGATIVE=Negative
+
+#XACT: ARIA announcement for the critical design
+TAB_ARIA_DESIGN_CRITICAL=Critical
+
+#XACT: ARIA announcement for the neutral design
+TAB_ARIA_DESIGN_NEUTRAL=Neutral
+
 #XACT: ACC next icon name in tab container
 TABCONTAINER_NEXT_ICON_ACC_NAME=Next
 
@@ -298,9 +310,6 @@ TIMEPICKER_MINUTES_LABEL=Minutes
 #XFLD: Timepicker slider header
 TIMEPICKER_SECONDS_LABEL=Seconds
 
-#XFLD: Timepicker slider header
-TIMEPICKER_PERIODS_LABEL=AM/PM
-
 #XFLD: Timepicker popover button
 TIMEPICKER_SUBMIT_BUTTON=OK
 
@@ -385,6 +394,12 @@ DAY_PICKER_NON_WORKING_DAY = Non-Working Day
 #XBUT: Text for 'Today' in the DayPicker
 DAY_PICKER_TODAY = Today
 
+#XACT: ARIA description for month picker
+MONTH_PICKER_DESCRIPTION = Month Picker
+
+#XACT: ARIA description for year picker
+YEAR_PICKER_DESCRIPTION = Year Picker
+
 #XTOL: tooltip for decrease button of the StepInput
 STEPINPUT_DEC_ICON_TITLE=Decrease