@ui5/webcomponents 0.0.0-2c7615fe9 → 0.0.0-3236d56be

package/src/Select.js

@@ -12,11 +12,16 @@ import {
 	isTabNext,
 	isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/information.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
@@ -26,6 +31,8 @@ import {
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
+	LIST_ITEM_POSITION,
+	SELECT_ROLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 import Option from "./Option.js";
 import Label from "./Label.js";
@@ -172,9 +179,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @since 1.0.0-rc.9
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -186,7 +193,7 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the select.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -262,18 +269,10 @@ const metadata = {
  * </ul>
  * <br>
  *
- * <h3>Stable DOM Refs</h3>
- *
- * In the context of <code>ui5-select</code>, you can provide a custom stable DOM ref for:
- * <ul>
- * <li>Every <code>ui5-option</code> that you provide.
- * Example: <code><ui5-option stable-dom-ref="option1"></ui5-option></code></li>
- * </ul>
- *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents/dist/Select";</code>
  * <br>
- * <code>import "@ui5/webcomponents/dist/Option";</code>
+ * <code>import "@ui5/webcomponents/dist/Option";</code> (comes with <code>ui5-select</code>)
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Select
@@ -318,7 +317,6 @@ class Select extends UI5Element {
 		this._lastSelectedOption = null;
 		this._typedChars = "";
 		this._typingTimeoutID = -1;
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -334,6 +332,8 @@ class Select extends UI5Element {
 				this._listWidth = this.responsivePopover.offsetWidth;
 			}
 		}
+
+		this._attachRealDomRefs();
 	}
 
 	_onfocusin() {
@@ -342,7 +342,6 @@ class Select extends UI5Element {
 
 	_onfocusout() {
 		this.focused = false;
-		this.itemSelectionAnnounce();
 	}
 
 	get _isPickerOpen() {
@@ -357,11 +356,11 @@ class Select extends UI5Element {
 	/**
 	 * Currently selected option.
 	 * @readonly
-	 * @type { ui5-option }
+	 * @type { sap.ui.webcomponents.main.ISelectOption }
 	 * @public
 	 */
 	get selectedOption() {
-		return this.options.find(option => option.selected);
+		return this._filteredItems.find(option => option.selected);
 	}
 
 	async _toggleRespPopover() {
@@ -378,15 +377,24 @@ class Select extends UI5Element {
 		}
 	}
 
+	async _attachRealDomRefs() {
+		this.responsivePopover = await this._respPopover();
+
+		this.options.forEach(option => {
+			option._getRealDomRef = () => this.responsivePopover.querySelector(`*[data-ui5-stable=${option.stableDomRef}]`);
+		});
+	}
+
 	_syncSelection() {
 		let lastSelectedOptionIndex = -1,
 			firstEnabledOptionIndex = -1;
-		const opts = this.options.map((opt, index) => {
+		const options = this._filteredItems;
+		const syncOpts = options.map((opt, index) => {
 			if (opt.selected || opt.textContent === this.value) {
 				// The second condition in the IF statement is added because of Angular Reactive Forms Support(Two way data binding)
 				lastSelectedOptionIndex = index;
 			}
-			if (!opt.disabled && (firstEnabledOptionIndex === -1)) {
+			if (firstEnabledOptionIndex === -1) {
 				firstEnabledOptionIndex = index;
 			}
 
@@ -396,36 +404,37 @@ class Select extends UI5Element {
 			return {
 				selected: false,
 				_focused: false,
-				disabled: opt.disabled,
 				icon: opt.icon,
 				value: opt.value,
 				textContent: opt.textContent,
+				title: opt.title,
+				additionalText: opt.additionalText,
 				id: opt._id,
 				stableDomRef: opt.stableDomRef,
 			};
 		});
 
-		if (lastSelectedOptionIndex > -1 && !opts[lastSelectedOptionIndex].disabled) {
-			opts[lastSelectedOptionIndex].selected = true;
-			opts[lastSelectedOptionIndex]._focused = true;
-			this.options[lastSelectedOptionIndex].selected = true;
-			this.options[lastSelectedOptionIndex]._focused = true;
-			this._text = opts[lastSelectedOptionIndex].textContent;
+		if (lastSelectedOptionIndex > -1 && !syncOpts[lastSelectedOptionIndex].disabled) {
+			syncOpts[lastSelectedOptionIndex].selected = true;
+			syncOpts[lastSelectedOptionIndex]._focused = true;
+			options[lastSelectedOptionIndex].selected = true;
+			options[lastSelectedOptionIndex]._focused = true;
+			this._text = syncOpts[lastSelectedOptionIndex].textContent;
 			this._selectedIndex = lastSelectedOptionIndex;
 		} else {
 			this._text = "";
 			this._selectedIndex = -1;
-			if (opts[firstEnabledOptionIndex]) {
-				opts[firstEnabledOptionIndex].selected = true;
-				opts[firstEnabledOptionIndex]._focused = true;
-				this.options[firstEnabledOptionIndex].selected = true;
-				this.options[firstEnabledOptionIndex]._focused = true;
+			if (syncOpts[firstEnabledOptionIndex]) {
+				syncOpts[firstEnabledOptionIndex].selected = true;
+				syncOpts[firstEnabledOptionIndex]._focused = true;
+				options[firstEnabledOptionIndex].selected = true;
+				options[firstEnabledOptionIndex]._focused = true;
 				this._selectedIndex = firstEnabledOptionIndex;
-				this._text = this.options[firstEnabledOptionIndex].textContent;
+				this._text = options[firstEnabledOptionIndex].textContent;
 			}
 		}
 
-		this._syncedOptions = opts;
+		this._syncedOptions = syncOpts;
 	}
 
 	_enableFormSupport() {
@@ -506,7 +515,7 @@ class Select extends UI5Element {
 	}
 
 	_searchNextItemByText(text) {
-		let orderedOptions = this.options.slice(0);
+		let orderedOptions = this._filteredItems.slice(0);
 		const optionsAfterSelected = orderedOptions.splice(this._selectedIndex + 1, orderedOptions.length - this._selectedIndex);
 		const optionsBeforeSelected = orderedOptions.splice(0, orderedOptions.length - 1);
 
@@ -521,7 +530,7 @@ class Select extends UI5Element {
 	}
 
 	_handleEndKey(event) {
-		const lastIndex = this.options.length - 1;
+		const lastIndex = this._filteredItems.length - 1;
 
 		event.preventDefault();
 		this._changeSelectedItem(this._selectedIndex, lastIndex);
@@ -542,9 +551,9 @@ class Select extends UI5Element {
 	}
 
 	_select(index) {
-		this.options[this._selectedIndex].selected = false;
+		this._filteredItems[this._selectedIndex].selected = false;
 		this._selectedIndex = index;
-		this.options[index].selected = true;
+		this._filteredItems[index].selected = true;
 	}
 
 	/**
@@ -552,7 +561,7 @@ class Select extends UI5Element {
 	 * @private
 	 */
 	_handleItemPress(event) {
-		const item = event.detail.item;
+		const item = event.detail.selectedItems[0];
 		const selectedItemIndex = this._getSelectedItemIndex(item);
 
 		this._handleSelectionChange(selectedItemIndex);
@@ -601,17 +610,19 @@ class Select extends UI5Element {
 	}
 
 	_changeSelectedItem(oldIndex, newIndex) {
-		this.options[oldIndex].selected = false;
-		this.options[oldIndex]._focused = false;
+		const options = this._filteredItems;
 
-		this.options[newIndex].selected = true;
-		this.options[newIndex]._focused = true;
+		options[oldIndex].selected = false;
+		options[oldIndex]._focused = false;
+
+		options[newIndex].selected = true;
+		options[newIndex]._focused = true;
 
 		this._selectedIndex = newIndex;
 
 		if (!this._isPickerOpen) {
 			// arrow pressed on closed picker - do selection change
-			this._fireChangeEvent(this.options[newIndex]);
+			this._fireChangeEvent(options[newIndex]);
 		}
 	}
 
@@ -625,7 +636,8 @@ class Select extends UI5Element {
 
 	_beforeOpen() {
 		this._selectedIndexBeforeOpen = this._selectedIndex;
-		this._lastSelectedOption = this.options[this._selectedIndex];
+		this._lastSelectedOption = this._filteredItems[this._selectedIndex];
+		this.focused = false;
 	}
 
 	_afterOpen() {
@@ -634,15 +646,16 @@ class Select extends UI5Element {
 
 	_afterClose() {
 		this.opened = false;
+		this.focused = true;
 		this._iconPressed = false;
 		this._listWidth = 0;
 
 		if (this._escapePressed) {
 			this._select(this._selectedIndexBeforeOpen);
 			this._escapePressed = false;
-		} else if (this._lastSelectedOption !== this.options[this._selectedIndex]) {
-			this._fireChangeEvent(this.options[this._selectedIndex]);
-			this._lastSelectedOption = this.options[this._selectedIndex];
+		} else if (this._lastSelectedOption !== this._filteredItems[this._selectedIndex]) {
+			this._fireChangeEvent(this._filteredItems[this._selectedIndex]);
+			this._lastSelectedOption = this._filteredItems[this._selectedIndex];
 		}
 	}
 
@@ -655,13 +668,11 @@ class Select extends UI5Element {
 	}
 
 	get valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
 		return {
-			"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Information": i18nBundle.getText(VALUE_STATE_INFORMATION),
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": Select.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Information": Select.i18nBundle.getText(VALUE_STATE_INFORMATION),
+			"Error": Select.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": Select.i18nBundle.getText(VALUE_STATE_WARNING),
 		};
 	}
 
@@ -682,15 +693,15 @@ class Select extends UI5Element {
 	}
 
 	get _headerTitleText() {
-		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return Select.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get _currentSelectedItem() {
-		return this.shadowRoot.querySelector(`#${this.options[this._selectedIndex]._id}-li`);
+		return this.shadowRoot.querySelector(`#${this._filteredItems[this._selectedIndex]._id}-li`);
 	}
 
 	get _currentlySelectedOption() {
-		return this.options[this._selectedIndex];
+		return this._filteredItems[this._selectedIndex];
 	}
 
 	get tabIndex() {
@@ -699,6 +710,20 @@ class Select extends UI5Element {
 		&& this.responsivePopover.opened) ? "-1" : "0";
 	}
 
+	 /**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageInputIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get classes() {
 		return {
 			popoverValueState: {
@@ -708,6 +733,9 @@ class Select extends UI5Element {
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			},
+			popover: {
+				"ui5-select-popover-valuestate": this.hasValueState,
+			},
 		};
 	}
 
@@ -717,8 +745,8 @@ class Select extends UI5Element {
 				"max-width": `${this.offsetWidth}px`,
 			},
 			responsivePopoverHeader: {
-				"display": this.options.length && this._listWidth === 0 ? "none" : "inline-block",
-				"width": `${this.options.length ? this._listWidth : this.offsetWidth}px`,
+				"display": this._filteredItems.length && this._listWidth === 0 ? "none" : "inline-block",
+				"width": `${this._filteredItems.length ? this._listWidth : this.offsetWidth}px`,
 			},
 		};
 	}
@@ -744,17 +772,27 @@ class Select extends UI5Element {
 			&& !this._isPickerOpen && !this._isPhone;
 	}
 
+	get _ariaRoleDescription() {
+		return Select.i18nBundle.getText(SELECT_ROLE_DESCRIPTION);
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}
 
+	get _filteredItems() {
+		return this.options.filter(option => !option.disabled);
+	}
+
 	itemSelectionAnnounce() {
-		const invisibleText = this.shadowRoot.querySelector(`#${this._id}-selectionText`);
+		let text;
+		const optionsCount = this._filteredItems.length;
+		const itemPositionText = Select.i18nBundle.getText(LIST_ITEM_POSITION, this._selectedIndex + 1, optionsCount);
 
 		if (this.focused && this._currentlySelectedOption) {
-			invisibleText.textContent = this._currentlySelectedOption.textContent;
-		} else {
-			invisibleText.textContent = "";
+			text = `${this._currentlySelectedOption.textContent} ${this._isPickerOpen ? itemPositionText : ""}`;
+
+			announce(text, "Polite");
 		}
 	}
 
@@ -798,6 +836,10 @@ class Select extends UI5Element {
 			Button,
 		];
 	}
+
+	static async onDefine() {
+		Select.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
 }
 
 Select.define();

package/src/SelectPopover.hbs

@@ -3,6 +3,7 @@
 		hide-arrow
 		_disable-initial-focus
 		placement-type="Bottom"
+		class="ui5-select-popover {{classes.popover}}"
 		horizontal-align="Stretch"
 		@ui5-after-open="{{_afterOpen}}"
 		@ui5-before-open="{{_beforeOpen}}"
@@ -30,7 +31,8 @@
 		{{/if}}
 		{{#unless _isPhone}}
 			{{#if hasValueStateText}}
-				<div slot="header" class="ui5-select-value-state-popover-padding {{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+				<div slot="header" class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 					{{> valueStateMessage}}
 				</div>
 			{{/if}}
@@ -40,7 +42,7 @@
 			mode="SingleSelectAuto"
 			separators="None"
 			@mousedown="{{_itemMousedown}}"
-			@ui5-item-press="{{_handleItemPress}}"
+			@ui5-selection-change="{{_handleItemPress}}"
 		>
 			{{#each _syncedOptions}}
 				<ui5-li
@@ -48,7 +50,8 @@
 					icon="{{this.icon}}"
 					?selected="{{this.selected}}"
 					?focused="{{this._focused}}"
-					?disabled="{{this.disabled}}"
+					title="{{this.title}}"
+					additional-text="{{this.additionalText}}"
 					?aria-selected="{{this.selected}}"
 					data-ui5-stable="{{this.stableDomRef}}"
 				>
@@ -64,13 +67,13 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
 		horizontal-align="Left"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>

package/src/Slider.hbs

@@ -32,6 +32,7 @@
 		data-sap-focus-ref
 		part="handle"
 	>
+			<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

@@ -1,7 +1,8 @@
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
+import Icon from "./Icon.js";
 
 // Template
 import SliderTemplate from "./generated/templates/SliderTemplate.lit.js";
@@ -44,24 +45,24 @@ const metadata = {
  * <h3>Structure</h3>
  * The most important properties of the Slider are:
  * <ul>
- * <li>min - The minimum value of the slider range</li>
- * <li>max - The maximum value of the slider range</li>
- * <li>value - The current value of the slider</li>
- * <li>step - Determines the increments in which the slider will move</li>
- * <li>showTooltip - Determines if a tooltip should be displayed above the handle</li>
- * <li>showTickmarks - Displays a visual divider between the step values</li>
+ * <li>min - The minimum value of the slider range.</li>
+ * <li>max - The maximum value of the slider range.</li>
+ * <li>value - The current value of the slider range.</li>
+ * <li>step - Determines the increments in which the slider will move.</li>
+ * <li>showTooltip - Determines if a tooltip should be displayed above the handle.</li>
+ * <li>showTickmarks - Displays a visual divider between the step values.</li>
  * <li>labelInterval - Labels some or all of the tickmarks with their values.</li>
  * </ul>
  *
  * <h3>Usage</h3>
- * The most common usecase is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).
+ * The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).
  *
  * <h3>Responsive Behavior</h3>
  * The <code>ui5-slider</code> component adjusts to the size of its parent container by recalculating and
  * resizing the width of the control. You can move the slider handle in several different ways:
  * <ul>
- * <li>Drag and drop to the desired value</li>
- * <li>Click/tap on the range bar to move the handle to that location</li>
+ * <li>Drag and drop the handle to the desired value.</li>
+ * <li>Click/tap on the range bar to move the handle to that location.</li>
  * </ul>
  *
  * <h3>CSS Shadow Parts</h3>
@@ -70,9 +71,9 @@ const metadata = {
  * <br>
  * The <code>ui5-slider</code> exposes the following CSS Shadow Parts:
  * <ul>
- * <li>progress-container - Used to style the progress container(the thin line) of the <code>ui5-slider</code></li>
- * <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code></li>
- * <li>handle - Used to style the handle of the <code>ui5-slider</code></li>
+ * <li>progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the <code>ui5-slider</code>.</li>
+ * <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.</li>
+ * <li>handle - Used to style the handle of the <code>ui5-slider</code>.</li>
  * </ul>
  *
  * <h3>Keyboard Handling</h3>
@@ -82,12 +83,12 @@ const metadata = {
  * <li><code>Right or Up Arrow</code> - Moves the handle one step to the right, effectively increasing the component's value by <code>step</code> amount;</li>
  * <li><code>Left or Down Arrow + Ctrl/Cmd</code> - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;</li>
  * <li><code>Right or Up Arrow + Ctrl/Cmd</code> - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;</li>
- * <li><code>Plus</code> - Same as <code>Right or Up Arrow</code></li>
- * <li><code>Minus</code> - Same as <code>Left or Down Arrow</code></li>
+ * <li><code>Plus</code> - Same as <code>Right or Up Arrow</code>;</li>
+ * <li><code>Minus</code> - Same as <code>Left or Down Arrow</code>;</li>
  * <li><code>Home</code> - Moves the handle to the beginning of the range;</li>
  * <li><code>End</code> - Moves the handle to the end of the range;</li>
- * <li><code>Page Up</code> - Same as <code>Right or Up + Ctrl/Cmd</code></li>
- * <li><code>Page Down</code> - Same as <code>Left or Down + Ctrl/Cmd</code></li>
+ * <li><code>Page Up</code> - Same as <code>Right or Up + Ctrl/Cmd</code>;</li>
+ * <li><code>Page Down</code> - Same as <code>Left or Down + Ctrl/Cmd</code>;</li>
  * <li><code>Escape</code> - Resets the value property after interaction, to the position prior the component's focusing;</li>
  * </ul>
  *
@@ -116,7 +117,10 @@ class Slider extends SliderBase {
 		super();
 		this._stateStorage.value = null;
 		this._setInitialValue("value", null);
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
+	static get dependencies() {
+		return [Icon];
 	}
 
 	/**
@@ -127,7 +131,7 @@ class Slider extends SliderBase {
 	 * the interaction handlers.
 	 *
 	 * Normalize current properties, update the previously stored state.
-	 * Update the visual UI representation of the Slider
+	 * Update the visual UI representation of the Slider.
 	 *
 	 */
 	onBeforeRendering() {
@@ -274,9 +278,6 @@ class Slider extends SliderBase {
 			handle: {
 				[this.directionStart]: `${this._handlePositionFromStart}%`,
 			},
-			tickmarks: {
-				"background": `${this._tickmarks}`,
-			},
 			label: {
 				"width": `${this._labelWidth}%`,
 			},
@@ -308,11 +309,26 @@ class Slider extends SliderBase {
 	}
 
 	get _ariaLabelledByText() {
-		return this.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);
+		return Slider.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		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;
 	}
 }
 

package/src/SliderBase.hbs

@@ -1,5 +1,5 @@
 <div
-	class="ui5-slider-root"
+	class="ui5-slider-root {{classes.root}}"
 	@mousedown="{{_onmousedown}}"
 	@touchstart="{{_ontouchstart}}"
 	@mouseover="{{_onmouseover}}"
@@ -8,10 +8,20 @@
 	@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}}
@@ -31,5 +41,6 @@
 </div>
 
 
+{{#*inline "handlesAriaText"}}{{/inline}}
 {{#*inline "progressBar"}}{{/inline}}
 {{#*inline "handles"}}{{/inline}}