@ui5/webcomponents 0.31.18 → 0.31.22

package/src/List.js

@@ -6,7 +6,7 @@ import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import { isTabNext, isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import findNodeOwner from "@ui5/webcomponents-base/dist/util/findNodeOwner.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.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,
 		},
@@ -185,12 +189,14 @@ const metadata = {
 		},
 
 		/**
+		 * 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,
 		},
 
@@ -199,10 +205,10 @@ const metadata = {
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},
@@ -210,15 +216,13 @@ const metadata = {
 		/**
 		 * Defines the accessible role of the component.
 		 * <br><br>
-		 * <b>Note:</b> If you use notification list items,
-		 * it's recommended to set <code>accessible-role="list"</code> for better accessibility.
 		 *
-		 * @private
+		 * @public
 		 * @type {String}
 		 * @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,
 		},
 	},
@@ -459,6 +463,35 @@ class List extends UI5Element {
 		}
 	}
 
+	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 shouldRenderH1() {
 		return !this.header.length && this.headerText;
 	}
@@ -467,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");
 	}
@@ -479,20 +516,56 @@ 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;
 	}
-
+	
 	get ariaLabelledBy() {
-		if (this.ariaLabelledby || this.ariaLabel) {
+		if (this.accessibleNameRef || this.accessibleName) {
 			return undefined;
 		}
+		const ids = [];
 
-		return this.shouldRenderH1 ? this.headerID : undefined;
-	}
+		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 getEffectiveAriaLabelText(this);
+		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() {

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

@@ -130,9 +130,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) {

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