@ui5/webcomponents 1.2.6 → 1.4.0

package/src/MultiInput.hbs

@@ -11,7 +11,7 @@
 		show-more
 		@keydown="{{_onTokenizerKeydown}}"
 		@show-more-items-press={{showMorePress}}
-		@token-delete={{tokenDelete}}
+		@ui5-token-delete={{tokenDelete}}
 		@focusout="{{_tokenizerFocusOut}}"
 	>
 		<slot name="tokens"></slot>

package/src/MultiInput.js

@@ -182,18 +182,17 @@ class MultiInput extends Input {
 
 		const isHomeInBeginning = isHome(event) && event.target.selectionStart === 0;
 
-		if (isLeft(event) || isHomeInBeginning) {
-			this._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens.
+		if (isHomeInBeginning) {
+			this._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens
+			return this._focusFirstToken(event);
+		}
 
+		if (isLeft(event) || isBackSpace(event)) {
+			this._skipOpenSuggestions = true;
 			return this._handleLeft(event);
 		}
 
 		this._skipOpenSuggestions = false;
-		if (isBackSpace(event) && event.target.value === "") {
-			event.preventDefault();
-
-			this.tokenizer._focusLastToken();
-		}
 
 		if (isShow(event)) {
 			this.valueHelpPress();
@@ -243,18 +242,30 @@ class MultiInput extends Input {
 		}
 	}
 
-	_handleLeft() {
+	_handleLeft(event) {
 		const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
 		const tokens = this.tokens;
 		const lastToken = tokens.length && tokens[tokens.length - 1];
 
 		if (cursorPosition === 0 && lastToken) {
-			// this.tokenizer._focusLastToken(); won't work as the tokens in the MultiInput use different slot and are not resolved properly
+			event.preventDefault();
 			lastToken.focus();
 			this.tokenizer._itemNav.setCurrentItem(lastToken);
 		}
 	}
 
+	_focusFirstToken(event) {
+		const tokens = this.tokens;
+		const firstToken = tokens.length && tokens[0];
+
+		if (firstToken) {
+			event.preventDefault();
+
+			firstToken.focus();
+			this.tokenizer._itemNav.setCurrentItem(firstToken);
+		}
+	}
+
 	_onfocusout(event) {
 		super._onfocusout(event);
 		const relatedTarget = event.relatedTarget;

package/src/Option.js

@@ -68,6 +68,16 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the additional text displayed at the end of the option element.
+		 * @type {string}
+		 * @public
+		 * @since 1.3.0
+		 */
+		 additionalText: {
+			type: String,
+		},
+
 		/**
 		 * Defines the focused state of the component.
 		 * @type {boolean}

package/src/Panel.hbs

@@ -2,7 +2,6 @@
 	class="ui5-panel-root"
 	role="{{accRole}}"
 	aria-label="{{effectiveAccessibleName}}"
-	dir="{{effectiveDir}}"
 >
 	{{! header: either header or h1 with header text}}
 	<div
@@ -15,19 +14,23 @@
 		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 {{classes.headerBtn}}"
-						icon="slim-arrow-right"
+						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}}"
-					></ui5-button>
+					>
+						<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}}"

package/src/Panel.js

@@ -235,6 +235,7 @@ const metadata = {
  * <br>
  * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:
  * <ul>
+ * <li>header - Used to style the wrapper of the header</li>
  * <li>content - Used to style the wrapper of the content</li>
  * </ul>
  *

package/src/Popover.hbs

@@ -17,7 +17,7 @@
 {{#*inline "afterContent"}}
 	{{#if _displayFooter}}
 		{{#if footer.length }}
-			<footer class="ui5-popup-footer-root"  part="footer">
+			<footer class="ui5-popup-footer-root" part="footer">
 				<slot name="footer"></slot>
 			</footer>
 		{{/if}}

package/src/Popover.js

@@ -386,6 +386,13 @@ class Popover extends Popup {
 			&& openerRect.right === 0;
 	}
 
+	isOpenerOutsideViewport(openerRect) {
+		return openerRect.bottom < 0
+			|| openerRect.top > window.innerHeight
+			|| openerRect.right < 0
+			|| openerRect.left > window.innerWidth;
+	}
+
 	/**
 	 * @override
 	 */
@@ -425,7 +432,7 @@ class Popover extends Popup {
 
 		const stretching = this.horizontalAlign === PopoverHorizontalAlign.Stretch;
 
-		if (this._preventRepositionAndClose) {
+		if (this._preventRepositionAndClose || this.isOpenerOutsideViewport(this._openerRect)) {
 			return this.close();
 		}
 
@@ -501,10 +508,6 @@ class Popover extends Popup {
 		return { width, height };
 	}
 
-	get contentDOM() {
-		return this.shadowRoot.querySelector(".ui5-popup-content");
-	}
-
 	get arrowDOM() {
 		return this.shadowRoot.querySelector(".ui5-popover-arrow");
 	}

package/src/Popup.hbs

@@ -5,7 +5,6 @@
 	aria-modal="{{_ariaModal}}"
 	aria-label="{{_ariaLabel}}"
 	aria-labelledby="{{_ariaLabelledBy}}"
-	dir="{{effectiveDir}}"
 	@keydown={{_onkeydown}}
 	@focusout={{_onfocusout}}
 	@mouseup={{_onmouseup}}

package/src/Popup.js

@@ -591,6 +591,10 @@ class Popup extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-popup-root");
 	}
 
+	get contentDOM() {
+		return this.shadowRoot.querySelector(".ui5-popup-content");
+	}
+
 	get styles() {
 		return {
 			root: {},

package/src/ProgressIndicator.hbs

@@ -1,5 +1,4 @@
 <div class="ui5-progress-indicator-root {{classes.root}}"
-     dir="{{effectiveDir}}"
      role="progressbar"
      aria-valuemin="0"
      aria-valuenow="{{validatedValue}}"

package/src/RadioButton.hbs

@@ -6,7 +6,6 @@
 	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedBy}}"
 	tabindex="{{tabIndex}}"
-	dir="{{effectiveDir}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
@@ -18,7 +17,7 @@
 	<div class='ui5-radio-inner {{classes.inner}}'>
 		<svg class="ui5-radio-svg" focusable="false" aria-hidden="true">
 			<circle class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
-			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" r="22%" />
+			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" />
 		</svg>
  		<input type='radio' ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
 	</div>

package/src/RadioButton.js

@@ -21,7 +21,12 @@ import WrappingType from "./types/WrappingType.js";
 import RadioButtonTemplate from "./generated/templates/RadioButtonTemplate.lit.js";
 
 // i18n
-import { VALUE_STATE_ERROR, VALUE_STATE_WARNING } from "./generated/i18n/i18n-defaults.js";
+import {
+	VALUE_STATE_ERROR,
+	VALUE_STATE_WARNING,
+	VALUE_STATE_SUCCESS,
+	VALUE_STATE_INFORMATION,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import radioButtonCss from "./generated/themes/RadioButton.css.js";
@@ -100,6 +105,8 @@ const metadata = {
 		 * <li><code>None</code></li>
 		 * <li><code>Error</code></li>
 		 * <li><code>Warning</code></li>
+		 * <li><code>Success</code></li>
+		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
 		 * @type {ValueState}
@@ -446,6 +453,8 @@ class RadioButton extends UI5Element {
 		return {
 			"Error": RadioButton.i18nBundle.getText(VALUE_STATE_ERROR),
 			"Warning": RadioButton.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": RadioButton.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Information": RadioButton.i18nBundle.getText(VALUE_STATE_INFORMATION),
 		};
 	}
 

package/src/RangeSlider.hbs

@@ -17,7 +17,7 @@
 			aria-valuemin="{{min}}"
 			aria-valuemax="{{max}}"
 			aria-valuetext="From {{startValue}} to {{endValue}}"
-			aria-labelledby="{{_id}}-sliderDesc"
+			aria-labelledby="{{_ariaLabelledByProgressBarRefs}}"
 			aria-disabled="{{_ariaDisabled}}"
 		></div>
 	</div>
@@ -34,7 +34,7 @@
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{startValue}}"
-		aria-labelledby="{{_id}}-startHandleDesc"
+		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
 		<ui5-icon name="source-code" slider-icon></ui5-icon>
@@ -56,7 +56,7 @@
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{endValue}}"
-		aria-labelledby="{{_id}}-endHandleDesc"
+		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
 		<ui5-icon name="source-code" slider-icon></ui5-icon>

package/src/RangeSlider.js

@@ -16,6 +16,9 @@ import {
 	RANGE_SLIDER_END_HANDLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 
+// Styles
+import rangeSliderStyles from "./generated/themes/RangeSlider.css.js";
+
 /**
  * @public
  */
@@ -48,6 +51,10 @@ const metadata = {
 			type: Float,
 			defaultValue: 100,
 		},
+
+		rangePressed: {
+			type: Boolean,
+		},
 	},
 };
 
@@ -129,6 +136,10 @@ class RangeSlider extends SliderBase {
 		return [Icon];
 	}
 
+	static get styles() {
+		return [SliderBase.styles, rangeSliderStyles];
+	}
+
 	constructor() {
 		super();
 		this._stateStorage.startValue = null;
@@ -356,6 +367,8 @@ class RangeSlider extends SliderBase {
 		// Determine the rest of the needed details from the start of the interaction.
 		this._saveInteractionStartData(event, newValue);
 
+		this.rangePressed = this._isPressInCurrentRange;
+
 		// Do not yet update the RangeSlider if press is in range or over a handle.
 		if (this._isPressInCurrentRange || this._handeIsPressed) {
 			this._handeIsPressed = false;
@@ -455,6 +468,8 @@ class RangeSlider extends SliderBase {
 		this._setIsPressInCurrentRange(false);
 
 		this.handleUpBase();
+
+		this.rangePressed = false;
 	}
 
 	/**
@@ -723,6 +738,24 @@ class RangeSlider extends SliderBase {
 		return this._reversedValues;
 	}
 
+	get tickmarksObject() {
+		const count = this._tickmarksCount;
+		const arr = [];
+
+		if (this._hiddenTickmarks) {
+			return [false, false];
+		}
+
+		for (let i = 0; i <= count; i++) {
+			const isBiggerThanStartValue = this._effectiveMin + (i * this.step) >= this.startValue;
+			const isBiggerThanEndValue = this._effectiveMin + (i * this.step) <= this.endValue;
+
+			arr.push(isBiggerThanStartValue && isBiggerThanEndValue);
+		}
+
+		return arr;
+	}
+
 	get _startHandle() {
 		return this.shadowRoot.querySelector(".ui5-slider-handle--start");
 	}
@@ -735,6 +768,18 @@ class RangeSlider extends SliderBase {
 		return this.shadowRoot.querySelector(".ui5-slider-progress");
 	}
 
+	get _ariaLabelledByStartHandleRefs() {
+		return [`${this._id}-accName`, `${this._id}-startHandleDesc`].join(" ").trim();
+	}
+
+	get _ariaLabelledByEndHandleRefs() {
+		return [`${this._id}-accName`, `${this._id}-endHandleDesc`].join(" ").trim();
+	}
+
+	get _ariaLabelledByProgressBarRefs() {
+		return [`${this._id}-accName`, `${this._id}-sliderDesc`].join(" ").trim();
+	}
+
 	get styles() {
 		return {
 			progress: {

package/src/RatingIndicator.hbs

@@ -16,20 +16,34 @@
 	title="{{tooltip}}"
 	aria-label="{{accessibleName}}"
 >
-	<div
-		class="ui5-rating-indicator-stars-wrapper"
+	<ul class="ui5-rating-indicator-list"
 		aria-hidden="true"
-	>
+		>
 		{{#each _stars}}
 			{{#if this.selected}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-active-icon" data-value="{{this.index}}">&#9733;</div>
+				<li data-ui5-value="{{this.index}}" class="ui5-rating-indicator-item ui5-rating-indicator-item-sel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
 			{{else if this.halfStar}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-half-icon" data-value="{{this.index}}">&#9734;</div>
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-half">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+					<div class="ui5-rating-indicator-half-icon-wrapper">
+						<ui5-icon data-ui5-value="{{this.index}}" name="favorite" class="ui5-rating-indicator-half-icon"></ui5-icon>
+					</div>
+				</li>
 			{{else if ../readonly}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-readonly-unselected-icon" data-value="{{this.index}}">&#9733;</div>
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
+			{{else if ../disabled}}
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
 			{{else}}
-				<div class="ui5-rating-indicator-icon" data-value="{{this.index}}">&#9734;</div>
+				<li data-ui5-value="{{this.index}}" class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+				</li>
 			{{/if}}
 		{{/each}}
-	</div>
+	</ul>
 </div>

package/src/RatingIndicator.js

@@ -18,6 +18,8 @@ import {
 	RATING_INDICATOR_TOOLTIP_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
 import RatingIndicatorTemplate from "./generated/templates/RatingIndicatorTemplate.lit.js";
+import "@ui5/webcomponents-icons/dist/favorite.js";
+import "@ui5/webcomponents-icons/dist/unfavorite.js";
 
 // Styles
 import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
@@ -231,7 +233,7 @@ class RatingIndicator extends UI5Element {
 			return;
 		}
 
-		this.value = parseInt(event.target.getAttribute("data-value"));
+		this.value = parseInt(event.target.getAttribute("data-ui5-value"));
 
 		if (this.value === 1 && this._liveValue === 1) {
 			this.value = 0;

package/src/ResponsivePopover.js

@@ -167,6 +167,10 @@ class ResponsivePopover extends Popover {
 		return this.shadowRoot.querySelector("[ui5-dialog]");
 	}
 
+	get contentDOM() {
+		return this._isPhone ? this._dialog.contentDOM : super.contentDOM;
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}

package/src/SegmentedButton.hbs

@@ -5,7 +5,6 @@
 	@focusin="{{_onfocusin}}"
 	class="ui5-segmented-button-root"
 	role="listbox"
-	dir="{{effectiveDir}}"
 	aria-multiselectable="true"
 	aria-describedby="{{_id}}-invisibleText"
 	aria-roledescription={{ariaDescription}}

package/src/SegmentedButtonItem.hbs

@@ -8,7 +8,6 @@
 		aria-disabled="{{disabled}}"
 		data-sap-focus-ref
 	{{> ariaPressed}}
-		dir="{{effectiveDir}}"
 		@focusout={{_onfocusout}}
 		@focusin={{_onfocusin}}
 		@click={{_onclick}}

package/src/Select.hbs

@@ -1,6 +1,5 @@
 <div
-	class="ui5-select-root"
-	dir="{{effectiveDir}}"
+	class="ui5-select-root ui5-input-focusable-element"
 	id="{{_id}}-select"
 	@click="{{_onclick}}"
 >
@@ -9,7 +8,6 @@
 			aria-hidden="true"
 			class="ui5-select-option-icon"
 			name="{{selectedOptionIcon}}"
-			dir="{{effectiveDir}}"
 		></ui5-icon>
 	{{/if}}
 	<div class="ui5-select-label-root"
@@ -36,7 +34,6 @@
 		name="slim-arrow-down"
 		input-icon
 		?pressed="{{_iconPressed}}"
-		dir="{{effectiveDir}}"
 	></ui5-icon>
 
 	{{#if hasValueState}}

package/src/Select.js

@@ -408,6 +408,7 @@ class Select extends UI5Element {
 				value: opt.value,
 				textContent: opt.textContent,
 				title: opt.title,
+				additionalText: opt.additionalText,
 				id: opt._id,
 				stableDomRef: opt.stableDomRef,
 			};
@@ -503,7 +504,7 @@ class Select extends UI5Element {
 		const itemToSelect = this._searchNextItemByText(text);
 
 		if (itemToSelect) {
-			const nextIndex = this._getSelectedItemIndex(itemToSelect);
+			const nextIndex = this._filteredItems.indexOf(itemToSelect);
 
 			this._changeSelectedItem(this._selectedIndex, nextIndex);
 
@@ -546,7 +547,7 @@ class Select extends UI5Element {
 	}
 
 	_getSelectedItemIndex(item) {
-		return [].indexOf.call(item.parentElement.children, item);
+		return this._filteredItems.findIndex(option => `${option._id}-li` === item.id);
 	}
 
 	_select(index) {
@@ -636,6 +637,7 @@ class Select extends UI5Element {
 	_beforeOpen() {
 		this._selectedIndexBeforeOpen = this._selectedIndex;
 		this._lastSelectedOption = this._filteredItems[this._selectedIndex];
+		this.focused = false;
 	}
 
 	_afterOpen() {
@@ -644,6 +646,7 @@ class Select extends UI5Element {
 
 	_afterClose() {
 		this.opened = false;
+		this.focused = true;
 		this._iconPressed = false;
 		this._listWidth = 0;
 
@@ -745,6 +748,9 @@ class Select extends UI5Element {
 				"display": this._filteredItems.length && this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._filteredItems.length ? this._listWidth : this.offsetWidth}px`,
 			},
+			responsivePopover: {
+				"min-width": `${this.offsetWidth}px`,
+			},
 		};
 	}
 

package/src/SelectPopover.hbs

@@ -4,11 +4,12 @@
 		_disable-initial-focus
 		placement-type="Bottom"
 		class="ui5-select-popover {{classes.popover}}"
-		horizontal-align="Stretch"
+		horizontal-align="Left"
 		@ui5-after-open="{{_afterOpen}}"
 		@ui5-before-open="{{_beforeOpen}}"
 		@ui5-after-close="{{_afterClose}}"
 		@keydown="{{_onkeydown}}"
+		style={{styles.responsivePopover}}
 	>
 		{{#if _isPhone}}
 			<div slot="header" class="ui5-responsive-popover-header">
@@ -51,6 +52,7 @@
 					?selected="{{this.selected}}"
 					?focused="{{this._focused}}"
 					title="{{this.title}}"
+					additional-text="{{this.additionalText}}"
 					?aria-selected="{{this.selected}}"
 					data-ui5-stable="{{this.stableDomRef}}"
 				>

package/src/Slider.hbs

@@ -27,12 +27,12 @@
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{value}}"
-		aria-labelledby="{{_id}}-sliderDesc"
+		aria-labelledby="{{_ariaLabelledByHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 		data-sap-focus-ref
 		part="handle"
 	>
-	<ui5-icon name="source-code" part="icon-slider" slider-icon></ui5-icon>
+			<ui5-icon name="source-code" part="icon-slider" slider-icon></ui5-icon>
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
 				<span class="ui5-slider-tooltip-value">{{tooltipValue}}</span>

package/src/Slider.js

@@ -278,9 +278,6 @@ class Slider extends SliderBase {
 			handle: {
 				[this.directionStart]: `${this._handlePositionFromStart}%`,
 			},
-			tickmarks: {
-				"background": `${this._tickmarks}`,
-			},
 			label: {
 				"width": `${this._labelWidth}%`,
 			},
@@ -318,6 +315,21 @@ class Slider extends SliderBase {
 	static async onDefine() {
 		Slider.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
+
+	get tickmarksObject() {
+		const count = this._tickmarksCount;
+		const arr = [];
+
+		if (this._hiddenTickmarks) {
+			return [true, false];
+		}
+
+		for (let i = 0; i <= count; i++) {
+			arr.push(this._effectiveMin + (i * this.step) <= this.value);
+		}
+
+		return arr;
+	}
 }
 
 Slider.define();

package/src/SliderBase.hbs

@@ -6,14 +6,21 @@
 	@mouseout="{{_onmouseout}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
-	dir="{{effectiveDir}}"
 >
 	{{> handlesAriaText}}
 
 	<div class="ui5-slider-inner">
 		{{#if step}}
 			{{#if showTickmarks}}
-				<div class="ui5-slider-tickmarks" style="{{styles.tickmarks}}"></div>
+				<ul class="ui5-slider-tickmarks">
+					{{#each tickmarksObject}}
+						{{#if this}}
+							<li class="ui5-slider-tickmark ui5-slider-tickmark-in-range"></li>
+						{{else}}
+							<li class="ui5-slider-tickmark"></li>
+						{{/if}}
+					{{/each}}
+				</ul>
 				{{#if labelInterval}}
 					<ul class="ui5-slider-labels {{classes.labelContainer}}" style="{{styles.labelContainer}}">
 						{{#each _labels}}
@@ -29,6 +36,7 @@
 		{{> handles}}
 	</div>
 
+	<span id="{{_id}}-accName" class="ui5-hidden-text">{{accessibleName}}</span>
 	<span id="{{_id}}-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
 </div>