@ui5/webcomponents 0.31.19 → 0.31.23

package/src/Card.js

@@ -1,7 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CardTemplate from "./generated/templates/CardTemplate.lit.js";
@@ -114,28 +113,28 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the <code>ui5-card</code>
+		 * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.
+		 * <b>Note:</b> <code>accessibleName</code> should be always set.
 		 *
 		 * @type {String}
-		 * @since 1.0.0-rc.9
-		 * @private
 		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.16
 		 */
-		ariaLabel: {
+		 accessibleName: {
 			type: String,
 		},
 
 		/**
-		 * Receives id(or many ids) of the elements that label the <code>ui5-card</code>
+		 * Defines the IDs of the elements that label the component.
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.9
+		 * @public
+		 * @since 1.0.0-rc.16
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
-			defaultValue: "",
 		},
 
 		/**
@@ -255,12 +254,42 @@ class Card extends UI5Element {
 		return !!(this.heading || this.subheading || this.status || this.hasAction || this.avatar);
 	}
 
-	get ariaLabelText() {
-		return getEffectiveAriaLabelText(this);
-	}
+	// As in 0.31 we don't have all the accessibleNameRef, accessibleName related changes downported,
+	// we manually add getEffectiveAriaLabelText and getAriaLabelledByTexts methods and change them,
+	// so they work with accessibleName and accessibleNameRef, isntead of ariaLabel and ariaLabelledby
+	getEffectiveAriaLabelText(el) {
+		if (!el.accessibleNameRef) {
+			if (el.accessibleName) {
+				return el.accessibleName;
+			}
+	
+			return undefined;
+		}
+	
+		return this.getAriaLabelledByTexts(el);
+	};
+	
+	getAriaLabelledByTexts(el, ownerDocument, readyIds = "") {
+		const ids = (readyIds && readyIds.split(" ")) || el.accessibleNameRef.split(" ");
+		const owner = ownerDocument || findNodeOwner(el);
+		let result = "";
+	
+		ids.forEach((elementId, index) => {
+			const element = owner.querySelector(`[id='${elementId}']`);
+			result += `${element ? element.textContent : ""}`;
+	
+			if (index < ids.length - 1) {
+				result += " ";
+			}
+		});
+	
+		return result;
+	};
 
-	get ariaCardRoleDescription() {
-		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
+	get ariaLabelText() {
+		const effectiveAriaLabelText = this.getEffectiveAriaLabelText(this),
+			effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
+		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
 	}
 
 	get ariaCardHeaderRoleDescription() {
@@ -293,10 +322,6 @@ class Card extends UI5Element {
 		return labels.length !== 0 ? labels.join(" ") : undefined;
 	}
 
-	get ariaLabelledByCard() {
-		return this.heading ? `${this._id}-heading ${this._id}-desc` : `${this._id}-desc`;
-	}
-
 	get hasAvatar() {
 		return !!this.avatar.length;
 	}

package/src/Dialog.js

@@ -211,20 +211,20 @@ class Dialog extends Popup {
 	get _ariaLabelledBy() { // Required by Popup.js
 		let ariaLabelledById;
 
-		if (this.headerText !== "" && !this.ariaLabel) {
+		if (this.headerText !== "" && !this.accessibleName) {
 			ariaLabelledById = "ui5-popup-header-text";
 		}
 
 		return ariaLabelledById;
 	}
 
+	/**
+	 * Ensures ariaLabel is never null or empty string
+	 * @returns {String|undefined}
+	 * @protected
+	 */
 	get _ariaLabel() {
-		let ariaLabel;
-
-		if (this.header.length > 0 && !!this.accessibleName) {
-			ariaLabel = this.accessibleName;
-		}
-		return this.ariaLabel ? this.ariaLabel : ariaLabel;
+		return this.accessibleName || undefined;
 	}
 
 	get _ariaModal() { // Required by Popup.js

package/src/Icon.js

@@ -12,6 +12,7 @@ import IconTemplate from "./generated/templates/IconTemplate.lit.js";
 import iconCss from "./generated/themes/Icon.css.js";
 
 const ICON_NOT_FOUND = "ICON_NOT_FOUND";
+const PRESENTATION_ROLE = "presentation";
 
 /**
  * @public
@@ -97,6 +98,7 @@ const metadata = {
 
 		/**
 		 * Defines the aria hidden state of the component.
+		 * Note: If the role is presentation the default value of aria-hidden will be true.
 		 * @private
 		 * @since 1.0.0-rc.15
 		 */
@@ -257,6 +259,10 @@ class Icon extends UI5Element {
 
 	get effectiveAriaHidden() {
 		if (this.ariaHidden === "") {
+			if (this.isDecorative) {
+				return true;
+			}
+
 			return;
 		}
 
@@ -267,6 +273,10 @@ class Icon extends UI5Element {
 		return this.interactive ? "0" : "-1";
 	}
 
+	get isDecorative() {
+		return this.effectiveAccessibleRole === PRESENTATION_ROLE;
+	}
+
 	get effectiveAccessibleRole() {
 		if (this.role) {
 			return this.role;
@@ -276,7 +286,7 @@ class Icon extends UI5Element {
 			return "button";
 		}
 
-		return this.effectiveAccessibleName ? "img" : "presentation";
+		return this.effectiveAccessibleName ? "img" : PRESENTATION_ROLE;
 	}
 
 	static createGlobalStyle() {

package/src/Input.js

@@ -998,7 +998,7 @@ class Input extends UI5Element {
 	}
 
 	async getInputDOMRef() {
-		if (isPhone() && this.Suggestions && this.suggestionItems.length) {
+		if (isPhone() && this.Suggestions) {
 			await this.Suggestions._respPopover();
 			return this.Suggestions && this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
 		}

package/src/List.hbs

@@ -18,6 +18,8 @@
 			<div id="{{_id}}-before" tabindex="0" class="ui5-list-focusarea"></div>
 		{{/if}}
 
+		<span id="{{_id}}-modeLabel" class="ui5-hidden-text">{{ariaLabelModeText}}</span>
+
 		<ul id="{{_id}}-listUl"
 			class="ui5-list-ul"
 			role="{{accessibleRole}}"
@@ -58,6 +60,7 @@
 				active size="Medium"
 				class="ui5-list-busy-ind" 
 				style="{{styles.busyInd}}"
+				data-sap-focus-ref
 			></ui5-busyindicator>
 		</div>
 	{{/if}}

package/src/List.js

@@ -22,7 +22,11 @@ import ListTemplate from "./generated/templates/ListTemplate.lit.js";
 import listCss from "./generated/themes/List.css.js";
 
 // Texts
-import { LOAD_MORE_TEXT } from "./generated/i18n/i18n-defaults.js";
+import {
+	LOAD_MORE_TEXT, ARIA_LABEL_LIST_SELECTABLE,
+	ARIA_LABEL_LIST_MULTISELECTABLE,
+	ARIA_LABEL_LIST_DELETABLE,
+} from "./generated/i18n/i18n-defaults.js";
 
 const INFINITE_SCROLL_DEBOUNCE_RATE = 250; // ms
 
@@ -167,7 +171,7 @@ const metadata = {
 		 * @since 1.0.0-rc.13
 		 * @public
 		 */
-		 growing: {
+		growing: {
 			type: ListGrowingMode,
 			defaultValue: ListGrowingMode.None,
 		},
@@ -218,7 +222,7 @@ const metadata = {
 		 * @defaultvalue "list"
 		 * @since 1.0.0-rc.15
 		 */
-		 accessibleRole: {
+		accessibleRole: {
 			type: String,
 			defaultValue: "list",
 		},
@@ -227,7 +231,7 @@ const metadata = {
 		 * Defines if the entire list is in view port.
 		 * @private
 		 */
-		 _inViewport: {
+		_inViewport: {
 			type: Boolean,
 		},
 
@@ -235,7 +239,7 @@ const metadata = {
 		 * Defines the active state of the <code>More</code> button.
 		 * @private
 		 */
-		 _loadMoreActive: {
+		_loadMoreActive: {
 			type: Boolean,
 		},
 	},
@@ -496,6 +500,10 @@ class List extends UI5Element {
 		return `${this._id}-header`;
 	}
 
+	get modeLabelID() {
+		return `${this._id}-modeLabel`;
+	}
+
 	get listEndDOM() {
 		return this.shadowRoot.querySelector(".ui5-list-end-marker");
 	}
@@ -508,6 +516,19 @@ class List extends UI5Element {
 		return !this.hasData && this.noDataText;
 	}
 
+	get isDelete() {
+		return this.mode === ListMode.Delete;
+	}
+
+	get isSingleSelect() {
+		return [
+			ListMode.SingleSelect,
+			ListMode.SingleSelectBegin,
+			ListMode.SingleSelectEnd,
+			ListMode.SingleSelectAuto,
+		].includes(this.mode);
+	}
+
 	get isMultiSelect() {
 		return this.mode === ListMode.MultiSelect;
 	}
@@ -516,14 +537,37 @@ class List extends UI5Element {
 		if (this.accessibleNameRef || this.accessibleName) {
 			return undefined;
 		}
-	
-		return this.shouldRenderH1 ? this.headerID : undefined;
+		const ids = [];
+
+		if (this.isMultiSelect || this.isSingleSelect || this.isDelete) {
+			ids.push(this.modeLabelID);
+		}
+
+		if (this.shouldRenderH1) {
+			ids.push(this.headerID);
+		}
+
+		return ids.length ? ids.join(" ") : undefined;
 	}
 	
 	get ariaLabelТxt() {
 		return this.getEffectiveAriaLabelText(this);
 	}
 
+	get ariaLabelModeText() {
+		if (this.isMultiSelect) {
+			return this.i18nBundle.getText(ARIA_LABEL_LIST_MULTISELECTABLE);
+		}
+		if (this.isSingleSelect) {
+			return this.i18nBundle.getText(ARIA_LABEL_LIST_SELECTABLE);
+		}
+		if (this.isDelete) {
+			return this.i18nBundle.getText(ARIA_LABEL_LIST_DELETABLE);
+		}
+
+		return undefined;
+	}
+
 	get grows() {
 		return this.growing !== ListGrowingMode.None;
 	}

package/src/Popover.js

@@ -666,7 +666,7 @@ class Popover extends Popup {
 	}
 
 	get _ariaLabelledBy() { // Required by Popup.js
-		return this.ariaLabel ? undefined : "ui5-popup-header";
+		return this.accessibleName ? undefined : "ui5-popup-header";
 	}
 
 	get _ariaModal() { // Required by Popup.js

package/src/Popup.js

@@ -67,14 +67,14 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the popup
+		 * Sets the accessible aria name of the component.
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		 accessibleName: {
 			type: String,
 			defaultValue: undefined,
 		},
@@ -535,7 +535,7 @@ class Popup extends UI5Element {
 	 * @protected
 	 */
 	get _ariaLabel() {
-		return this.ariaLabel || undefined;
+		return this.accessibleName || undefined;
 	}
 
 	get _root() {

package/src/Table.hbs

@@ -81,6 +81,7 @@
 			style="{{styles.busy}}"
 			active
 			size="Medium"
+			data-sap-focus-ref
 		></ui5-busyindicator>
 	</div>
 {{/inline}}

package/src/features/InputSuggestions.js

@@ -1,6 +1,7 @@
 import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-
+import encodeXML from "@ui5/webcomponents-base/dist/util/encodeXML.js";
+import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
 import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import SuggestionItem from "../SuggestionItem.js";
@@ -130,9 +131,7 @@ class Suggestions {
 		this.responsivePopover = await this._respPopover();
 		this._beforeOpen();
 
-		if (this._getItems().length) {
-			this.responsivePopover.open(this._getComponent());
-		}
+		this.responsivePopover.open(this._getComponent());
 	}
 
 	async close(preventFocusRestore = false) {
@@ -394,31 +393,21 @@ class Suggestions {
 	}
 
 	getHighlightedText(suggestion, input) {
-		let text = suggestion.text || suggestion.textContent;
-		text = this.sanitizeText(text);
-
+		const text = suggestion.text || suggestion.textContent;
 		return this.hightlightInput(text, input);
 	}
 
 	getHighlightedDesc(suggestion, input) {
-		let text = suggestion.description;
-		text = this.sanitizeText(text);
-
+		const text = suggestion.description || "";
 		return this.hightlightInput(text, input);
 	}
 
 	hightlightInput(text, input) {
-		if (!text) {
-			return text;
-		}
-
-		const inputEscaped = input.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-		const regEx = new RegExp(inputEscaped, "ig");
-		return text.replace(regEx, match => `<b>${match}</b>`);
+		return generateHighlightedMarkup(text, input);
 	}
 
 	sanitizeText(text) {
-		return text && text.replace("<", "&lt");
+		return encodeXML(text);
 	}
 
 	static get dependencies() {

package/src/i18n/messagebundle.properties

@@ -103,6 +103,15 @@ ARIA_LABEL_LIST_ITEM_CHECKBOX = Multiple Selection mode.
 #XBUT: List Single Selection Mode RadioButton aria-label text
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Item Selection.
 
+#XACT: ARIA announcement for the list which allows single selections
+ARIA_LABEL_LIST_SELECTABLE=Contains Selectable Items
+
+#XACT: ARIA announcement for the list which allows multiple selections
+ARIA_LABEL_LIST_MULTISELECTABLE=Contains Multi-Selectable Items
+
+#XACT: ARIA announcement for the list which has deletable items
+ARIA_LABEL_LIST_DELETABLE=Contains Deletable Items
+
 #XTOL: Tooltip of messgae strip close button
 MESSAGE_STRIP_CLOSE_BUTTON=Message Strip Close
 

package/src/i18n/messagebundle_id.properties

@@ -0,0 +1,218 @@
+
+ARIA_LABEL_CARD_CONTENT=Konten Kartu
+
+ARIA_ROLEDESCRIPTION_CARD=Kartu
+
+ARIA_ROLEDESCRIPTION_CARD_HEADER=Header Kartu
+
+ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=Header Kartu Interaktif
+
+AVATAR_TOOLTIP=Avatar
+
+AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL={0} ditampilkan, {1} disembunyikan.
+
+AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL=Aktifkan untuk daftar lengkap.
+
+AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL=Avatar individu.
+
+AVATAR_GROUP_ARIA_LABEL_GROUP=Avatar tergabung.
+
+AVATAR_GROUP_MOVE=Tekan tombol PANAH untuk berpindah.
+
+BADGE_DESCRIPTION=Lencana
+
+BREADCRUMBS_ARIA_LABEL=Jejak Breadcrumb
+
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=Lebih Banyak
+
+BREADCRUMBS_CANCEL_BUTTON=Batalkan
+
+BUSY_INDICATOR_TITLE=Mohon tunggu
+
+BUTTON_ARIA_TYPE_ACCEPT=Tindakan Positif
+
+BUTTON_ARIA_TYPE_REJECT=Tindakan Negatif
+
+BUTTON_ARIA_TYPE_EMPHASIZED=Ditekankan
+
+CAROUSEL_OF_TEXT=dari
+
+CAROUSEL_DOT_TEXT=Item {0} dari {1} ditampilkan
+
+CAROUSEL_PREVIOUS_ARROW_TEXT=Halaman Sebelumnya
+
+CAROUSEL_NEXT_ARROW_TEXT=Halaman Selanjutnya
+
+COLORPALETTE_CONTAINER_LABEL=Palet Warna - Warna yang Ditentukan Sebelumnya
+
+COLORPALETTE_POPOVER_TITLE=Palet Warna
+
+COLORPALETTE_COLOR_LABEL=Warna
+
+COLOR_PALETTE_DIALOG_CANCEL_BUTTON=Batalkan
+
+COLOR_PALETTE_DIALOG_OK_BUTTON=OKE
+
+COLOR_PALETTE_DIALOG_TITLE=Ubah Warna
+
+COLOR_PALETTE_MORE_COLORS_TEXT=Lebih Banyak Warna...
+
+DATEPICKER_OPEN_ICON_TITLE=Buka Pemilih
+
+DATEPICKER_DATE_DESCRIPTION=Input Tanggal
+
+DATETIME_DESCRIPTION=Input Tanggal Waktu
+
+DATERANGE_DESCRIPTION=Input Rentang Tanggal
+
+DELETE=Hapus
+
+FILEUPLOAD_BROWSE=Telusuri...
+
+FILEUPLOADER_TITLE=Unggah File
+
+GROUP_HEADER_TEXT=Header Grup
+
+SELECT_OPTIONS=Pilih Opsi
+
+INPUT_SUGGESTIONS=Saran yang Tersedia
+
+INPUT_SUGGESTIONS_TITLE=Pilih
+
+INPUT_SUGGESTIONS_ONE_HIT=1 hasil tersedia
+
+INPUT_SUGGESTIONS_MORE_HITS={0} hasil tersedia
+
+INPUT_SUGGESTIONS_NO_HIT=Tidak ada hasil
+
+LINK_SUBTLE=Halus
+
+LINK_EMPHASIZED=Ditekankan
+
+LIST_ITEM_POSITION=Cantumkan item {0} dari {1}
+
+LIST_ITEM_SELECTED=Dipilih
+
+LIST_ITEM_NOT_SELECTED=Tidak Dipilih
+
+ARIA_LABEL_LIST_ITEM_CHECKBOX=Mode Banyak Pilihan
+
+ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=Pilihan Item.
+
+MESSAGE_STRIP_CLOSE_BUTTON=Strip Pesan Tutup
+
+MULTICOMBOBOX_DIALOG_OK_BUTTON=OKE
+
+VALUE_STATE_ERROR_ALREADY_SELECTED=Nilai ini telah dipilih.
+
+MULTIINPUT_ROLEDESCRIPTION_TEXT=Input Banyak Nilai
+
+MULTIINPUT_SHOW_MORE_TOKENS={0} Lebih Banyak
+
+PANEL_ICON=Perluas/Ciutkan
+
+RANGE_SLIDER_ARIA_DESCRIPTION=Rentang
+
+RANGE_SLIDER_START_HANDLE_DESCRIPTION=Pegangan kiri
+
+RANGE_SLIDER_END_HANDLE_DESCRIPTION=Pegangan kanan
+
+RATING_INDICATOR_TOOLTIP_TEXT=Peringkat
+
+RATING_INDICATOR_TEXT=Indikator Peringkat
+
+RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON=Tolak
+
+SEGMENTEDBUTTON_ARIA_DESCRIPTION=Kelompok tombol tersegmentasi
+
+SEGMENTEDBUTTON_ARIA_DESCRIBEDBY=Tekan SPASI atau ENTER untuk memilih suatu item
+
+SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION=Tombol tersegmentasi
+
+SLIDER_ARIA_DESCRIPTION=Pegangan slider
+
+SWITCH_ON=Aktif
+
+SWITCH_OFF=Nonaktif
+
+LOAD_MORE_TEXT=Lebih Banyak
+
+TABLE_HEADER_ROW_TEXT=Baris Header
+
+TABLE_ROW_POSITION={0} dari {1}
+
+TABLE_GROUP_ROW_ARIA_LABEL=Baris Header Grup
+
+ARIA_LABEL_ROW_SELECTION=Pilihan Item
+
+ARIA_LABEL_SELECT_ALL_CHECKBOX=Pilih Semua Baris
+
+TABCONTAINER_NEXT_ICON_ACC_NAME=Selanjutnya
+
+TABCONTAINER_PREVIOUS_ICON_ACC_NAME=Sebelumnya
+
+TABCONTAINER_OVERFLOW_MENU_TITLE=Menu Tambahan
+
+TEXTAREA_CHARACTERS_LEFT={0} karakter tersisa
+
+TEXTAREA_CHARACTERS_EXCEEDED={0} karakter melebihi batas
+
+TIMEPICKER_HOURS_LABEL=Jam
+
+TIMEPICKER_MINUTES_LABEL=Menit
+
+TIMEPICKER_SECONDS_LABEL=Detik
+
+TIMEPICKER_PERIODS_LABEL=AM/PM
+
+TIMEPICKER_SUBMIT_BUTTON=OKE
+
+TIMEPICKER_CANCEL_BUTTON=Batalkan
+
+TIMEPICKER_INPUT_DESCRIPTION=Input Waktu
+
+DURATION_INPUT_DESCRIPTION=Input Durasi
+
+DATETIME_PICKER_DATE_BUTTON=Tanggal
+
+DATETIME_PICKER_TIME_BUTTON=Waktu
+
+TOKEN_ARIA_DELETABLE=Dapat Dihapus
+
+TOKENIZER_ARIA_CONTAIN_TOKEN=Tidak Ada Token
+
+TOKENIZER_ARIA_CONTAIN_ONE_TOKEN=Berisi 1 token
+
+TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS=Berisi {0} token
+
+TOKENIZER_ARIA_LABEL=Pembuat Token
+
+TOKENIZER_POPOVER_REMOVE=Hapus
+
+TREE_ITEM_ARIA_LABEL=Item Pohon
+
+TREE_ITEM_EXPAND_NODE=Perluas Node
+
+TREE_ITEM_COLLAPSE_NODE=Ciutkan Node
+
+VALUE_STATE_ERROR=Entri tidak valid
+
+VALUE_STATE_WARNING=Peringatan diterbitkan
+
+VALUE_STATE_INFORMATION=Entri informatif
+
+VALUE_STATE_SUCCESS=Entri berhasil divalidasi
+
+CALENDAR_HEADER_NEXT_BUTTON=Selanjutnya
+
+CALENDAR_HEADER_PREVIOUS_BUTTON=Sebelumnya
+
+DAY_PICKER_WEEK_NUMBER_TEXT=Jumlah Minggu
+
+DAY_PICKER_NON_WORKING_DAY=Non-Hari Kerja
+
+DAY_PICKER_TODAY=Hari Ini
+
+STEPINPUT_DEC_ICON_TITLE=Turunkan
+
+STEPINPUT_INC_ICON_TITLE=Tingkatkan

package/.port

@@ -1 +0,0 @@
-8080