@ui5/webcomponents 1.6.0 → 1.7.0

package/src/Input.js

@@ -603,9 +603,6 @@ class Input extends UI5Element {
 		// Indicates if the user selection has been canceled with [ESC].
 		this.suggestionSelectionCanceled = false;
 
-		// Indicates if the change event has already been fired
-		this._changeFiredValue = null;
-
 		// tracks the value between focus in and focus out to detect that change event should be fired.
 		this.previousValue = undefined;
 
@@ -771,6 +768,12 @@ class Input extends UI5Element {
 	}
 
 	_onkeyup(event) {
+		// The native Delete event does not update the value property "on time".
+		// So, the (native) change event is always fired with the old value
+		if (isDelete(event)) {
+			this.value = event.target.value;
+		}
+
 		this._keyDown = false;
 		this._backspaceKeyDown = false;
 	}
@@ -823,7 +826,6 @@ class Input extends UI5Element {
 		}
 
 		if (!itemPressed) {
-			this.fireEventByAction(this.ACTION_ENTER, event);
 			this.lastConfirmedValue = this.value;
 
 			if (this.FormSupport) {
@@ -967,8 +969,8 @@ class Input extends UI5Element {
 			return;
 		}
 
-		if (this._changeFiredValue !== this.getInputDOMRefSync().value) {
-			this._changeFiredValue = this.getInputDOMRefSync().value;
+		if (this.previousValue !== this.getInputDOMRefSync().value) {
+			this.previousValue = this.getInputDOMRefSync().value;
 			this.fireEvent(this.EVENT_CHANGE);
 		}
 	}
@@ -996,7 +998,7 @@ class Input extends UI5Element {
 	_handleInput(event) {
 		const inputDomRef = this.getInputDOMRefSync();
 		const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
-		const eventType = event.inputType || event.detail.inputType;
+		const eventType = event.inputType || (event.detail && event.detail.inputType);
 
 		this._shouldAutocomplete = eventType !== "deleteContentBackward" && !this.noTypeahead;
 		this.suggestionSelectionCanceled = false;
@@ -1183,9 +1185,11 @@ class Input extends UI5Element {
 			return;
 		}
 
+		const innerInput = this.getInputDOMRefSync();
+		const value = this.valueBeforeAutoComplete || this.value;
 		const itemText = item.text || item.textContent; // keep textContent for compatibility
 		const fireInput = keyboardUsed
-			? this.valueBeforeItemSelection !== itemText : this.valueBeforeAutoComplete !== itemText;
+			? this.valueBeforeItemSelection !== itemText : value !== itemText;
 
 		this.hasSuggestionItemSelected = true;
 
@@ -1196,6 +1200,7 @@ class Input extends UI5Element {
 			this.getInputDOMRefSync().value = itemText;
 			this.fireEvent(this.EVENT_INPUT);
 			this._handleChange();
+			innerInput.setSelectionRange(this.value.length, this.value.length);
 		}
 
 		this.valueBeforeItemPreview = "";

package/src/Label.js

@@ -1,6 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import findNodeOwner from "@ui5/webcomponents-base/dist/util/findNodeOwner.js";
 import { isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import WrappingType from "./types/WrappingType.js";
 
@@ -145,8 +144,7 @@ class Label extends UI5Element {
 			return;
 		}
 
-		const ownerNode = findNodeOwner(this);
-		const elementToFocus = ownerNode.querySelector(`#${this.for}`);
+		const elementToFocus = this.getRootNode().querySelector(`#${this.for}`);
 		if (elementToFocus) {
 			elementToFocus.focus();
 		}

package/src/Link.js

@@ -349,6 +349,7 @@ class Link extends UI5Element {
 			shiftKey,
 		} = event;
 
+		event.stopImmediatePropagation();
 		event.isMarked = "link";
 
 		const executeEvent = this.fireEvent("click", {
@@ -373,7 +374,7 @@ class Link extends UI5Element {
 	}
 
 	_onkeydown(event) {
-		if (isEnter(event)) {
+		if (isEnter(event) && !this.href) {
 			this._onclick(event);
 		} else if (isSpace(event)) {
 			event.preventDefault();
@@ -393,6 +394,7 @@ class Link extends UI5Element {
 		if (this.href && !event.defaultPrevented) {
 			const customEvent = new MouseEvent("click");
 
+			customEvent.stopImmediatePropagation();
 			this.getDomRef().dispatchEvent(customEvent);
 		}
 	}

package/src/List.hbs

@@ -1,5 +1,5 @@
 <div
-	class="ui5-list-root"
+	class="{{classes.root}}"
 	@focusin="{{_onfocusin}}"
 	@keydown="{{_onkeydown}}"
 >

package/src/List.js

@@ -13,6 +13,7 @@ import {
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { 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";
@@ -343,6 +344,7 @@ const metadata = {
 			detail: {
 				selectedItems: { type: Array },
 				previouslySelectedItems: { type: Array },
+				targetItem: { type: HTMLElement }, // protected, holds the event target item
 				selectionComponentPressed: { type: Boolean }, // protected, indicates if the user used the selection components to change the selection
 			},
 		},
@@ -624,6 +626,15 @@ class List extends UI5Element {
 		};
 	}
 
+	get classes() {
+		return {
+			root: {
+				"ui5-list-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+			},
+		};
+	}
+
 	initItemNavigation() {
 		this._itemNavigation = new ItemNavigation(this, {
 			skipItemsSize: PAGE_UP_DOWN_SIZE, // PAGE_UP and PAGE_DOWN will skip trough 10 items
@@ -692,6 +703,7 @@ class List extends UI5Element {
 				selectedItems: this.getSelectedItems(),
 				previouslySelectedItems,
 				selectionComponentPressed: event.detail.selectionComponentPressed,
+				targetItem: event.detail.item,
 				key: event.detail.key,
 			});
 		}

package/src/Menu.hbs

@@ -57,6 +57,7 @@
 				class="ui5-menu-item"
 				id="{{../_id}}-menu-item-{{@index}}"
 				icon="{{this.item.icon}}"
+				accessible-name={{this.item.ariaLabelledByText}}
 				accessible-role="menuitem"
 				._ariaHasPopup={{this.ariaHasPopup}}
 				?disabled={{this.item.disabled}}

package/src/Menu.js

@@ -180,7 +180,7 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/Menu.js";</code>
+ * <code>import "@ui5/webcomponents/dist/Menu.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -397,11 +397,11 @@ class Menu extends UI5Element {
 	}
 
 	_prepareSubMenuDesktopTablet(item, opener, actionId) {
-		if (actionId !== this._subMenuOpenerId || item.hasChildren) {
+		if (actionId !== this._subMenuOpenerId || (item && item.hasChildren)) {
 			// close opened sub-menu if there is any opened
 			this._closeItemSubMenu(this._openedSubMenuItem, true);
 		}
-		if (item.hasChildren) {
+		if (item && item.hasChildren) {
 			// create new sub-menu
 			this._createSubMenu(item, actionId);
 			this._openItemSubMenu(item, opener, actionId);
@@ -434,7 +434,7 @@ class Menu extends UI5Element {
 			// respect mouseover only on desktop
 			const item = event.target.associatedItem;
 
-			if (item.hasChildren && item._subMenu) {
+			if (item && item.hasChildren && item._subMenu) {
 				// try to close the sub-menu
 				item._preventSubMenuClose = false;
 				this._closeItemSubMenu(item);

package/src/MenuItem.js

@@ -22,7 +22,7 @@ const metadata = {
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 <b>* Example:</b>
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -56,7 +56,19 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates if the any of the element siblings have children items.
+		 * Defines the accessible ARIA name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.7.0
+		 */
+		 accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Indicates whether any of the element siblings have children items.
 		 * @type {boolean}
 		 * @private
 		 */
@@ -66,7 +78,7 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates if the any of the element siblings have icon.
+		 * Indicates whether any of the element siblings have icon.
 		 * @type {boolean}
 		 * @private
 		 */
@@ -127,7 +139,7 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/MenuItem.js";</code>
+ * <code>import "@ui5/webcomponents/dist/MenuItem.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -154,6 +166,10 @@ class MenuItem extends UI5Element {
 	get subMenuOpened() {
 		return !!Object.keys(this._subMenu).length;
 	}
+
+	get ariaLabelledByText() {
+		return `${this.text} ${this.accessibleName}`.trim();
+	}
 }
 
 MenuItem.define();

package/src/MessageStrip.js

@@ -94,7 +94,7 @@ const metadata = {
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {sap.ui.webcomponents.main.IIcon}
 		 * @slot

package/src/MultiComboBox.js

@@ -617,7 +617,7 @@ class MultiComboBox extends UI5Element {
 
 		if (!event.relatedTarget || !event.relatedTarget.hasAttribute("ui5-token")) {
 			this._tokenizer.tokens.forEach(token => { token.selected = false; });
-			this._tokenizer.scrollToStart();
+			this._tokenizer.expanded = this._preventTokenizerToggle ? this._tokenizer.expanded : false;
 		}
 
 		if (allTokensAreBeingDeleted || lastTokenBeingDeleted) {
@@ -1064,7 +1064,7 @@ class MultiComboBox extends UI5Element {
 		const isCtrl = !!(event.metaKey || event.ctrlKey);
 
 		if (isRight(event)) {
-			const lastTokenIndex = this._tokenizer.tokens.length - 1;
+			const lastTokenIndex = this._tokenizer.tokens.length - this._tokenizer.overflownTokens.length - 1;
 
 			if (event.target === this._tokenizer.tokens[lastTokenIndex]) {
 				setTimeout(() => {
@@ -1104,6 +1104,7 @@ class MultiComboBox extends UI5Element {
 		}
 
 		if (isShow(event) && !this.readonly && !this.disabled) {
+			this._preventTokenizerToggle = true;
 			this._handleShow(event);
 		}
 	}
@@ -1226,6 +1227,7 @@ class MultiComboBox extends UI5Element {
 		this._toggle();
 
 		this._iconPressed = false;
+		this._preventTokenizerToggle = false;
 		this.filterSelected = false;
 	}
 
@@ -1406,6 +1408,7 @@ class MultiComboBox extends UI5Element {
 	inputFocusIn(event) {
 		if (!isPhone() || this.readonly) {
 			this.focused = true;
+			this._tokenizer.expanded = true;
 		} else {
 			this._innerInput.blur();
 		}
@@ -1421,7 +1424,7 @@ class MultiComboBox extends UI5Element {
 	inputFocusOut(event) {
 		if (!this.shadowRoot.contains(event.relatedTarget) && !this._deleting) {
 			this.focused = false;
-
+			this._tokenizer.expanded = this.open;
 			// remove the value if user focus out the input and focus is not going in the popover
 			if (!isPhone() && !this.allowCustomValues && (this.staticAreaItem !== event.relatedTarget)) {
 				this.value = "";
@@ -1570,7 +1573,18 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get _tokenizerExpanded() {
-		return (this._isFocusInside || this.open) && !this.readonly;
+		if (isPhone() || this.readonly) {
+			return false;
+		}
+
+		if (this._preventTokenizerToggle) {
+			return this._tokenizer.expanded;
+		}
+
+		const isCurrentlyExpanded = !!this._tokenizer && this._tokenizer.expanded;
+		const shouldBeExpanded = this.focused || this.open || isCurrentlyExpanded;
+
+		return shouldBeExpanded;
 	}
 
 	get _valueStatePopoverHorizontalAlign() {

package/src/MultiInput.js

@@ -142,6 +142,10 @@ class MultiInput extends Input {
 		const focusedToken = event.detail.ref;
 		const selectedTokens = this.tokens.filter(token => token.selected);
 
+		if (this._readonly) {
+			return;
+		}
+
 		if (selectedTokens.indexOf(focusedToken) === -1) {
 			selectedTokens.push(focusedToken);
 		}
@@ -175,6 +179,8 @@ class MultiInput extends Input {
 
 	innerFocusIn() {
 		this.expandedTokenizer = true;
+		this.focused = true;
+		this.tokenizer.scrollToEnd();
 	}
 
 	_onkeydown(event) {
@@ -218,8 +224,6 @@ class MultiInput extends Input {
 			}
 		}
 
-		this.tokenizer._handleItemNavigation(event, tokens);
-
 		if (isCtrl && ["c", "x"].includes(event.key.toLowerCase())) {
 			event.preventDefault();
 
@@ -274,6 +278,9 @@ class MultiInput extends Input {
 
 		if (!insideDOM && !insideShadowDom) {
 			this.expandedTokenizer = false;
+
+			// we need to reset tabindex setting by tokenizer
+			this.tokenizer._itemNav._currentIndex = -1;
 		}
 	}
 

package/src/Option.js

@@ -47,7 +47,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b>
 		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @public

package/src/Panel.hbs

@@ -8,55 +8,59 @@
 	{{#if hasHeaderOrHeaderText}}
 		{{! header: either header or h1 with header text}}
 		<div
-			@click="{{_headerClick}}"
-			@keydown="{{_headerKeyDown}}"
-			@keyup="{{_headerKeyUp}}"
-			class="ui5-panel-header"
-			tabindex="{{headerTabIndex}}"
-			role="{{accInfo.role}}"
-			aria-expanded="{{accInfo.ariaExpanded}}"
-			aria-controls="{{accInfo.ariaControls}}"
-			aria-labelledby="{{accInfo.ariaLabelledby}}"
-			part="header"
+			class="ui5-panel-heading-wrapper"
+			role="{{headingWrapperRole}}"
+			aria-level="{{headingWrapperAriaLevel}}"
 		>
-			{{#unless fixed}}
-				<div class="ui5-panel-header-button-root">
-					{{#if _hasHeader}}
-						<ui5-button
-							design="Transparent"
-							class="ui5-panel-header-button ui5-panel-header-button-with-icon"
-							@click="{{_toggleButtonClick}}"
-							.accessibilityAttributes={{accInfo.button.accessibilityAttributes}}
-							tooltip="{{accInfo.button.title}}"
-							accessible-name="{{accInfo.button.ariaLabelButton}}"
-						>
-							<div class="ui5-panel-header-icon-wrapper">
-								<ui5-icon class="ui5-panel-header-icon {{classes.headerBtn}}" name="slim-arrow-right"></ui5-icon>
-							</div>
-						</ui5-button>
-					{{else}}
-						<ui5-icon
-							class="ui5-panel-header-button ui5-panel-header-icon {{classes.headerBtn}}"
-							name="slim-arrow-right"
-							show-tooltip
-							accessible-name="{{toggleButtonTitle}}"
-						></ui5-icon>
-					{{/if}}
-				</div>
-			{{/unless}}
+			<div
+				@click="{{_headerClick}}"
+				@keydown="{{_headerKeyDown}}"
+				@keyup="{{_headerKeyUp}}"
+				class="ui5-panel-header"
+				tabindex="{{headerTabIndex}}"
+				role="{{accInfo.role}}"
+				aria-expanded="{{accInfo.ariaExpanded}}"
+				aria-controls="{{accInfo.ariaControls}}"
+				aria-labelledby="{{accInfo.ariaLabelledby}}"
+				part="header"
+			>
+				{{#unless fixed}}
+					<div class="ui5-panel-header-button-root">
+						{{#if _hasHeader}}
+							<ui5-button
+								design="Transparent"
+								class="ui5-panel-header-button ui5-panel-header-button-with-icon"
+								@click="{{_toggleButtonClick}}"
+								.accessibilityAttributes={{accInfo.button.accessibilityAttributes}}
+								tooltip="{{accInfo.button.title}}"
+								accessible-name="{{accInfo.button.ariaLabelButton}}"
+							>
+								<div class="ui5-panel-header-icon-wrapper">
+									<ui5-icon class="ui5-panel-header-icon {{classes.headerBtn}}" name="slim-arrow-right"></ui5-icon>
+								</div>
+							</ui5-button>
+						{{else}}
+							<ui5-icon
+								class="ui5-panel-header-button ui5-panel-header-icon {{classes.headerBtn}}"
+								name="slim-arrow-right"
+								show-tooltip
+								accessible-name="{{toggleButtonTitle}}"
+							></ui5-icon>
+						{{/if}}
+					</div>
+				{{/unless}}
 
-			{{#if _hasHeader}}
-				<slot name="header"></slot>
-			{{else}}
-				<div
-					id="{{_id}}-header-title"
-					role="heading"
-					aria-level="{{headerAriaLevel}}"
-					class="ui5-panel-header-title"
-				>
-					{{headerText}}
-				</div>
-			{{/if}}
+				{{#if _hasHeader}}
+					<slot name="header"></slot>
+				{{else}}
+					<div
+						id="{{_id}}-header-title"
+						class="ui5-panel-header-title"
+					>
+						{{headerText}}
+					</div>
+				{{/if}}
+			</div>
 		</div>
 	{{/if}}
 

package/src/Panel.js

@@ -322,7 +322,7 @@ class Panel extends UI5Element {
 		}
 
 		if (isEnter(event)) {
-			this._toggleOpen();
+			event.preventDefault();
 		}
 
 		if (isSpace(event)) {
@@ -335,6 +335,10 @@ class Panel extends UI5Element {
 			return;
 		}
 
+		if (isEnter(event)) {
+			this._toggleOpen();
+		}
+
 		if (isSpace(event)) {
 			this._toggleOpen();
 		}
@@ -441,6 +445,14 @@ class Panel extends UI5Element {
 		return (this.header.length || this.fixed) ? "-1" : "0";
 	}
 
+	get headingWrapperAriaLevel() {
+		return !this._hasHeader ? this.headerAriaLevel : undefined;
+	}
+
+	get headingWrapperRole() {
+		return !this._hasHeader ? "heading" : undefined;
+	}
+
 	get nonFixedInternalHeader() {
 		return !this._hasHeader && !this.fixed;
 	}

package/src/Popover.js

@@ -1,5 +1,6 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
+import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 import Popup from "./Popup.js";
@@ -145,14 +146,14 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the opener id of the element that the popover is shown at
+		 * Defines the ID or DOM Reference of the element that the popover is shown at
 		 * @public
-		 * @type {String}
+		 * @type {DOMReference}
 		 * @defaultvalue ""
 		 * @since 1.2.0
 		 */
 		opener: {
-			type: String,
+			type: DOMReference,
 		},
 
 		/**
@@ -305,7 +306,7 @@ class Popover extends Popup {
 
 	onAfterRendering() {
 		if (!this.isOpen() && this.open) {
-			const opener = document.getElementById(this.opener);
+			const opener = this.opener instanceof HTMLElement ? this.opener : this.getRootNode().getElementById(this.opener);
 			if (!opener) {
 				console.warn("Valid opener id is required."); // eslint-disable-line
 				return;

package/src/Popup.hbs

@@ -1,7 +1,7 @@
 <section
 	style="{{styles.root}}"
 	class="{{classes.root}}"
-	role="dialog"
+	role="{{_role}}"
 	aria-modal="{{_ariaModal}}"
 	aria-label="{{_ariaLabel}}"
 	aria-labelledby="{{_ariaLabelledBy}}"

package/src/Popup.js

@@ -4,8 +4,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
-import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEnter, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
@@ -322,7 +323,11 @@ class Popup extends UI5Element {
 	}
 
 	_onkeydown(e) {
-		if (e.target === this._root && isTabPrevious(e)) {
+		const isTabOutAttempt = e.target === this._root && isTabPrevious(e);
+		// if the popup is closed, focus is already moved, so Enter keydown may result in click on the newly focused element
+		const isEnterOnClosedPopupChild = isEnter(e) && !this.isOpen();
+
+		if (isTabOutAttempt || isEnterOnClosedPopupChild) {
 			e.preventDefault();
 		}
 	}
@@ -446,6 +451,7 @@ class Popup extends UI5Element {
 
 		this._zIndex = getNextZIndex();
 		this.style.zIndex = this._zIndex;
+
 		this._focusedElementBeforeOpen = getFocusedElement();
 
 		this._show();
@@ -591,6 +597,10 @@ class Popup extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-popup-root");
 	}
 
+	get _role() {
+		return "dialog";
+	}
+
 	get contentDOM() {
 		return this.shadowRoot.querySelector(".ui5-popup-content");
 	}
@@ -609,6 +619,7 @@ class Popup extends UI5Element {
 		return {
 			root: {
 				"ui5-popup-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
 			},
 			content: {
 				"ui5-popup-content": true,

package/src/RangeSlider.hbs

@@ -37,7 +37,7 @@
 		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="source-code" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
@@ -59,7 +59,7 @@
 		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="source-code" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">

package/src/RangeSlider.js

@@ -183,7 +183,7 @@ class RangeSlider extends SliderBase {
 	/**
 	 * Check if the previously saved state is outdated. That would mean
 	 * either it is the initial rendering or that a property has been changed
-	 * programatically - because the previous state is always updated in
+	 * programmatically - because the previous state is always updated in
 	 * the interaction handlers.
 	 *
 	 * Normalize current properties, update the previously stored state.

package/src/Select.js

@@ -641,7 +641,6 @@ class Select extends UI5Element {
 	_beforeOpen() {
 		this._selectedIndexBeforeOpen = this._selectedIndex;
 		this._lastSelectedOption = this._filteredItems[this._selectedIndex];
-		this.focused = false;
 	}
 
 	_afterOpen() {
@@ -650,7 +649,6 @@ class Select extends UI5Element {
 
 	_afterClose() {
 		this.opened = false;
-		this.focused = true;
 		this._iconPressed = false;
 		this._listWidth = 0;