@ui5/webcomponents 0.31.18 → 0.31.22

package/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.31.18",
+  "version": "0.31.22",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -30,14 +30,14 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.31.18",
-    "@ui5/webcomponents-icons": "0.31.18",
-    "@ui5/webcomponents-ie11": "0.31.18",
-    "@ui5/webcomponents-localization": "0.31.18",
-    "@ui5/webcomponents-theme-base": "0.31.18"
+    "@ui5/webcomponents-base": "0.31.22",
+    "@ui5/webcomponents-icons": "0.31.22",
+    "@ui5/webcomponents-ie11": "0.31.22",
+    "@ui5/webcomponents-localization": "0.31.22",
+    "@ui5/webcomponents-theme-base": "0.31.22"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.31.18",
+    "@ui5/webcomponents-tools": "0.31.22",
     "chromedriver": "88.0.0"
   }
 }

package/src/BusyIndicator.hbs

@@ -9,6 +9,7 @@
 			aria-valuemax="100"
 			aria-valuetext="Busy"
 			aria-labelledby="{{_id}}-label"
+			data-sap-focus-ref
 		>
 			<div class="ui5-busyindicator-circles-wrapper">
 				<div class="ui5-busyindicator-circle circle-animation-0"></div>

package/src/Card.hbs

@@ -2,8 +2,7 @@
 	class="{{classes.main}}"
 	dir="{{effectiveDir}}"
 	role="region"
-	aria-label="{{ariaLabelText}}"
-	aria-labelledby="{{ariaLabelledByCard}}">
+	aria-label="{{ariaLabelText}}">
 	{{#if hasHeader}}
 		<div class="{{classes.header}}"
 			@click="{{_headerClick}}"
@@ -39,8 +38,7 @@
 		</div>
 	{{/if}}
 
-	<section role="group" aria-label="{{ariaCardContentLabel}}">
+	<div role="group" aria-label="{{ariaCardContentLabel}}">
 		<slot></slot>
-	</section>
-	<span id="{{_id}}-desc" class="ui5-hidden-text">{{ariaCardRoleDescription}}</span>
+	</div>
 </div>

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");
 		}
@@ -1187,7 +1187,7 @@ class Input extends UI5Element {
 	}
 
 	get styles() {
-		return {
+		const stylesObject = {
 			popoverHeader: {
 				"max-width": `${this._inputWidth}px`,
 			},
@@ -1198,10 +1198,14 @@ class Input extends UI5Element {
 			suggestionsPopover: {
 				"max-width": `${this._inputWidth}px`,
 			},
-			innerInput: {
-				padding: this.nativeInputWidth < 48 ? "0" : undefined,
-			},
+			innerInput: {},
 		};
+
+		if (this.nativeInputWidth < 48) {
+			stylesObject.innerInput.padding = "0";
+		}
+
+		return stylesObject;
 	}
 
 	get suggestionSeparators() {

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}}