@ui5/webcomponents 0.0.0-201dc9cbe → 0.0.0-235d4ecde

package/src/MultiComboBox.hbs

@@ -1,20 +1,25 @@
-<div class="ui5-multi-combobox-root"
+<div class="ui5-multi-combobox-root ui5-input-focusable-element"
 >
-	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
+	<span id="ui5-multi-combobox-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 
 	{{#if hasValueState}}
-		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
+		<span id="ui5-multi-combobox-valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
 	{{/if}}
 
 	<ui5-tokenizer slot="_beginContent"
 		show-more
+		prevent-popover-open
 		class="ui5-multi-combobox-tokenizer"
 		?disabled="{{disabled}}"
-		@ui5-show-more-items-press="{{_showMorePopover}}"
+		@ui5-show-more-items-press="{{_showFilteredItems}}"
+		.morePopoverOpener={{morePopoverOpener}}
+		.popoverMinWidth={{_inputWidth}}
 		@ui5-token-delete="{{_tokenDelete}}"
+		@ui5-before-more-popover-open="{{handleBeforeTokenizerPopoverOpen}}"
 		@focusout="{{_tokenizerFocusOut}}"
 		@focusin="{{_tokenizerFocusIn}}"
 		@click={{_click}}
+		@paste={{_handlePaste}}
 		@keydown="{{_onTokenizerKeydown}}"
 		?expanded="{{_tokenizerExpanded}}"
 	>
@@ -42,16 +47,18 @@
 		@input="{{_inputLiveChange}}"
 		@change={{_inputChange}}
 		@keydown="{{_onkeydown}}"
-		@keyup="{{_onkeyup}}"
 		@click={{_click}}
 		@focusin={{inputFocusIn}}
 		@focusout={{inputFocusOut}}
+		@paste={{_handlePaste}}
 		role="combobox"
 		aria-haspopup="listbox"
 		aria-expanded="{{open}}"
 		aria-autocomplete="both"
 		aria-describedby="{{ariaDescribedByText}}"
 		aria-required="{{required}}"
+		aria-label="{{ariaLabelText}}"
+		data-sap-focus-ref
 	/>
 
 	{{#if icon}}
@@ -63,10 +70,10 @@
 			input-icon
 			slot="icon"
 			tabindex="-1"
-			@click="{{togglePopover}}"
+			@click="{{togglePopoverByDropdownIcon}}"
 			@mousedown="{{_onIconMousedown}}"
+			@focusin="{{_forwardFocusToInner}}"
 			?pressed="{{open}}"
-			dir="{{effectiveDir}}"
 			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}

package/src/MultiComboBoxPopover.hbs

@@ -1,12 +1,14 @@
 <ui5-responsive-popover
 	placement-type="Bottom"
 	horizontal-align="Left"
-	class="ui5-multi-combobox-all-items-responsive-popover"
-	no-arrow
+	class="{{classes.popover}}"
+	hide-arrow
 	_disable-initial-focus
+	style="{{styles.suggestionsPopover}}"
 	@ui5-selection-change={{_listSelectionChange}}
-	@ui5-after-close={{_toggle}}
-	@ui5-after-open={{_toggle}}
+	@ui5-after-close={{_afterClosePicker}}
+	@ui5-before-open={{_beforeOpen}}
+	@ui5-after-open={{_afterOpenPicker}}
 >
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
@@ -16,7 +18,7 @@
 					class="ui5-responsive-popover-close-btn"
 					icon="decline"
 					design="Transparent"
-					@click="{{togglePopover}}"
+					@click="{{handleCancel}}"
 				>
 				</ui5-button>
 			</div>
@@ -33,23 +35,22 @@
 						value-state="{{valueState}}"
 						@input="{{_inputLiveChange}}"
 						@change={{_inputChange}}
+						@keydown={{_onkeydown}}
 						aria-autocomplete="both"
-						aria-labelledby="{{_id}}-hiddenText-nMore"
-						aria-describedby="{{_id}}-valueStateDesc"
 						/>
 					</div>
-					<ui5-togglebutton
+					<ui5-toggle-button
 						slot="header"
 						class="ui5-multi-combobox-toggle-button"
 						icon="multiselect-all"
 						design="Transparent"
 						?pressed={{_showAllItemsButtonPressed}}
-						?disabled={{allItemsSelected}}
 						@click="{{filterSelectedItems}}"
-					></ui5-togglebutton>
+					></ui5-toggle-button>
 				</div>
 			{{#if hasValueStateMessage}}
 				<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 					{{> valueStateMessage}}
 				</div>
 			{{/if}}
@@ -59,31 +60,40 @@
 
 	{{#unless _isPhone}}
 		{{#if hasValueStateMessage}}
-			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
+			<div slot="header" @keydown="{{_onValueStateKeydown}}" tabindex="0" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
 	{{/unless}}
 
-	<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
-		{{#each _filteredItems}}
-				<ui5-li
-					type="{{../_listItemsType}}"
-					info={{this.additionalText}}
-					?selected={{this.selected}}
-					data-ui5-token-id="{{this._id}}"
-					data-ui5-stable="{{this.stableDomRef}}"
-				>
-					{{this.text}}
-				</ui5-li>
-		{{/each}}
-	</ui5-list>
+	{{#if filterSelected}}
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+			{{#each selectedItems}}
+				{{#if isGroupItem}}
+					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
+				{{else}}
+					{{> listItem}}
+				{{/if}}
+			{{/each}}
+		</ui5-list>
+	{{else}}
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+			{{#each _filteredItems}}
+				{{#if isGroupItem}}
+					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
+				{{else}}
+					{{> listItem}}
+				{{/if}}
+			{{/each}}
+		</ui5-list>
+	{{/if}}
 
 	{{#if _isPhone}}
 		<div slot="footer" class="ui5-responsive-popover-footer">
 			<ui5-button
 				design="Transparent"
-				@click="{{togglePopover}}"
+				@click="{{handleOK}}"
 			>{{_dialogOkButton}}</ui5-button>
 		</div>
 	{{/if}}
@@ -94,13 +104,13 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
-		no-arrow
+		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
-		horizontal-align="Left"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>
@@ -108,10 +118,23 @@
 
 {{#*inline "valueStateMessage"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
-		{{valueStateText}}
+		{{valueStateDefaultText}}
 	{{else}}
 		{{#each valueStateMessageText}}
 			{{this}}
 		{{/each}}
 	{{/if}}
 {{/inline}}
+
+{{#*inline "listItem"}}
+	<ui5-li
+		type="{{../_listItemsType}}"
+		additional-text={{this.additionalText}}
+		?selected={{this.selected}}
+		data-ui5-token-id="{{this._id}}"
+		data-ui5-stable="{{this.stableDomRef}}"
+		@keydown="{{../_onItemKeydown}}"
+	>
+		{{this.text}}
+	</ui5-li>
+{{/inline}}

package/src/MultiInput.hbs

@@ -4,14 +4,14 @@
 	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 	<ui5-tokenizer
 		class="ui5-multi-input-tokenizer"
-		.morePopoverOpener={{this}}
+		.morePopoverOpener={{morePopoverOpener}}
 		.popoverMinWidth={{_inputWidth}}
 		.valueState={{valueState}}
 		?expanded="{{expandedTokenizer}}"
 		show-more
 		@keydown="{{_onTokenizerKeydown}}"
-		@show-more-items-press={{showMorePress}}
-		@token-delete={{tokenDelete}}
+		@ui5-show-more-items-press={{showMorePress}}
+		@ui5-token-delete={{tokenDelete}}
 		@focusout="{{_tokenizerFocusOut}}"
 	>
 		<slot name="tokens"></slot>

package/src/Panel.hbs

@@ -1,56 +1,77 @@
 <div
-	data-sap-ui-fastnavgroup="true"
 	class="ui5-panel-root"
 	role="{{accRole}}"
+	aria-label="{{effectiveAccessibleName}}"
+	aria-labelledby="{{fixedPanelAriaLabelledbyReference}}"
 >
-	<!-- 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-label="{{accInfo.ariaLabel}}"
-		aria-labelledby="{{accInfo.ariaLabelledby}}"
-	>
-		{{#unless fixed}}
-			<div class="ui5-panel-header-button-root">
-				<ui5-button
-					design="Transparent"
-					class="ui5-panel-header-button {{classes.headerBtn}}"
-					icon="slim-arrow-right"
-					?non-focusable="{{nonFocusableButton}}"
-					@click="{{_toggleButtonClick}}"
-					._buttonAccInfo="{{accInfo.button}}"
-					aria-label="{{accInfo.ariaLabelButton}}"
-					aria-labelledby="{{accInfo.ariaLabelledbyButton}}"
-				></ui5-button>
-			</div>
-		{{/unless}}
 
-		{{#if _hasHeader}}
-			<slot name="header"></slot>
-		{{else}}
+	{{#if hasHeaderOrHeaderText}}
+		{{! header: either header or h1 with header text}}
+		<div
+			class="ui5-panel-heading-wrapper{{classes.stickyHeaderClass}}"
+			role="{{headingWrapperRole}}"
+			aria-level="{{headingWrapperAriaLevel}}"
+		>
 			<div
-				id="{{_id}}-header-title"
-				role="heading"
-				aria-level="{{headerAriaLevel}}"
-				class="ui5-panel-header-title"
-				aria-labelledby="{{_id}}-headerText"
+				@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"
 			>
-				{{headerText}}
-			</div>
-		{{/if}}
-	</div>
+				{{#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 id="aria-labelledby-texts"></div>
-	<span id="{{_id}}-headerText" class="ui5-hidden-text">{{headerAriaLabelledByText}}</span>
+				{{#if _hasHeader}}
+					<slot name="header"></slot>
+				{{else}}
+					<div
+						id="{{_id}}-header-title"
+						class="ui5-panel-header-title"
+					>
+						{{headerText}}
+					</div>
+				{{/if}}
+			</div>
+		</div>
+	{{/if}}
 
-	<!-- content area -->
-	<div class="ui5-panel-content" id="{{_id}}-content" tabindex="-1" style="{{styles.content}}">
+	{{! content area}}
+	<div
+		class="ui5-panel-content"
+		id="{{_id}}-content"
+		tabindex="-1"
+		style="{{styles.content}}"
+		part="content"
+	>
 		<slot></slot>
 	</div>
 </div>

package/src/Popover.hbs

@@ -4,11 +4,11 @@
 	<span class="ui5-popover-arrow" style="{{styles.arrow}}"></span>
 
 	{{#if _displayHeader}}
-		<header class="ui5-popup-header-root" id="ui5-popup-header">
+		<header class="ui5-popup-header-root" id="ui5-popup-header" part="header">
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
-				<h2 class="ui5-popup-header-text">{{headerText}}</h2>
+				<h1 class="ui5-popup-header-text">{{headerText}}</h1>
 			{{/if}}
 		</header>
 	{{/if}}
@@ -17,7 +17,7 @@
 {{#*inline "afterContent"}}
 	{{#if _displayFooter}}
 		{{#if footer.length }}
-			<footer class="ui5-popup-footer-root">
+			<footer class="ui5-popup-footer-root" part="footer">
 				<slot name="footer"></slot>
 			</footer>
 		{{/if}}

package/src/Popup.hbs

@@ -1,21 +1,21 @@
 <section
 	style="{{styles.root}}"
 	class="{{classes.root}}"
-	role="dialog"
+	role="{{_role}}"
 	aria-modal="{{_ariaModal}}"
 	aria-label="{{_ariaLabel}}"
 	aria-labelledby="{{_ariaLabelledBy}}"
-	dir="{{dir}}"
-	tabindex="-1"
 	@keydown={{_onkeydown}}
 	@focusout={{_onfocusout}}
+	@mouseup={{_onmouseup}}
+	@mousedown={{_onmousedown}}
 >
 
 	<span class="first-fe" data-ui5-focus-trap tabindex="0" @focusin={{forwardToLast}}></span>
 
 	{{> beforeContent}}
 
-	<div style="{{styles.content}}" class="{{classes.content}}"  @scroll="{{_scroll}}">
+	<div style="{{styles.content}}" class="{{classes.content}}"  @scroll="{{_scroll}}" part="content">
 		<slot></slot>
 	</div>
 

package/src/PopupBlockLayer.hbs

@@ -1,6 +1,6 @@
 <div class="ui5-block-layer"
     ?hidden={{_blockLayerHidden}}
-    tabindex="1"
+    tabindex="0"
     style="{{styles.blockLayer}}"
 	@keydown="{{_preventBlockLayerFocus}}"
     @mousedown="{{_preventBlockLayerFocus}}">

package/src/ProgressIndicator.hbs

@@ -1,11 +1,11 @@
 <div class="ui5-progress-indicator-root {{classes.root}}"
-     dir="{{effectiveDir}}"
      role="progressbar"
      aria-valuemin="0"
      aria-valuenow="{{validatedValue}}"
      aria-valuemax="100"
      aria-valuetext="{{valueStateText}}"
      aria-disabled="{{_ariaDisabled}}"
+     aria-label="{{accessibleName}}"
 >
     <div class="ui5-progress-indicator-bar" style="{{styles.bar}}">
         {{#unless showValueInRemainingBar}}
@@ -24,6 +24,12 @@
         <ui5-icon name="{{valueStateIcon}}" class="ui5-progress-indicator-icon"></ui5-icon>
     {{/if}}
     {{#unless hideValue}}
-        <span class="ui5-progress-indicator-value">{{validatedValue}}%</span>
+        <span class="ui5-progress-indicator-value">
+            {{#if displayValue}}
+                {{displayValue}}
+            {{else}}
+                {{validatedValue}}%
+            {{/if}}
+        </span>
     {{/unless}}
 {{/inline}}

package/src/RadioButton.hbs

@@ -1,30 +1,31 @@
-<div class="ui5-radio-root {{classes.main}}"
+<div class="ui5-radio-root"
 	role="radio"
-	aria-checked="{{selected}}"
-	aria-readonly="{{ariaReadonly}}"
-	aria-disabled="{{ariaDisabled}}"
-	aria-labelledby="{{ariaLabelledBy}}"
-	aria-describedby="{{ariaDescribedBy}}"
-	tabindex="{{tabIndex}}"
-	dir="{{effectiveDir}}"
+	aria-checked="{{checked}}"
+	aria-disabled="{{effectiveAriaDisabled}}"
+	aria-describedby="{{effectiveAriaDescribedBy}}"
+	aria-label="{{ariaLabelText}}"
+	tabindex="{{effectiveTabIndex}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
+	@mousedown="{{_onmousedown}}"
+	@mouseup="{{_onmouseup}}"
+	@focusout="{{_onfocusout}}"
 >
-
 	<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="{{selected}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
+		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{effectiveAriaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
 	</div>
 
 	{{#if text}}
-		<ui5-label id="{{_id}}-label" class="ui5-radio-label" for="{{_id}}" ?wrap="{{wrap}}">{{text}}</ui5-label>
+		<ui5-label id="{{_id}}-label" class="ui5-radio-label" for="{{_id}}" wrapping-type="{{wrappingType}}">{{text}}</ui5-label>
 	{{/if}}
 
 	{{#if hasValueState}}
 		<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}
+	<slot name="formSupport"></slot>
 </div>

package/src/RangeSlider.hbs

@@ -1,21 +1,28 @@
 {{>include "./SliderBase.hbs"}}
 
-<span id="{{_id}}-startHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.startHandleText}}</span>
-<span id="{{_id}}-endHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.endHandleText}}</span>
+{{#*inline "handlesAriaText"}}
+	<span id="{{_id}}-startHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.startHandleText}}</span>
+	<span id="{{_id}}-endHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.endHandleText}}</span>
+{{/inline}}
 
 {{#*inline "progressBar"}}
-	<div class="ui5-slider-progress-container">
+	<div
+		class="ui5-slider-progress-container"
+		part="progress-container"
+	>
 		<div class="ui5-slider-progress"
+			part="progress-bar"
 			style="{{styles.progress}}"
 			@focusin="{{_onfocusin}}"
 			@focusout="{{_onfocusout}}"
 			role="slider"
-			tabindex="{{tabIndex}}"
+			tabindex="{{_tabIndex}}"
 			aria-orientation="horizontal"
 			aria-valuemin="{{min}}"
 			aria-valuemax="{{max}}"
+			aria-valuenow="{{_ariaValueNow}}"
 			aria-valuetext="From {{startValue}} to {{endValue}}"
-			aria-labelledby="{{_id}}-sliderDesc"
+			aria-labelledby="{{_ariaLabelledByProgressBarRefs}}"
 			aria-disabled="{{_ariaDisabled}}"
 		></div>
 	</div>
@@ -23,18 +30,21 @@
 
 {{#*inline "handles"}}
 	<div class="ui5-slider-handle ui5-slider-handle--start"
+		part="handle"
 		style="{{styles.startHandle}}"
 		@focusin="{{_onfocusin}}"
 		@focusout="{{_onfocusout}}"
 		role="slider"
-		tabindex="{{tabIndex}}"
+		tabindex="{{_tabIndex}}"
 		aria-orientation="horizontal"
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{startValue}}"
-		aria-labelledby="{{_id}}-startHandleDesc"
+		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
+		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
+
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
 				<span class="ui5-slider-tooltip-value">{{tooltipStartValue}}</span>
@@ -43,22 +53,25 @@
 	</div>
 
 	<div class="ui5-slider-handle ui5-slider-handle--end"
+		part="handle"
 		style="{{styles.endHandle}}"
 		@focusin="{{_onfocusin}}"
 		@focusout="{{_onfocusout}}"
 		role="slider"
-		tabindex="{{tabIndex}}"
+		tabindex="{{_tabIndex}}"
 		aria-orientation="horizontal"
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{endValue}}"
-		aria-labelledby="{{_id}}-endHandleDesc"
+		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
+		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
+
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">
 				<span class="ui5-slider-tooltip-value">{{tooltipEndValue}}</span>
 			</div>
 		{{/if}}
 	</div>
-{{/inline}}
+{{/inline}}

package/src/RatingIndicator.hbs

@@ -3,29 +3,48 @@
 	aria-roledescription="{{_ariaRoleDescription}}"
 	aria-valuemin="0"
 	aria-valuenow="{{value}}"
-	aria-valuemax="{{maxValue}}"
+	aria-valuemax="{{max}}"
+	aria-valuetext="{{value}} of {{max}}"
 	aria-orientation="horizontal"
 	aria-disabled="{{_ariaDisabled}}"
-	?aria-readonly="{{readOnly}}"
-	tabindex="{{tabIndex}}"
+	aria-readonly="{{ariaReadonly}}"
+	aria-description="{{_ariaDescription}}"
+	tabindex="{{effectiveTabIndex}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
 	title="{{tooltip}}"
-	aria-label="{{ariaLabel}}"
+	aria-label="{{_ariaLabel}}"
 >
-	<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}}
+				<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>