@ui5/webcomponents 0.0.0-701b14e36 → 0.0.0-760fbb471

package/src/Menu.hbs

@@ -7,7 +7,10 @@
 	hide-arrow
 	allow-target-overlap
 	?sub-menu={{_isSubMenu}}
-	@before-close={{_beforePopoverClose}}
+	@ui5-before-open={{_beforePopoverOpen}}
+	@ui5-after-open={{_afterPopoverOpen}}
+	@ui5-before-close={{_beforePopoverClose}}
+	@ui5-after-close={{_afterPopoverClose}}
 >
 {{#if isPhone}}
 	<div
@@ -56,8 +59,10 @@
 				.associatedItem="{{this.item}}"
 				class="ui5-menu-item"
 				id="{{../_id}}-menu-item-{{@index}}"
-				icon="{{this.item.icon}}"
+				.icon="{{this.item.icon}}"
+				accessible-name={{this.item.ariaLabelledByText}}
 				accessible-role="menuitem"
+				.additionalText="{{this.item._additionalText}}"
 				._ariaHasPopup={{this.ariaHasPopup}}
 				?disabled={{this.item.disabled}}
 				?starts-section={{this.item.startsSection}}

package/src/MonthPicker.hbs

@@ -1,6 +1,7 @@
 <div
 	class="ui5-mp-root"
 	role="grid"
+	aria-roledescription="{{roleDescription}}"
 	aria-readonly="false"
 	aria-multiselectable="false"
 	@keydown={{_onkeydown}}
@@ -20,7 +21,14 @@
 					role="gridcell"
 					aria-selected="{{this.ariaSelected}}"
 				>
-					{{this.name}}
+					<span class="ui5-dp-monthtext">
+						{{this.name}}
+					</span>
+					{{#if this.nameInSecType}}
+						<span class="ui5-dp-monthtext ui5-dp-monthsectext">
+							{{this.nameInSecType}}
+						</span>
+					{{/if}}
 				</div>
 			{{/each}}
 

package/src/MultiComboBox.hbs

@@ -1,9 +1,9 @@
 <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"
@@ -52,6 +52,8 @@
 		aria-autocomplete="both"
 		aria-describedby="{{ariaDescribedByText}}"
 		aria-required="{{required}}"
+		aria-label="{{ariaLabelText}}"
+		data-sap-focus-ref
 	/>
 
 	{{#if icon}}

package/src/MultiComboBoxPopover.hbs

@@ -1,9 +1,10 @@
 <ui5-responsive-popover
 	placement-type="Bottom"
-	horizontal-align="Stretch"
+	horizontal-align="Left"
 	class="{{classes.popover}}"
 	hide-arrow
 	_disable-initial-focus
+	style="{{styles.suggestionsPopover}}"
 	@ui5-selection-change={{_listSelectionChange}}
 	@ui5-after-close={{_afterClosePicker}}
 	@ui5-before-open={{_beforeOpen}}
@@ -34,9 +35,8 @@
 						value-state="{{valueState}}"
 						@input="{{_inputLiveChange}}"
 						@change={{_inputChange}}
+						@keydown={{_onkeydown}}
 						aria-autocomplete="both"
-						aria-labelledby="{{_id}}-hiddenText-nMore"
-						aria-describedby="{{_id}}-valueStateDesc"
 						/>
 					</div>
 					<ui5-toggle-button
@@ -70,13 +70,21 @@
 	{{#if filterSelected}}
 		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
 			{{#each selectedItems}}
-				{{> listItem}}
+				{{#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}}
-				{{> listItem}}
+				{{#if isGroupItem}}
+					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
+				{{else}}
+					{{> listItem}}
+				{{/if}}
 			{{/each}}
 		</ui5-list>
 	{{/if}}
@@ -110,7 +118,7 @@
 
 {{#*inline "valueStateMessage"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
-		{{valueStateText}}
+		{{valueStateDefaultText}}
 	{{else}}
 		{{#each valueStateMessageText}}
 			{{this}}

package/src/MultiInput.hbs

@@ -10,7 +10,7 @@
 		?expanded="{{expandedTokenizer}}"
 		show-more
 		@keydown="{{_onTokenizerKeydown}}"
-		@show-more-items-press={{showMorePress}}
+		@ui5-show-more-items-press={{showMorePress}}
 		@ui5-token-delete={{tokenDelete}}
 		@focusout="{{_tokenizerFocusOut}}"
 	>

package/src/Panel.hbs

@@ -2,53 +2,67 @@
 	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-labelledby="{{accInfo.ariaLabelledby}}"
-	>
-		{{#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"
-						@click="{{_toggleButtonClick}}"
-						.accessibilityAttributes={{accInfo.button.accessibilityAttributes}}
-						tooltip="{{accInfo.button.title}}"
-						accessible-name="{{accInfo.button.ariaLabelButton}}"
-					></ui5-button>
-				{{else}}
-					<ui5-icon
-						class="ui5-panel-header-button ui5-panel-header-icon {{classes.headerBtn}}"
-						name="slim-arrow-right"
-					></ui5-icon>
-				{{/if}}
-			</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"
+			role="{{headingWrapperRole}}"
+			aria-level="{{headingWrapperAriaLevel}}"
+		>
 			<div
-				id="{{_id}}-header-title"
-				role="heading"
-				aria-level="{{headerAriaLevel}}"
-				class="ui5-panel-header-title"
+				@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}}
+				{{#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"
+						class="ui5-panel-header-title"
+					>
+						{{headerText}}
+					</div>
+				{{/if}}
 			</div>
-		{{/if}}
-	</div>
+		</div>
+	{{/if}}
 
 	{{! content area}}
 	<div

package/src/Popover.hbs

@@ -8,7 +8,7 @@
 			{{#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}}

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/RadioButton.hbs

@@ -1,11 +1,10 @@
-<div class="ui5-radio-root {{classes.main}}"
+<div class="ui5-radio-root"
 	role="radio"
 	aria-checked="{{checked}}"
-	aria-readonly="{{ariaReadonly}}"
-	aria-disabled="{{ariaDisabled}}"
+	aria-disabled="{{effectiveAriaDisabled}}"
+	aria-describedby="{{effectiveAriaDescribedBy}}"
 	aria-label="{{ariaLabelText}}"
-	aria-describedby="{{ariaDescribedBy}}"
-	tabindex="{{tabIndex}}"
+	tabindex="{{effectiveTabIndex}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
@@ -13,13 +12,12 @@
 	@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%" />
 		</svg>
- 		<input type='radio' ?checked="{{checked}}" ?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}}
@@ -29,4 +27,5 @@
 	{{#if hasValueState}}
 		<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}
+	<slot name="formSupport"></slot>
 </div>

package/src/RangeSlider.hbs

@@ -6,18 +6,23 @@
 {{/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>
@@ -25,19 +30,20 @@
 
 {{#*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="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}}">
@@ -47,19 +53,20 @@
 	</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="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}}">
@@ -67,4 +74,4 @@
 			</div>
 		{{/if}}
 	</div>
-{{/inline}}
+{{/inline}}

package/src/RatingIndicator.hbs

@@ -8,7 +8,7 @@
 	aria-orientation="horizontal"
 	aria-disabled="{{_ariaDisabled}}"
 	aria-readonly="{{ariaReadonly}}"
-	tabindex="{{tabIndex}}"
+	tabindex="{{effectiveTabIndex}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@click="{{_onclick}}"
@@ -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/ResponsivePopover.hbs

@@ -2,6 +2,7 @@
 	<ui5-dialog
 		accessible-name={{accessibleName}}
 		accessible-name-ref={{accessibleNameRef}}
+		accessible-role={{accessibleRole}}
 		stretch
 		_disable-initial-focus
 		@ui5-before-open="{{_beforeDialogOpen}}"

package/src/SegmentedButton.hbs

@@ -1,5 +1,6 @@
 <ul
 	@click="{{_onclick}}"
+	@mousedown="{{_onmousedown}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@focusin="{{_onfocusin}}"

package/src/Select.hbs

@@ -12,7 +12,7 @@
 	{{/if}}
 	<div class="ui5-select-label-root"
 		data-sap-focus-ref
-		tabindex="{{tabIndex}}"
+		tabindex="{{_effectiveTabIndex}}"
 		role="combobox"
 		aria-haspopup="listbox"
 		aria-label="{{ariaLabelText}}"

package/src/SelectPopover.hbs

@@ -4,14 +4,15 @@
 		_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">
+			<div class="ui5-responsive-popover-header">
 				<div class="row">
 					<span>{{_headerTitleText}}</span>
 					<ui5-button
@@ -31,7 +32,7 @@
 		{{/if}}
 		{{#unless _isPhone}}
 			{{#if hasValueStateText}}
-				<div slot="header" class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+				<div class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
 					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 					{{> valueStateMessage}}
 				</div>
@@ -72,7 +73,7 @@
 		placement-type="Bottom"
 		horizontal-align="Left"
 	>
-		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+		<div class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>

package/src/Slider.hbs

@@ -22,21 +22,21 @@
 		@focusout="{{_onfocusout}}"
 		@focusin="{{_onfocusin}}"
 		role="slider"
-		tabindex="{{tabIndex}}"
+		tabindex="{{_tabIndex}}"
 		aria-orientation="horizontal"
 		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="direction-arrows" 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>
 			</div>
 		{{/if}}
 	</div>
-{{/inline}}
+{{/inline}}

package/src/SliderBase.hbs

@@ -6,6 +6,7 @@
 	@mouseout="{{_onmouseout}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
+	part="root-container"
 >
 	{{> handlesAriaText}}
 
@@ -36,6 +37,7 @@
 		{{> handles}}
 	</div>
 
+	<span id="{{_id}}-accName" class="ui5-hidden-text">{{accessibleName}}</span>
 	<span id="{{_id}}-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
 </div>
 

package/src/SplitButton.hbs

@@ -24,7 +24,9 @@
 		@focusin={{_setTabIndexValue}}
 		@focusout={{_onFocusOut}}
 	>
-		<slot></slot>
+		{{#if isTextButton}}
+			<slot></slot>
+		{{/if}}
 	</ui5-button>
 
 	<div

package/src/StandardListItem.hbs

@@ -24,10 +24,16 @@
 {{/inline}}
 
 {{#*inline "imageBegin"}}
-	{{#if displayImage}}
-		<ui5-avatar shape="Square" class="ui5-li-img">
-			<img src="{{image}}" class="ui5-li-img-inner" />
-		</ui5-avatar>
+	{{#if hasImageContent}}
+		<div class="ui5-li-imgContent" >
+			<slot name="imageContent"></slot>
+		</div>
+	{{else}}
+		{{#if displayImage}}
+			<ui5-avatar shape="Square" class="ui5-li-img">
+				<img src="{{image}}" class="ui5-li-img-inner" />
+			</ui5-avatar>
+		{{/if}}
 	{{/if}}
 {{/inline}}
 

package/src/StepInput.hbs

@@ -11,7 +11,7 @@
 		class="ui5-step-icon ui5-step-dec"
 		title="{{decIconTitle}}"
 	>
-	
+
 		<ui5-icon
 			id="{{_id}}-dec"
 			name="{{decIconName}}"

package/src/Switch.hbs

@@ -3,12 +3,13 @@
 	role="switch"
 	aria-label="{{ariaLabelText}}"
 	aria-checked="{{checked}}"
-	aria-disabled="{{ariaDisabled}}"
+	aria-disabled="{{effectiveAriaDisabled}}"
 	@click="{{_onclick}}"
 	@keyup="{{_onkeyup}}"
 	@keydown="{{_onkeydown}}"
-	tabindex="{{tabIndex}}"
+	tabindex="{{effectiveTabIndex}}"
 	dir="{{effectiveDir}}"
+	title="{{tooltip}}"
 >
 	<div class="ui5-switch-inner">
 		<div class="ui5-switch-track" part="slider">

package/src/TabContainer.hbs

@@ -2,7 +2,11 @@
 	{{#if tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/if}}
-	<div class="{{classes.header}}" id="{{_id}}-header">
+	<div
+		class="{{classes.header}}"
+		id="{{_id}}-header"
+		@focusin="{{_onHeaderFocusin}}"
+	>
 		<div
 			class="ui5-tc__overflow ui5-tc__overflow--start"
 			@click="{{_onOverflowClick}}"
@@ -17,7 +21,7 @@
 					data-ui5-stable="overflow-start"
 					tabindex="-1"
 					tooltip="{{overflowMenuTitle}}"
-					aria-haspopup="true"
+					aria-haspopup="menu"
 					icon-end>{{this._startOverflowText}}</ui5-button>
 			{{/if}}
 		</div>
@@ -26,6 +30,7 @@
 			id="{{_id}}-tabStrip"
 			class="{{classes.tabStrip}}"
 			role="tablist"
+			aria-describedby="{{tablistAriaDescribedById}}"
 			@click="{{_onTabStripClick}}"
 			@keydown="{{_onTabStripKeyDown}}"
 			@keyup="{{_onTabStripKeyUp}}"
@@ -49,7 +54,7 @@
 					data-ui5-stable="overflow-end"
 					tabindex="-1"
 					tooltip="{{overflowMenuTitle}}"
-					aria-haspopup="true"
+					aria-haspopup="menu"
 					icon-end>{{this._endOverflowText}}</ui5-button>
 			{{/if}}
 		</div>
@@ -59,6 +64,10 @@
 		{{> contentArea}}
 	{{/unless}}
 
+	{{#if hasSubTabs}}
+		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
+	{{/if}}
+
 </div>
 
 {{#*inline "contentArea"}}