@ui5/webcomponents 0.0.0-453158269 → 0.0.0-4738ea0dc

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

@@ -1,8 +1,13 @@
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+// @ts-ignore
 import encodeXML from "@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js";
 import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
+import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import List from "../List.js";
+import type { ClickEventDetail, SelectionChangeEventDetail } from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import SuggestionItem from "../SuggestionItem.js";
 import SuggestionGroupItem from "../SuggestionGroupItem.js";
@@ -14,8 +19,43 @@ import SuggestionListItem from "../SuggestionListItem.js";
 
 import {
 	LIST_ITEM_POSITION,
-	LIST_ITEM_SELECTED,
 } from "../generated/i18n/i18n-defaults.js";
+import type ListItemType from "../types/ListItemType.js";
+import type ListItemBase from "../ListItemBase.js";
+
+interface SuggestionComponent extends UI5Element {
+	_isValueStateFocused: boolean;
+	focused: boolean;
+	hasSuggestionItemSelected: boolean;
+	value: string;
+	typedInValue: string;
+	hasValueStateMessage: boolean;
+	suggestionItems: Array<SuggestionItem>;
+	open: boolean;
+	onItemMouseOver: (e: MouseEvent) => void;
+	onItemMouseOut: (e: MouseEvent) => void;
+	onItemSelected: (pressedItem: SuggestionItem, keyboardUsed: boolean) => void;
+	onItemPreviewed: (item: SuggestionListItem) => void;
+}
+
+type InputSuggestionText = {
+	text: string;
+	description: string;
+	image?: string;
+	icon?: string;
+	type: ListItemType;
+	additionalText?: string;
+	additionalTextState: ValueState;
+	groupItem: boolean;
+	key: number;
+}
+
+type SuggestionsAccInfo = {
+	currentPos: number;
+	listSize: number;
+	itemText: string;
+}
+
 /**
  * A class to manage the <code>Input</code suggestion items.
  *
@@ -24,7 +64,24 @@ import {
  * @author SAP SE
  */
 class Suggestions {
-	constructor(component, slotName, highlight, handleFocus) {
+	component: SuggestionComponent;
+	slotName: string;
+	handleFocus: boolean;
+	highlight: boolean;
+	selectedItemIndex: number;
+	accInfo?: SuggestionsAccInfo;
+	responsivePopover?: ResponsivePopover;
+	_scrollContainer?: HTMLElement;
+	_handledPress?: boolean;
+	attachedAfterOpened?: boolean;
+	attachedAfterClose?: boolean;
+	fnOnSuggestionItemPress: (e: CustomEvent<ClickEventDetail | SelectionChangeEventDetail>) => void;
+	fnOnSuggestionItemMouseOver: (e: MouseEvent) => void;
+	fnOnSuggestionItemMouseOut: (e: MouseEvent) => void;
+	static i18nBundle: I18nBundle;
+	static SCROLL_STEP = 60;
+
+	constructor(component: SuggestionComponent, slotName: string, highlight: boolean, handleFocus: boolean) {
 		// The component, that the suggestion would plug into.
 		this.component = component;
 
@@ -39,7 +96,6 @@ class Suggestions {
 
 		// Press and Focus handlers
 		this.fnOnSuggestionItemPress = this.onItemPress.bind(this);
-		this.fnOnSuggestionItemFocus = this.onItemFocused.bind(this);
 		this.fnOnSuggestionItemMouseOver = this.onItemMouseOver.bind(this);
 		this.fnOnSuggestionItemMouseOut = this.onItemMouseOut.bind(this);
 
@@ -47,18 +103,16 @@ class Suggestions {
 
 		// An integer value to store the currently selected item position,
 		// that changes due to user interaction.
-		this.selectedItemIndex = null;
-
-		this.accInfo = {};
+		this.selectedItemIndex = -1;
 	}
 
 	/* Public methods */
-	defaultSlotProperties(hightlightValue) {
+	defaultSlotProperties(hightlightValue: string) {
 		const inputSuggestionItems = this._getComponent().suggestionItems;
 		const highlight = this.highlight && !!hightlightValue;
-		const suggestions = [];
+		const suggestions: Array<InputSuggestionText> = [];
 
-		inputSuggestionItems.map((suggestion, idx) => {
+		inputSuggestionItems.map((suggestion: SuggestionItem, idx: number) => {
 			const text = highlight ? this.getHighlightedText(suggestion, hightlightValue) : this.getRowText(suggestion);
 			const description = highlight ? this.getHighlightedDesc(suggestion, hightlightValue) : this.getRowDesc(suggestion);
 
@@ -78,30 +132,30 @@ class Suggestions {
 		return suggestions;
 	}
 
-	onUp(event) {
-		event.preventDefault();
+	onUp(e: KeyboardEvent) {
+		e.preventDefault();
 		this._handleItemNavigation(false /* forward */);
 		return true;
 	}
 
-	onDown(event) {
-		event.preventDefault();
+	onDown(e: KeyboardEvent) {
+		e.preventDefault();
 		this._handleItemNavigation(true /* forward */);
 		return true;
 	}
 
-	onSpace(event) {
+	onSpace(e: KeyboardEvent) {
 		if (this._isItemOnTarget()) {
-			event.preventDefault();
+			e.preventDefault();
 			this.onItemSelected(null, true /* keyboardUsed */);
 			return true;
 		}
 		return false;
 	}
 
-	onEnter(event) {
+	onEnter(e: KeyboardEvent) {
 		if (this._isGroupOrInactiveItem) {
-			event.preventDefault();
+			e.preventDefault();
 			return false;
 		}
 
@@ -113,8 +167,8 @@ class Suggestions {
 		return false;
 	}
 
-	onPageUp(event) {
-		event.preventDefault();
+	onPageUp(e: KeyboardEvent) {
+		e.preventDefault();
 
 		const isItemIndexValid = this.selectedItemIndex - 10 > -1;
 
@@ -128,8 +182,8 @@ class Suggestions {
 		return true;
 	}
 
-	onPageDown(event) {
-		event.preventDefault();
+	onPageDown(e: KeyboardEvent) {
+		e.preventDefault();
 
 		const items = this._getItems();
 		const lastItemIndex = items.length - 1;
@@ -145,8 +199,8 @@ class Suggestions {
 		return true;
 	}
 
-	onHome(event) {
-		event.preventDefault();
+	onHome(e: KeyboardEvent) {
+		e.preventDefault();
 
 		if (this._hasValueState) {
 			this._focusValueState();
@@ -157,8 +211,8 @@ class Suggestions {
 		return true;
 	}
 
-	onEnd(event) {
-		event.preventDefault();
+	onEnd(e: KeyboardEvent) {
+		e.preventDefault();
 
 		const lastItemIndex = this._getItems().length - 1;
 
@@ -171,7 +225,7 @@ class Suggestions {
 		return true;
 	}
 
-	onTab(event) {
+	onTab() {
 		if (this._isItemOnTarget()) {
 			this.onItemSelected(null, true);
 			return true;
@@ -179,13 +233,13 @@ class Suggestions {
 		return false;
 	}
 
-	toggle(bToggle, { preventFocusRestore }) {
+	toggle(bToggle: boolean, options: { preventFocusRestore: boolean }) {
 		const toggle = bToggle !== undefined ? bToggle : !this.isOpened();
 
 		if (toggle) {
 			this.open();
 		} else {
-			this.close(preventFocusRestore);
+			this.close(options.preventFocusRestore);
 		}
 	}
 
@@ -194,11 +248,11 @@ class Suggestions {
 		return sc.offsetHeight < sc.scrollHeight;
 	}
 
-	async open() {
+	open() {
 		this._getComponent().open = true;
 		this._beforeOpen();
 
-		this.responsivePopover.showAt(this._getComponent());
+		this.responsivePopover!.showAt(this._getComponent());
 	}
 
 	async close(preventFocusRestore = false) {
@@ -213,24 +267,20 @@ class Suggestions {
 		}
 	}
 
-	updateSelectedItemPosition(pos) {
+	updateSelectedItemPosition(pos: number) {
 		this.selectedItemIndex = pos;
 	}
 
 	/* Interface methods */
-	onItemFocused() {
-		this._getComponent().onItemFocused();
+	onItemMouseOver(e: MouseEvent) {
+		this._getComponent().onItemMouseOver(e);
 	}
 
-	onItemMouseOver(event) {
-		this._getComponent().onItemMouseOver(event);
+	onItemMouseOut(e: MouseEvent) {
+		this._getComponent().onItemMouseOut(e);
 	}
 
-	onItemMouseOut(event) {
-		this._getComponent().onItemMouseOut(event);
-	}
-
-	onItemSelected(selectedItem, keyboardUsed) {
+	onItemSelected(selectedItem: SuggestionListItem | null, keyboardUsed: boolean) {
 		const allItems = this._getItems();
 		const item = selectedItem || allItems[this.selectedItemIndex];
 
@@ -239,12 +289,12 @@ 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
 		// to have consistency with the way "Inactive" items behave in the ui5-list
-		if (item.type === "Inactive" || item.group) {
+		if (item.type === "Inactive" || item.groupItem) {
 			return;
 		}
 
@@ -254,13 +304,30 @@ class Suggestions {
 		this._getComponent().open = false;
 	}
 
-	onItemPreviewed(item) {
+	onItemPreviewed(item: SuggestionListItem) {
 		this._getComponent().onItemPreviewed(item);
 	}
 
 	/* Private methods */
-	onItemPress(oEvent) {
-		this.onItemSelected(oEvent.detail.selectedItems[0], false /* keyboardUsed */);
+	// Note: Split into two separate handlers
+	onItemPress(e: CustomEvent<ClickEventDetail | SelectionChangeEventDetail>) {
+		let pressedItem: ListItemBase; // SuggestionListItem
+		const isPressEvent = e.type === "ui5-item-click";
+
+		// Only use the press e 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 && !(e.detail as ClickEventDetail).item.selected) || (this._handledPress && !isPressEvent)) {
+			return;
+		}
+
+		if (isPressEvent && (e.detail as ClickEventDetail).item.selected) {
+			pressedItem = (e.detail as ClickEventDetail).item;
+			this._handledPress = true;
+		} else {
+			pressedItem = (e.detail as SelectionChangeEventDetail).selectedItems[0];
+		}
+
+		this.onItemSelected(pressedItem as SuggestionListItem, false /* keyboardUsed */);
 	}
 
 	_beforeOpen() {
@@ -270,10 +337,10 @@ class Suggestions {
 
 	async _attachItemsListeners() {
 		const list = await this._getList();
-		list.removeEventListener("ui5-selection-change", this.fnOnSuggestionItemPress);
-		list.addEventListener("ui5-selection-change", this.fnOnSuggestionItemPress);
-		list.removeEventListener("ui5-item-focused", this.fnOnSuggestionItemFocus);
-		list.addEventListener("ui5-item-focused", this.fnOnSuggestionItemFocus);
+		list.removeEventListener("ui5-item-click", this.fnOnSuggestionItemPress as EventListener);
+		list.addEventListener("ui5-item-click", this.fnOnSuggestionItemPress as EventListener);
+		list.removeEventListener("ui5-selection-change", this.fnOnSuggestionItemPress as EventListener);
+		list.addEventListener("ui5-selection-change", this.fnOnSuggestionItemPress as EventListener);
 		list.removeEventListener("mouseover", this.fnOnSuggestionItemMouseOver);
 		list.addEventListener("mouseover", this.fnOnSuggestionItemMouseOver);
 		list.removeEventListener("mouseout", this.fnOnSuggestionItemMouseOut);
@@ -286,23 +353,22 @@ class Suggestions {
 		}
 
 		if (!this.attachedAfterOpened) {
-			this._getSuggestionPopover.addEventListener("ui5-after-open", this._onOpen.bind(this));
+			this.responsivePopover!.addEventListener("ui5-after-open", this._onOpen.bind(this));
 			this.attachedAfterOpened = true;
 		}
 
 		if (!this.attachedAfterClose) {
-			this._getSuggestionPopover.addEventListener("ui5-after-close", this._onClose.bind(this));
+			this.responsivePopover!.addEventListener("ui5-after-close", this._onClose.bind(this));
 			this.attachedAfterClose = true;
 		}
 	}
 
 	_onOpen() {
 		this._applyFocus();
-		this._getComponent().onOpen();
 	}
 
 	_onClose() {
-		this._getComponent().onClose();
+		this._handledPress = false;
 	}
 
 	_applyFocus() {
@@ -322,14 +388,14 @@ class Suggestions {
 			return false;
 		}
 
-		return (items[this.selectedItemIndex].group || items[this.selectedItemIndex].type === "Inactive");
+		return (items[this.selectedItemIndex].groupItem || items[this.selectedItemIndex].type === "Inactive");
 	}
 
 	isOpened() {
 		return !!(this.responsivePopover && this.responsivePopover.opened);
 	}
 
-	_handleItemNavigation(forward) {
+	_handleItemNavigation(forward: boolean) {
 		if (!this._getItems().length) {
 			return;
 		}
@@ -345,17 +411,17 @@ class Suggestions {
 		const itemsCount = this._getItems().length;
 		const previousSelectedIdx = this.selectedItemIndex;
 
-		if (this._hasValueState && previousSelectedIdx === null && !this.component._isValueStateFocused) {
+		if (this._hasValueState && previousSelectedIdx === -1 && !this.component._isValueStateFocused) {
 			this._focusValueState();
 			return;
 		}
 
-		if ((previousSelectedIdx === null && !this._hasValueState) || this.component._isValueStateFocused) {
+		if ((previousSelectedIdx === -1 && !this._hasValueState) || this.component._isValueStateFocused) {
 			this._clearValueStateFocus();
-			--this.selectedItemIndex;
+			this.selectedItemIndex = -1;
 		}
 
-		if (previousSelectedIdx !== null && previousSelectedIdx + 1 > itemsCount - 1) {
+		if (previousSelectedIdx !== -1 && previousSelectedIdx + 1 > itemsCount - 1) {
 			return;
 		}
 
@@ -369,7 +435,7 @@ class Suggestions {
 		if (this._hasValueState && previousSelectedIdx === 0 && !this.component._isValueStateFocused) {
 			this.component.hasSuggestionItemSelected = false;
 			this.component._isValueStateFocused = true;
-			this.selectedItemIndex = null;
+			this.selectedItemIndex = 0;
 
 			items[0].focused = false;
 			items[0].selected = false;
@@ -380,7 +446,7 @@ class Suggestions {
 		if (this.component._isValueStateFocused) {
 			this.component.focused = true;
 			this.component._isValueStateFocused = false;
-			this.selectedItemIndex = null;
+			this.selectedItemIndex = 0;
 
 			return;
 		}
@@ -402,7 +468,7 @@ class Suggestions {
 		this._moveItemSelection(previousSelectedIdx, --this.selectedItemIndex);
 	}
 
-	_moveItemSelection(previousIdx, nextIdx) {
+	_moveItemSelection(previousIdx: number, nextIdx: number) {
 		const items = this._getItems();
 		const currentItem = items[nextIdx];
 		const previousItem = items[previousIdx];
@@ -417,7 +483,7 @@ class Suggestions {
 		this.accInfo = {
 			currentPos: nextIdx + 1,
 			listSize: items.length,
-			itemText: currentItem.textContent,
+			itemText: this._getRealItems()[items.indexOf(currentItem)].description,
 		};
 
 		if (previousItem) {
@@ -461,16 +527,16 @@ class Suggestions {
 		}
 	}
 
-	_isItemIntoView(item) {
-		const rectItem = item.getDomRef().getBoundingClientRect();
-		const rectInput = this._getComponent().getDomRef().getBoundingClientRect();
+	_isItemIntoView(item: SuggestionListItem) {
+		const rectItem = item.getDomRef()!.getBoundingClientRect();
+		const rectInput = this._getComponent().getDomRef()!.getBoundingClientRect();
 		const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
 
 		return (rectItem.top + Suggestions.SCROLL_STEP <= windowHeight) && (rectItem.top >= rectInput.top);
 	}
 
-	async _scrollItemIntoView(item) {
-		const pos = item.getDomRef().offsetTop;
+	async _scrollItemIntoView(item: SuggestionListItem) {
+		const pos = item.getDomRef()!.offsetTop;
 		const scrollContainer = await this._getScrollContainer();
 		scrollContainer.scrollTop = pos;
 	}
@@ -478,23 +544,23 @@ class Suggestions {
 	async _getScrollContainer() {
 		if (!this._scrollContainer) {
 			await this._getSuggestionPopover();
-			this._scrollContainer = this.responsivePopover.shadowRoot.querySelector(".ui5-popup-content");
+			this._scrollContainer = this.responsivePopover!.shadowRoot!.querySelector(".ui5-popup-content")!;
 		}
 
 		return this._scrollContainer;
 	}
 
-	_getItems() {
-		return !!this.responsivePopover && [...this.responsivePopover.querySelector("[ui5-list]").children];
+	_getItems(): Array<SuggestionListItem> {
+		return this.responsivePopover ? [...this.responsivePopover.querySelector<List>("[ui5-list]")!.children] as Array<SuggestionListItem> : [];
 	}
 
-	_getComponent() {
+	_getComponent(): SuggestionComponent {
 		return this.component;
 	}
 
 	async _getList() {
 		this.responsivePopover = await this._getSuggestionPopover();
-		return this.responsivePopover.querySelector("[ui5-list]");
+		return this.responsivePopover.querySelector<List>("[ui5-list]")!;
 	}
 
 	async _getListWidth() {
@@ -503,7 +569,7 @@ class Suggestions {
 	}
 
 	_getRealItems() {
-		return this._getComponent().getSlottedNodes(this.slotName);
+		return this._getComponent().getSlottedNodes<SuggestionItem>(this.slotName);
 	}
 
 	async _getSuggestionPopover() {
@@ -512,43 +578,44 @@ class Suggestions {
 		}
 
 		const staticAreaItem = await this._getComponent().getStaticAreaItemDomRef();
-		this.responsivePopover = staticAreaItem.querySelector("[ui5-responsive-popover]");
+		this.responsivePopover = staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
 		return this.responsivePopover;
 	}
 
 	get itemSelectionAnnounce() {
-		const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION, this.accInfo.currentPos, this.accInfo.listSize),
-			itemSelectionText = Suggestions.i18nBundle.getText(LIST_ITEM_SELECTED);
+		if (!this.accInfo) {
+			return "";
+		}
+
+		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) {
-		return this.sanitizeText(suggestion.text || suggestion.textContent);
+	getRowText(suggestion: SuggestionItem) {
+		return this.sanitizeText(suggestion.text || suggestion.textContent || "");
 	}
 
-	getRowDesc(suggestion) {
-		if (suggestion.description) {
-			return this.sanitizeText(suggestion.description);
-		}
+	getRowDesc(suggestion: SuggestionItem) {
+		return this.sanitizeText(suggestion.description || "");
 	}
 
-	getHighlightedText(suggestion, input) {
-		const text = suggestion.text || suggestion.textContent;
+	getHighlightedText(suggestion: SuggestionItem, input: string) {
+		const text = suggestion.text || suggestion.textContent || "";
 		return this.hightlightInput(text, input);
 	}
 
-	getHighlightedDesc(suggestion, input) {
-		const text = suggestion.description || "";
+	getHighlightedDesc(suggestion: SuggestionItem, input: string) {
+		const text = suggestion.description;
 		return this.hightlightInput(text, input);
 	}
 
-	hightlightInput(text, input) {
+	hightlightInput(text: string, input: string) {
 		return generateHighlightedMarkup(text, input);
 	}
 
-	sanitizeText(text) {
-		return encodeXML(text);
+	sanitizeText(text: string) {
+		return encodeXML(text) as string;
 	}
 
 	get _hasValueState() {
@@ -561,8 +628,8 @@ class Suggestions {
 		this.component._isValueStateFocused = true;
 		this.component.focused = false;
 		this.component.hasSuggestionItemSelected = false;
-		this.selectedItemIndex = null;
-		this.component.value = this.component.valueBeforeAutoComplete;
+		this.selectedItemIndex = 0;
+		this.component.value = this.component.typedInValue;
 
 		items && this._scrollItemIntoView(items[0]);
 		this._deselectItems();
@@ -591,9 +658,12 @@ class Suggestions {
 	}
 }
 
-Suggestions.SCROLL_STEP = 60;
-
 // Add suggestions support to the global features registry so that Input.js can use it
 registerFeature("InputSuggestions", Suggestions);
 
 export default Suggestions;
+
+export type {
+	SuggestionComponent,
+	InputSuggestionText,
+};

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=Listbox
 
 #XTXT: MultiComboBox and ComboBox icon accessible name
 SELECT_OPTIONS=Select Options
@@ -169,6 +169,9 @@ LIST_ITEM_SELECTED=Selected
 #XACT: ARIA announcement for the list item selected=false state
 LIST_ITEM_NOT_SELECTED=Not Selected
 
+#XACT: ARIA announcement for the list item selected=false state
+LIST_ITEM_GROUP_HEADER=Group Header
+
 #XBUT: List Multi Selection Mode Checkbox aria-label text
 ARIA_LABEL_LIST_ITEM_CHECKBOX = Multiple Selection mode.
 
@@ -251,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}
@@ -265,6 +268,21 @@ 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: ARIA role description for Tab with subitems
+TAB_SPLIT_ROLE_DESCRIPTION=Tab with subitems
+
 #XACT: ACC next icon name in tab container
 TABCONTAINER_NEXT_ICON_ACC_NAME=Next
 
@@ -280,6 +298,9 @@ TABCONTAINER_END_OVERFLOW=More
 #XBUT Text for cancel button, which closes the popover on mobile devices
 TABCONTAINER_POPOVER_CANCEL_BUTTON=Cancel
 
+#XACT: ARIA description for TabContainer tablist when there are tabs with subitems
+TABCONTAINER_SUBTABS_DESCRIPTION=Press down arrow key to open subitems menu
+
 #XTXT: Text for characters left
 TEXTAREA_CHARACTERS_LEFT={0} characters remaining
 
@@ -295,9 +316,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
 
@@ -340,9 +358,21 @@ TREE_ITEM_ARIA_LABEL=Tree Item
 #XTOL: tooltip for expand icon in a tree item
 TREE_ITEM_EXPAND_NODE=Expand Node
 
-#XTOL: tooltip for collapse icon in a tree item
+#XACT: tooltip for collapse icon in a tree item
 TREE_ITEM_COLLAPSE_NODE=Collapse Node
 
+#XACT: the value state type that is preppended to value state error message text
+VALUE_STATE_TYPE_ERROR=Value State Error
+
+#XACT: the value state type that is preppended to value state warning message text
+VALUE_STATE_TYPE_WARNING=Value State Warning
+
+#XACT: the value state type that is preppended to value state success message text
+VALUE_STATE_TYPE_SUCCESS=Value State Success
+
+#XACT: the value state type that is preppended to value state information message text
+VALUE_STATE_TYPE_INFORMATION=Value State Information
+
 #XTOL: text that is appended to the tooltips of input fields etc. which are marked to have an error
 VALUE_STATE_ERROR=Invalid entry
 
@@ -370,6 +400,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