@ui5/webcomponents 0.31.14 → 0.31.18

package/src/DateComponentBase.js

@@ -26,6 +26,18 @@ const metadata = {
 			type: CalendarType,
 		},
 
+		/**
+		 * Defines the secondary calendar type.
+		 * If not set, the calendar will only show the primary calendar type.
+		 * @type {CalendarType}
+		 * @since 1.0.0-rc.16
+		 * @defaultvalue undefined
+		 * @public
+		 */
+		secondaryCalendarType: {
+			type: CalendarType,
+		},
+
 		/**
 		 * Determines the мinimum date available for selection.
 		 *

package/src/DatePicker.js

@@ -230,17 +230,41 @@ const metadata = {
 		 * Fired when the input operation has finished by pressing Enter or on focusout.
 		 *
 		 * @event
+		 * @allowPreventDefault
 		 * @public
+		 * @param {String} value The submitted value.
+		 * @param {Boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
-		change: {},
+		change: {
+			details: {
+				value: {
+					type: String,
+				},
+				valid: {
+					type: Boolean,
+				},
+			},
+		},
 
 		/**
 		 * Fired when the value of the <code>ui5-date-picker</code> is changed at each key stroke.
 		 *
 		 * @event
+		 * @allowPreventDefault
 		 * @public
+		 * @param {String} value The submitted value.
+		 * @param {Boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
-		input: {},
+		input: {
+			details: {
+				value: {
+					type: String,
+				},
+				valid: {
+					type: Boolean,
+				},
+			},
+		},
 	},
 };
 
@@ -379,6 +403,8 @@ class DatePicker extends DateComponentBase {
 		} else if (this.name) {
 			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
 		}
+
+		this.liveValue = this.value;
 	}
 
 	/**
@@ -471,17 +497,30 @@ class DatePicker extends DateComponentBase {
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
 	}
 
-	_updateValueAndFireEvents(value, normalizeValue, events) {
+	_updateValueAndFireEvents(value, normalizeValue, events, updateValue = true) {
 		const valid = this._checkValueValidity(value);
+
 		if (valid && normalizeValue) {
 			value = this.normalizeValue(value); // transform valid values (in any format) to the correct format
 		}
 
-		this.value = value;
-		this._updateValueState(); // Change the value state to Error/None, but only if needed
+		let executeEvent = true;
+		this.liveValue = value;
+
 		events.forEach(event => {
-			this.fireEvent(event, { value, valid });
+			if (!this.fireEvent(event, { value, valid }, true)) {
+				executeEvent = false;
+			}
 		});
+
+		if (!executeEvent) {
+			return;
+		}
+
+		if (updateValue) {
+			this.value = value;
+			this._updateValueState(); // Change the value state to Error/None, but only if needed
+		}
 	}
 
 	_updateValueState() {
@@ -521,7 +560,7 @@ class DatePicker extends DateComponentBase {
 	 * @protected
 	 */
 	async _onInputInput(event) {
-		this._updateValueAndFireEvents(event.target.value, false, ["input"]);
+		this._updateValueAndFireEvents(event.target.value, false, ["input"], false);
 	}
 
 	/**
@@ -722,11 +761,11 @@ class DatePicker extends DateComponentBase {
 	 * @public
 	 */
 	get dateValue() {
-		return this.getFormat().parse(this.value);
+		return this.liveValue ? this.getFormat().parse(this.liveValue) : this.getFormat().parse(this.value);
 	}
 
 	get dateValueUTC() {
-		return this.getFormat().parse(this.value, true);
+		return this.liveValue ? this.getFormat().parse(this.liveValue, true) : this.getFormat().parse(this.value);
 	}
 
 	get styles() {

package/src/DatePickerPopover.hbs

@@ -42,6 +42,7 @@
 	<ui5-calendar
 		id="{{_id}}-calendar"
 		primary-calendar-type="{{_primaryCalendarType}}"
+		secondary-calendar-type="{{secondaryCalendarType}}"
 		format-pattern="{{_formatPattern}}"
 		timestamp="{{_calendarTimestamp}}"
 		.selectionMode="{{_calendarSelectionMode}}"

package/src/DateTimePickerPopover.hbs

@@ -4,10 +4,10 @@
 {{#*inline "header"}}
 	{{#if phone}}
 		<div class="ui5-dt-picker-header">
-			<ui5-segmentedbutton style="width: 8rem">
-				<ui5-togglebutton key="Date" ?pressed="{{showDateView}}" @click="{{_dateTimeSwitchChange}}">{{btnDateLabel}}</ui5-togglebutton>
-				<ui5-togglebutton key="Time" ?pressed="{{showTimeView}}" @click="{{_dateTimeSwitchChange}}">{{btnTimeLabel}}</ui5-togglebutton>
-			</ui5-segmentedbutton>
+			<ui5-segmented-button style="width: 8rem">
+				<ui5-segmented-button-item key="Date" ?pressed="{{showDateView}}" @click="{{_dateTimeSwitchChange}}">{{btnDateLabel}}</ui5-segmented-button-item>
+				<ui5-segmented-button-item key="Time" ?pressed="{{showTimeView}}" @click="{{_dateTimeSwitchChange}}">{{btnTimeLabel}}</ui5-segmented-button-item>
+			</ui5-segmented-button>
 		</div>
 	{{/if}}
 {{/inline}}

package/src/DayPicker.hbs

@@ -38,8 +38,13 @@
 										class="ui5-dp-daytext"
 										data-sap-timestamp="{{this.timestamp}}"
 									>
-											{{this.iDay}}
+										{{this.day}}
 									</span>
+									{{#if this._isSecondaryCalendarType}}
+										<span class="ui5-dp-daytext ui5-dp-daysectext" >
+											{{this.secondDay}}
+										</span>
+									{{/if}}
 							</div>
 						{{else}}
 							{{#unless this.isHidden}}

package/src/DayPicker.js

@@ -184,6 +184,7 @@ class DayPicker extends CalendarPart {
 
 		const firstDayOfWeek = this._getFirstDayOfWeek();
 		const monthsNames = localeData.getMonths("wide", this._primaryCalendarType);
+		const secondaryMonthsNames = this.hasSecondaryCalendarType && localeData.getMonths("wide", this.secondaryCalendarType);
 		const nonWorkingDayLabel = this.i18nBundle.getText(DAY_PICKER_NON_WORKING_DAY);
 		const todayLabel = this.i18nBundle.getText(DAY_PICKER_TODAY);
 		const tempDate = this._getFirstDay(); // date that will be changed by 1 day 42 times
@@ -192,6 +193,8 @@ class DayPicker extends CalendarPart {
 		const minDate = this._minDate; // store the _minDate (expensive getter)
 		const maxDate = this._maxDate; // store the _maxDate (expensive getter)
 
+		const tempSecondDate = this.hasSecondaryCalendarType && this._getSecondaryDay(tempDate);
+
 		let week = [];
 		for (let i = 0; i < DAYS_IN_WEEK * 6; i++) { // always show 6 weeks total, 42 days to avoid jumping
 			const timestamp = tempDate.valueOf() / 1000; // no need to round because CalendarDate does it
@@ -212,15 +215,20 @@ class DayPicker extends CalendarPart {
 
 			const nonWorkingAriaLabel = isWeekend ? `${nonWorkingDayLabel} ` : "";
 			const todayAriaLabel = isToday ? `${todayLabel} ` : "";
+			const ariaLabel = this.hasSecondaryCalendarType
+				? `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()} ${secondaryMonthsNames[tempSecondDate.getMonth()]} ${tempSecondDate.getDate()}, ${tempSecondDate.getYear()}`
+				: `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}`;
 
 			const day = {
 				timestamp: timestamp.toString(),
 				focusRef: isFocused,
 				_tabIndex: isFocused ? "0" : "-1",
 				selected: isSelected,
-				iDay: tempDate.getDate(),
+				day: tempDate.getDate(),
+				secondDay: this.hasSecondaryCalendarType && tempSecondDate.getDate(),
+				_isSecondaryCalendarType: this.hasSecondaryCalendarType,
 				classes: `ui5-dp-item ui5-dp-wday${dayOfTheWeek}`,
-				ariaLabel: `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}`,
+				ariaLabel,
 				ariaSelected: isSelected ? "true" : "false",
 				ariaDisabled: isOtherMonth ? "true" : undefined,
 				disabled: isDisabled,
@@ -268,6 +276,9 @@ class DayPicker extends CalendarPart {
 			}
 
 			tempDate.setDate(tempDate.getDate() + 1);
+			if (this.hasSecondaryCalendarType) {
+				tempSecondDate.setDate(tempSecondDate.getDate() + 1);
+			}
 		}
 	}
 
@@ -656,6 +667,10 @@ class DayPicker extends CalendarPart {
 		return this.hideWeekNumbers;
 	}
 
+	get hasSecondaryCalendarType() {
+		return !!this.secondaryCalendarType;
+	}
+
 	_isWeekend(oDate) {
 		const localeData = getCachedLocaleDataInstance(getLocale());
 
@@ -672,6 +687,10 @@ class DayPicker extends CalendarPart {
 		return (target.className.indexOf("ui5-dp-item") > -1) || (targetParent && targetParent.classList && targetParent.classList.contains("ui5-dp-item"));
 	}
 
+	_getSecondaryDay(tempDate) {
+		return new CalendarDate(tempDate, this.secondaryCalendarType);
+	}
+
 	_getFirstDay() {
 		let daysFromPreviousMonth;
 

package/src/FileUploader.hbs

@@ -6,6 +6,7 @@
 	@focusout="{{_onfocusout}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
+	@click="{{_onclick}}"
 >
 	<div class="ui5-file-uploader-mask">
 		{{#unless hideInput}}

package/src/FileUploader.js

@@ -274,15 +274,23 @@ class FileUploader extends UI5Element {
 		});
 	}
 
+	_onclick(event) {
+		if (event.isMarked === "button") {
+			this._input.click(event);
+		}
+	}
+
 	_onkeydown(event) {
 		if (isEnter(event)) {
 			this._input.click(event);
+			event.preventDefault();
 		}
 	}
 
 	_onkeyup(event) {
 		if (isSpace(event)) {
 			this._input.click(event);
+			event.preventDefault();
 		}
 	}
 

package/src/GroupHeaderListItem.hbs

@@ -4,11 +4,11 @@
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@keydown="{{_onkeydown}}"
-	role="option"
+	aria-label="{{ariaLabelText}}"
+	aria-roledescription="{{groupHeaderText}}"
+	role="group"
 	style="list-style-type: none;"
 >
-	<span class="ui5-hidden-text">{{groupHeaderText}} {{accessibleName}}</span>
-
 	<div id="{{_id}}-content" class="ui5-li-content">
 		<span class="ui5-ghli-title"><slot></slot></span>
 	</div>

package/src/GroupHeaderListItem.js

@@ -85,6 +85,10 @@ class GroupHeaderListItem extends ListItemBase {
 		return this.i18nBundle.getText(GROUP_HEADER_TEXT);
 	}
 
+	get ariaLabelText() {
+		return [this.textContent, this.accessibleName].filter(Boolean).join(" ");
+	}
+
 	static async onDefine() {
 		await Promise.all([
 			fetchI18nBundle("@ui5/webcomponents"),

package/src/Icon.js

@@ -237,12 +237,10 @@ class Icon extends UI5Element {
 		}
 	}
 
-	_onclick(event) {
-		if (this.interactive) {
-			// prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
-			event.stopPropagation(); 
-			this.fireEvent("click");
-		}
+	_onClickHandler(event) {
+		// prevent the native event and fire custom event to ensure the noConfict "ui5-click" is fired
+		event.stopPropagation();
+		this.fireEvent("click");
 	}
 
 	get _dir() {
@@ -329,6 +327,8 @@ class Icon extends UI5Element {
 		this.ltr = iconData.ltr;
 		this.packageName = iconData.packageName;
 
+		this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
+
 		if (this.accessibleName) {
 			this.effectiveAccessibleName = this.accessibleName;
 		} else if (this.accData) {

package/src/Input.js

@@ -836,6 +836,14 @@ class Input extends UI5Element {
 		return !!this._isPopoverOpen;
 	}
 
+	/**
+	 * Checks if the value state popover is open.
+	 * @returns {boolean} true if the value state popover is open, false otherwise
+	 */
+	 isValueStateOpened() {
+		return !!this._isPopoverOpen;
+	}
+
 	async openPopover() {
 		const popover = await this._getPopover();
 
@@ -1168,7 +1176,8 @@ class Input extends UI5Element {
 		return {
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
-				"ui5-responsive-popover-header": !this.isOpen(),
+				"ui5-valuestatemessage-header": true,
+				"ui5-responsive-popover-header": !this.isValueStateOpened(),
 				"ui5-valuestatemessage--success": this.valueState === ValueState.Success,
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
@@ -1185,7 +1194,6 @@ class Input extends UI5Element {
 			suggestionPopoverHeader: {
 				"display": this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._listWidth}px`,
-				"padding": "0.925rem 1rem",
 			},
 			suggestionsPopover: {
 				"max-width": `${this._inputWidth}px`,

package/src/Label.js

@@ -42,7 +42,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether semi-colon is added to the <code>ui5-label</code> text.
+		 * Defines whether colon is added to the component text.
 		 * <br><br>
 		 * <b>Note:</b> Usually used in forms.
 		 * @type {boolean}

package/src/List.hbs

@@ -20,10 +20,9 @@
 
 		<ul id="{{_id}}-listUl"
 			class="ui5-list-ul"
-			role="{{accRole}}"
+			role="{{accessibleRole}}"
 			aria-label="{{ariaLabelТxt}}"
 			aria-labelledby="{{ariaLabelledBy}}"
-			aria-multiselectable="{{isMultiSelect}}"
 		>
 			<slot></slot>
 

package/src/List.js

@@ -208,16 +208,19 @@ const metadata = {
 		},
 
 		/**
-		 * Used to externally manipulate the role of the list
+		 * 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
 		 * @type {String}
-		 * @defaultvalue "listbox"
-		 * @since 1.0.0-rc.9
+		 * @defaultvalue "list"
+		 * @since 1.0.0-rc.15
 		 */
-		accRole: {
+		 accessibleRole: {
 			type: String,
-			defaultValue: "listbox",
+			defaultValue: "list",
 		},
 
 		/**

package/src/ListItem.hbs

@@ -11,13 +11,13 @@
 	@touchstart="{{_ontouchstart}}"
 	@touchend="{{_ontouchend}}"
 	@click="{{_onclick}}"
-	aria-selected="{{ariaSelected}}"
 	role="{{_accInfo.role}}"
 	aria-expanded="{{_accInfo.ariaExpanded}}"
 	title="{{title}}"
 	aria-level="{{_accInfo.ariaLevel}}"
 	aria-posinset="{{_accInfo.posinset}}"
 	aria-setsize="{{_accInfo.setsize}}"
+	aria-describedby="{{_id}}-invisibleText-describedby"
 	aria-labelledby="{{_id}}-invisibleText {{_id}}-content"
 	aria-disabled="{{ariaDisabled}}"
 	style="list-style-type: none;"
@@ -50,6 +50,7 @@
 		{{/if}}
 
 		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{_accInfo.listItemAriaLabel}} {{accessibleName}}</span>
+		<span id="{{_id}}-invisibleText-describedby" class="ui5-hidden-text">{{_accInfo.ariaSelectedText}}</span>
 </li>
 
 {{#*inline "listItemPreContent"}}{{/inline}}
@@ -62,6 +63,7 @@
 	{{#if modeSingleSelect}}
 		<ui5-radiobutton
 				?disabled="{{isInactive}}"
+				accessible-name="{{_accInfo.ariaLabelRadioButton}}"
 				tabindex="-1"
 				id="{{_id}}-singleSelectionElement"
 				class="ui5-li-singlesel-radiobtn"

package/src/ListItem.js

@@ -8,7 +8,13 @@ import ListItemBase from "./ListItemBase.js";
 import RadioButton from "./RadioButton.js";
 import CheckBox from "./CheckBox.js";
 import Button from "./Button.js";
-import { DELETE, ARIA_LABEL_LIST_ITEM_CHECKBOX } from "./generated/i18n/i18n-defaults.js";
+import {
+	DELETE,
+	ARIA_LABEL_LIST_ITEM_CHECKBOX,
+	ARIA_LABEL_LIST_ITEM_RADIO_BUTTON,
+	LIST_ITEM_SELECTED,
+	LIST_ITEM_NOT_SELECTED,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/ListItem.css.js";
@@ -72,13 +78,13 @@ const metadata = {
 		 *
 		 * @private
 		 * @type {String}
-		 * @defaultvalue "option"
+		 * @defaultvalue "listitem"
 		 * @since 1.0.0-rc.9
 		 *
 		 */
 		role: {
 			type: String,
-			defaultValue: "option",
+			defaultValue: "listitem",
 		},
 
 		_mode: {
@@ -312,6 +318,20 @@ class ListItem extends ListItemBase {
 		return undefined;
 	}
 
+	get ariaSelectedText() {
+		let ariaSelectedText;
+
+		// Selected state needs to be supported separately since now the role mapping is list -> listitem[]
+		// to avoid the issue of nesting interactive elements, ex. (option -> radio/checkbox);
+		// The text is added to aria-describedby because as part of the aria-labelledby
+		// the whole content of the item is readout when the aria-labelledby value is changed.
+		if (this.ariaSelected !== undefined) {
+			ariaSelectedText = this.ariaSelected ? this.i18nBundle.getText(LIST_ITEM_SELECTED) : this.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
+		}
+
+		return ariaSelectedText;
+	}
+
 	get deleteText() {
 		return this.i18nBundle.getText(DELETE);
 	}
@@ -322,7 +342,8 @@ class ListItem extends ListItemBase {
 			ariaExpanded: undefined,
 			ariaLevel: undefined,
 			ariaLabel: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
-			listItemAriaLabel: undefined,
+			ariaLabelRadioButton: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
+			ariaSelectedText: this.ariaSelectedText,
 		};
 	}
 

package/src/Panel.js

@@ -95,7 +95,19 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria role of the <code>ui5-panel</code>.
+		 * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.0.0-rc.16
+		 */
+		 noAnimation: {
+			type: Boolean,
+		},
+
+		/**
+		 * Sets the accessible aria role of the component.
 		 * Depending on the usage, you can change the role from the default <code>Form</code>
 		 * to <code>Region</code> or <code>Complementary</code>.
 		 *
@@ -282,8 +294,8 @@ class Panel extends UI5Element {
 		return true;
 	}
 
-	shouldAnimate() {
-		return getAnimationMode() !== AnimationMode.None;
+	shouldNotAnimate() {
+		return this.noAnimation || getAnimationMode() === AnimationMode.None;
 	}
 
 	_headerClick(event) {
@@ -332,7 +344,7 @@ class Panel extends UI5Element {
 
 		this.collapsed = !this.collapsed;
 
-		if (!this.shouldAnimate()) {
+		if (this.shouldNotAnimate()) {
 			this.fireEvent("toggle");
 			return;
 		}
@@ -368,7 +380,7 @@ class Panel extends UI5Element {
 	get classes() {
 		return {
 			headerBtn: {
-				"ui5-panel-header-button-animated": this.shouldAnimate(),
+				"ui5-panel-header-button-animated": !this.shouldNotAnimate(),
 			},
 		};
 	}

package/src/Popup.js

@@ -9,7 +9,7 @@ import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import PopupTemplate from "./generated/templates/PopupTemplate.lit.js";
 import PopupBlockLayer from "./generated/templates/PopupBlockLayerTemplate.lit.js";
-import { getOpenedPopups, addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
+import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
 
 // Styles
 import styles from "./generated/themes/Popup.css.js";
@@ -150,6 +150,8 @@ const createBlockingStyle = () => {
 
 createBlockingStyle();
 
+let bodyScrollingBlockers = 0;
+
 /**
  * @class
  * <h3 class="comment-api-title">Overview</h3>
@@ -237,6 +239,12 @@ class Popup extends UI5Element {
 	 * @protected
 	 */
 	static blockBodyScrolling() {
+		bodyScrollingBlockers++;
+
+		if (bodyScrollingBlockers !== 1) {
+			return;
+		}
+
 		if (window.pageYOffset > 0) {
 			document.body.style.top = `-${window.pageYOffset}px`;
 		}
@@ -248,6 +256,12 @@ class Popup extends UI5Element {
 	 * @protected
 	 */
 	static unblockBodyScrolling() {
+		bodyScrollingBlockers--;
+
+		if (bodyScrollingBlockers !== 0) {
+			return;
+		}
+
 		document.body.classList.remove("ui5-popup-scroll-blocker");
 		window.scrollTo(0, -parseFloat(document.body.style.top));
 		document.body.style.top = "";
@@ -422,12 +436,9 @@ class Popup extends UI5Element {
 			return;
 		}
 
-		const openedPopups = getOpenedPopups();
 		if (this.isModal) {
 			this._blockLayerHidden = true;
-			if (openedPopups.length === 1) {
-				Popup.unblockBodyScrolling();
-			}
+			Popup.unblockBodyScrolling();
 		}
 
 		this.hide();

package/src/RadioButton.hbs

@@ -3,7 +3,7 @@
 	aria-checked="{{selected}}"
 	aria-readonly="{{ariaReadonly}}"
 	aria-disabled="{{ariaDisabled}}"
-	aria-labelledby="{{ariaLabelledBy}}"
+	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedBy}}"
 	tabindex="{{tabIndex}}"
 	dir="{{effectiveDir}}"

package/src/RadioButton.js

@@ -162,6 +162,19 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the text alternative of the component.
+		 * If not provided a default text alternative will be set, if present.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleName: {
+			type: String,
+		},
+
 		_tabIndex: {
 			type: String,
 			defaultValue: "-1",
@@ -383,8 +396,8 @@ class RadioButton extends UI5Element {
 		return this.disabled ? "true" : undefined;
 	}
 
-	get ariaLabelledBy() {
-		return this.text ? `${this._id}-label` : undefined;
+	get ariaLabelText() {
+		return [this.text, this.accessibleName].filter(Boolean).join(" ");
 	}
 
 	get ariaDescribedBy() {

package/src/ResponsivePopover.js

@@ -116,9 +116,10 @@ class ResponsivePopover extends Popover {
 	/**
 	 * Opens popover on desktop and dialog on mobile.
 	 * @param {HTMLElement} opener the element that the popover is opened by
+	 * @param {boolean} preventInitialFocus prevents applying the focus inside the popup
 	 * @public
 	 */
-	open(opener) {
+	open(opener, preventInitialFocus = false) {
 		this.style.display = this._isPhone ? "contents" : "";
 
 		if (this.isOpen() || (this._dialog && this._dialog.isOpen())) {
@@ -131,7 +132,7 @@ class ResponsivePopover extends Popover {
 				this._minWidth = Math.max(POPOVER_MIN_WIDTH, opener.getBoundingClientRect().width);
 			}
 
-			this.openBy(opener);
+			this.openBy(opener, preventInitialFocus);
 		} else {
 			this.style.zIndex = getNextZIndex();
 			this._dialog.open();