@ui5/webcomponents 2.22.0-rc.3 → 2.22.0-rc.4

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.22.0-rc.3",
+  "version": "2.22.0-rc.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -173,11 +173,6 @@
           "description": "### Overview\n\nThe `ui5-avatar-badge` component is used to display a badge on top of `ui5-avatar` component.\nThe badge can display an icon and supports different states for visual affordance.\n\n### Usage\n\nThe badge should be used as a child element of `ui5-avatar` in the `badge` slot.\n\n```html\n<ui5-avatar>\n  <ui5-avatar-badge icon=\"edit\" slot=\"badge\"></ui5-avatar-badge>\n</ui5-avatar>\n```\n\n### Keyboard Handling\n\nThe badge does not receive keyboard focus.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/AvatarBadge.js\";`\n---\n",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "accessible-name",
-              "description": "Defines the custom text alternative of the badge icon.\n\n**Note:** If not provided, the badge uses the icon accessible name.\nIf no icon accessible name is available, a generic fallback text is used.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
             {
               "name": "icon",
               "description": "Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`",
@@ -190,16 +185,16 @@
                 "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"",
                 "default": "\"None\""
               }
+            },
+            {
+              "name": "tooltip",
+              "description": "Defines the tooltip text of the badge icon.\n\n**Note:** If not provided, the badge uses the icon accessible name.\nIf no icon accessible name is available, a generic fallback text is used.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "accessible-name",
-                "description": "Defines the custom text alternative of the badge icon.\n\n**Note:** If not provided, the badge uses the icon accessible name.\nIf no icon accessible name is available, a generic fallback text is used.",
-                "value": { "type": "string | undefined" }
-              },
               {
                 "name": "icon",
                 "description": "Defines the icon name to be displayed inside the badge.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`",
@@ -211,6 +206,11 @@
                 "value": {
                   "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
                 }
+              },
+              {
+                "name": "tooltip",
+                "description": "Defines the tooltip text of the badge icon.\n\n**Note:** If not provided, the badge uses the icon accessible name.\nIf no icon accessible name is available, a generic fallback text is used.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -8878,54 +8878,9 @@
           "name": "ui5-slider-handle",
           "description": "The <code>ui5-slider-handle</code> component represents the handle of the <code>ui5-slider</code> component.\n---\n",
           "doc-url": "",
-          "attributes": [
-            {
-              "name": "active",
-              "description": "Defines whether the slider handle is active.\n<br><br>\n<b>Note:</b> An active slider handle is currently being interacted with.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "max",
-              "description": "Defines the maximum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be greater than the <code>min</code> property of the parent <code>ui5-slider</code>.",
-              "value": { "type": "number", "default": "100" }
-            },
-            {
-              "name": "min",
-              "description": "Defines the minimum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be less than the <code>max</code> property of the parent <code>ui5-slider</code>.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "value",
-              "description": "Defines the value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be between the <code>min</code> and <code>max</code> properties of the parent <code>ui5-slider</code>.",
-              "value": { "type": "number", "default": "0" }
-            }
-          ],
+          "attributes": [],
           "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "active",
-                "description": "Defines whether the slider handle is active.\n<br><br>\n<b>Note:</b> An active slider handle is currently being interacted with.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "max",
-                "description": "Defines the maximum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be greater than the <code>min</code> property of the parent <code>ui5-slider</code>.",
-                "value": { "type": "number" }
-              },
-              {
-                "name": "min",
-                "description": "Defines the minimum value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be less than the <code>max</code> property of the parent <code>ui5-slider</code>.",
-                "value": { "type": "number" }
-              },
-              {
-                "name": "value",
-                "description": "Defines the value of the slider handle.\n<br><br>\n<b>Note:</b> The value should be between the <code>min</code> and <code>max</code> properties of the parent <code>ui5-slider</code>.",
-                "value": { "type": "number" }
-              }
-            ],
-            "events": []
-          }
+          "js": { "properties": [], "events": [] }
         },
         {
           "name": "ui5-slider-tooltip",
@@ -10169,7 +10124,7 @@
             },
             {
               "name": "merged",
-              "description": "Defines whether the cell is visually merged with the cell directly above it.\n\nThis is useful when consecutive cells in a column have the same value and should visually appear as a single merged cell.\nAlthough the cell is visually merged with the previous one, its content must still be provided for accessibility purposes.\n**Note:** This feature is disabled when cells are rendered as popin, and should remain `false` for interactive cell content.",
+              "description": "Defines whether the cell is visually merged with the cell directly above it.\n\nThis is useful if consecutive cells in a column have the same value and should visually appear as a single merged cell.\nAlthough the cell is visually merged with the previous one, its content must still be provided for accessibility purposes.\n**Note:** This feature is disabled when cells are rendered as a popin, and should remain `false` for interactive cell content.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
@@ -10191,7 +10146,7 @@
               },
               {
                 "name": "merged",
-                "description": "Defines whether the cell is visually merged with the cell directly above it.\n\nThis is useful when consecutive cells in a column have the same value and should visually appear as a single merged cell.\nAlthough the cell is visually merged with the previous one, its content must still be provided for accessibility purposes.\n**Note:** This feature is disabled when cells are rendered as popin, and should remain `false` for interactive cell content.",
+                "description": "Defines whether the cell is visually merged with the cell directly above it.\n\nThis is useful if consecutive cells in a column have the same value and should visually appear as a single merged cell.\nAlthough the cell is visually merged with the previous one, its content must still be provided for accessibility purposes.\n**Note:** This feature is disabled when cells are rendered as a popin, and should remain `false` for interactive cell content.",
                 "value": { "type": "boolean" }
               }
             ],
@@ -12135,6 +12090,11 @@
                 "type": "\"Transparent\" | \"Solid\"",
                 "default": "\"Solid\""
               }
+            },
+            {
+              "name": "overflow-button-accessible-name",
+              "description": "Defines the accessible ARIA name of the overflow button of the component.\n\n**Note:** When not set, the built-in translation for \"Additional Options\" is used.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -12165,6 +12125,11 @@
                 "name": "design",
                 "description": "Defines the toolbar design.",
                 "value": { "type": "\"Transparent\" | \"Solid\"" }
+              },
+              {
+                "name": "overflow-button-accessible-name",
+                "description": "Defines the accessible ARIA name of the overflow button of the component.\n\n**Note:** When not set, the built-in translation for \"Additional Options\" is used.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.22.0-rc.3",
+  "version": "2.22.0-rc.4",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,22 +54,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.22.0-rc.3",
-    "@ui5/webcomponents-icons": "2.22.0-rc.3",
-    "@ui5/webcomponents-icons-business-suite": "2.22.0-rc.3",
-    "@ui5/webcomponents-icons-tnt": "2.22.0-rc.3",
-    "@ui5/webcomponents-localization": "2.22.0-rc.3",
-    "@ui5/webcomponents-theming": "2.22.0-rc.3"
+    "@ui5/webcomponents-base": "2.22.0-rc.4",
+    "@ui5/webcomponents-icons": "2.22.0-rc.4",
+    "@ui5/webcomponents-icons-business-suite": "2.22.0-rc.4",
+    "@ui5/webcomponents-icons-tnt": "2.22.0-rc.4",
+    "@ui5/webcomponents-localization": "2.22.0-rc.4",
+    "@ui5/webcomponents-theming": "2.22.0-rc.4"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.22.0-rc.3",
+    "@ui5/webcomponents-tools": "2.22.0-rc.4",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "38fe9415447d8f3d68eb801e4c0fab65295dca7f"
+  "gitHead": "c6f2ddc2f8bb1c55b9571d0e8f307755d578669d"
 }

package/src/AvatarBadgeTemplate.tsx

@@ -8,8 +8,7 @@ export default function AvatarBadgeTemplate(this: AvatarBadge) {
 				<Icon
 					name={this.icon}
 					class="ui5-avatar-badge-icon"
-					accessibleName={this.effectiveAccessibleName}
-					showTooltip={true}
+					title={this.effectiveTooltip}
 					mode="Image"
 				></Icon>
 			)}

package/src/CalendarHeaderTemplate.tsx

@@ -56,6 +56,8 @@ function renderPrevButton(this: Calendar, isFirst: boolean, isMultiple: boolean)
 			part="calendar-header-arrow-button"
 			role="button"
 			onMouseDown={this.onPrevButtonClick}
+			onKeyDown={this.onPrevButtonKeyDown}
+			onKeyUp={this.onPrevButtonKeyUp}
 			tabindex={this._previousButtonDisabled ? -1 : 0}
 			title={this.accInfo.tooltipPrevButton}
 			aria-label={this.accInfo.ariaLabelPrevButton}
@@ -162,6 +164,8 @@ function renderNextButton(this: Calendar, isFirst: boolean, isLast: boolean, isM
 				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onNextButtonClick}
+				onKeyDown={this.onNextButtonKeyDown}
+				onKeyUp={this.onNextButtonKeyUp}
 				tabindex={this._nextButtonDisabled ? -1 : 0}
 				title={this.accInfo.tooltipNextButton}
 				aria-label={this.accInfo.ariaLabelNextButton}

package/src/RangeSliderTemplate.tsx

@@ -1,128 +1,161 @@
-import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
 import type RangeSlider from "./RangeSlider.js";
-import Icon from "./Icon.js";
-import SliderBaseTemplate from "./SliderBaseTemplate.js";
 import SliderTooltip from "./SliderTooltip.js";
+import SliderHandle, { SliderHandleType } from "./SliderHandle.js";
+import SliderScale from "./SliderScale.js";
 
-export default function RangeSliderTemplate(this: RangeSlider) {
-	return SliderBaseTemplate.call(this, {
-		handlesAriaText,
-		progressBar,
-		handles,
-	});
-}
+const _handlePosition = (min: number, max: number, value: number) => {
+	const range = max - min;
+	const position = ((value - min) / range) * 100;
+	return position;
+};
 
-export function handlesAriaText(this: RangeSlider) {
-	return (<>
-		<span id="ui5-slider-startHandleDesc" class="ui5-hidden-text">{this._ariaHandlesText.startHandleText}</span>
-		<span id="ui5-slider-endHandleDesc" class="ui5-hidden-text">{this._ariaHandlesText.endHandleText}</span>
-	</>);
-}
+const startHandle = (slider: RangeSlider) => {
+	const position = _handlePosition(slider.min, slider.max, slider.startValue);
 
-export function progressBar(this: RangeSlider) {
 	return (
-		<div
-			class="ui5-slider-progress-container"
-			part="progress-container"
-		>
-			<div class="ui5-slider-progress"
-				part="progress-bar"
-				style={this.styles.progress}
-				onFocusIn={this._onfocusin}
-				onFocusOut={this._onfocusout}
-				role="slider"
-				tabIndex={this._tabIndex}
+		<>
+			<SliderHandle
+				value={slider.startValue}
+				min={slider.min}
+				max={slider.max}
+				tabIndex={slider._tabIndex}
+				active={slider.rangePressed}
+				handleType={SliderHandleType.Start}
 				aria-orientation="horizontal"
-				aria-valuemin={this.min}
-				aria-valuemax={this.max}
-				aria-valuenow={this._ariaValueNow}
-				aria-valuetext={`From ${this.startValue} to ${this.endValue}`}
-				aria-label={this._ariaLabel}
-				aria-disabled={this._ariaDisabled}
-			></div>
-		</div>
-	);
-}
-
-export function handles(this: RangeSlider) {
-	return (<>
-		<div class="ui5-slider-handle-container" style={this.styles.startHandle} part="handle-container">
-			<div class="ui5-slider-handle ui5-slider-handle--start"
 				part="handle"
-				onFocusIn={this._onfocusin}
-				onFocusOut={this._onfocusout}
+				exportparts="icon: handle-icon"
 				role="slider"
-				tabindex={this._tabIndex}
-				aria-orientation="horizontal"
-				aria-valuemin={this.min}
-				aria-valuemax={this.max}
-				aria-valuenow={this.startValue}
-				aria-labelledby={this._ariaLabelledByStartHandleText}
-				aria-disabled={this._ariaDisabled}
-				aria-describedby={this._ariaDescribedByHandleText}
-				aria-keyshortcuts={this._ariaKeyshortcuts}
-			>
-				<Icon name={directionArrows}
-					mode="Decorative"
-					slider-icon
-				></Icon>
-			</div>
+				aria-valuemin={slider.min}
+				aria-valuemax={slider.max}
+				aria-valuenow={slider.startValue}
+				aria-label={slider._ariaLabelStartHandle}
+				aria-disabled={slider._ariaDisabled}
+				aria-describedby={slider._ariaDescribedByHandleText}
+				onFocusIn={slider._onfocusin}
+				onFocusOut={slider._onfocusout}
+				style={{
+					"inset-inline-start": `clamp(0%, ${position}%, 100%)`,
+				}}
+			></SliderHandle>
 
-			<SliderTooltip
-				open={this._tooltipsOpen}
-				value={this.tooltipStartValue}
-				valueState={this.tooltipStartValueState}
-				min={this.min}
-				max={this.max}
-				data-sap-ui-start-value
-				editable={this.editableTooltip}
-				followRef={this._startHandle}
-				onChange={this._onTooltipChange}
-				onKeyDown={this._onTooltipKeydown}
-				onFocusChange={this._onTooltipFocusChange}
-				onOpen={this._onTooltipOpen}
-				onInput={this._onTooltipInput}
-			>
-			</SliderTooltip>
-		</div>
-		<div class="ui5-slider-handle-container" style={this.styles.endHandle} part="handle-container">
-			<div class="ui5-slider-handle ui5-slider-handle--end"
+			{startTooltip(slider)}
+		</>
+	);
+};
+
+const endHandle = (slider: RangeSlider) => {
+	const position = _handlePosition(slider.min, slider.max, slider.endValue);
+
+	return (
+		<>
+			<SliderHandle
+				value={slider.endValue}
+				min={slider.min}
+				max={slider.max}
+				tabIndex={slider._tabIndex}
+				active={slider.rangePressed}
+				handleType={SliderHandleType.End}
+				aria-orientation="horizontal"
 				part="handle"
-				onFocusIn={this._onfocusin}
-				onFocusOut={this._onfocusout}
+				exportparts="icon: handle-icon"
 				role="slider"
-				tabIndex={this._tabIndex}
-				aria-orientation="horizontal"
-				aria-valuemin={this.min}
-				aria-valuemax={this.max}
-				aria-valuenow={this.endValue}
-				aria-labelledby={this._ariaLabelledByEndHandleText}
-				aria-describedby={this._ariaDescribedByHandleText}
-				aria-disabled={this._ariaDisabled}
-				aria-keyshortcuts="F2"
-			>
-				<Icon name={directionArrows}
-					mode="Decorative"
-					slider-icon
-				></Icon>
-			</div>
+				aria-valuemin={slider.min}
+				aria-valuemax={slider.max}
+				aria-valuenow={slider.endValue}
+				aria-label={slider._ariaLabelEndHandle}
+				aria-disabled={slider._ariaDisabled}
+				aria-describedby={slider._ariaDescribedByHandleText}
+				onFocusIn={slider._onfocusin}
+				onFocusOut={slider._onfocusout}
+				style={{
+					"inset-inline-start": `clamp(0%, ${position}%, 100%)`,
+				}}
+			></SliderHandle>
+
+			{endTooltip(slider)}
+		</>
+	);
+};
 
-			<SliderTooltip
-				open={this._tooltipsOpen}
-				value={this.tooltipEndValue}
-				valueState={this.tooltipEndValueState}
-				min={this.min}
-				max={this.max}
-				data-sap-ui-end-value
-				editable={this.editableTooltip}
-				followRef={this._endHandle}
-				onChange={this._onTooltipChange}
-				onKeyDown={this._onTooltipKeydown}
-				onFocusChange={this._onTooltipFocusChange}
-				onOpen={this._onTooltipOpen}
-				onInput={this._onTooltipInput}
+const startTooltip = (slider: RangeSlider) => (
+	<SliderTooltip
+		open={slider._tooltipsOpen}
+		value={slider.tooltipStartValue}
+		valueState={slider.tooltipStartValueState}
+		min={slider.min}
+		max={slider.max}
+		data-sap-ui-start-value
+		editable={slider.editableTooltip}
+		followRef={slider._startHandle}
+		onChange={slider._onTooltipChange}
+		onKeyDown={slider._onTooltipKeydown}
+		onFocusChange={slider._onTooltipFocusChange}
+		onOpen={slider._onTooltipOpen}
+		onInput={slider._onTooltipInput}
+	>
+	</SliderTooltip>
+);
+
+const endTooltip = (slider: RangeSlider) => (
+	<SliderTooltip
+		open={slider._tooltipsOpen}
+		value={slider.tooltipEndValue}
+		valueState={slider.tooltipEndValueState}
+		min={slider.min}
+		max={slider.max}
+		data-sap-ui-end-value
+		editable={slider.editableTooltip}
+		followRef={slider._endHandle}
+		onChange={slider._onTooltipChange}
+		onKeyDown={slider._onTooltipKeydown}
+		onFocusChange={slider._onTooltipFocusChange}
+		onOpen={slider._onTooltipOpen}
+		onInput={slider._onTooltipInput}
+	>
+	</SliderTooltip>
+);
+
+export default function RangeSliderTemplate(this: RangeSlider) {
+	return (
+		<>
+			<div
+				class="ui5-slider-evo-root"
+				part="root-container"
+				onMouseDown={this._onmousedown}
+				onTouchStart={this._onmousedown}
+				onMouseOver={this._onmouseover}
+				onMouseOut={this._onmouseout}
+				onKeyDown={this._onkeydown}
+				onKeyUp={this._onkeyup}
 			>
-			</SliderTooltip>
-		</div>
-	</>);
+				<SliderScale
+					startValue={this.startValue}
+					endValue={this.endValue}
+					min={this.min}
+					max={this.max}
+					step={this._effectiveStep}
+					showTickmarks={this.showTickmarks}
+					labelInterval={this.labelInterval}
+					progressTabIndex={this._tabIndex}
+					progressAriaValueNow={this._ariaValueNow}
+					progressAriaValueText={`From ${this.startValue} to ${this.endValue}`}
+					progressAriaLabel={this._ariaLabel}
+					progressAriaDisabled={this._ariaDisabled}
+					progressPressed={this.rangePressed}
+					progressFocused={this._progressFocused}
+					onFocusIn={this._onfocusin}
+					onFocusOut={this._onfocusout}
+					part="scale"
+					exportparts="inner: scale-inner, progress: progress-bar"
+				>
+					{startHandle(this)}
+					{endHandle(this)}
+
+					{this.editableTooltip && <>
+						<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{this._ariaDescribedByInputText}</span>
+					</>}
+				</SliderScale>
+			</div>
+		</>
+	);
 }

package/src/SliderHandleTemplate.tsx

@@ -1,10 +1,16 @@
 import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
 import Icon from "./Icon.js";
 import type SliderHandle from "./SliderHandle.js";
+import { SliderHandleType } from "./SliderHandle.js";
 
 export default function SliderHandleTemplate(this: SliderHandle) {
 	return (
-		<div class="ui5-slider-handle-container">
+		<div class={{
+			"ui5-slider-handle-container": true,
+			"ui5-slider-handle": true,
+			"ui5-slider-handle--start": this.handleType === SliderHandleType.Start,
+			"ui5-slider-handle--end": this.handleType === SliderHandleType.End,
+		}}>
 			<Icon name={directionArrows}
 				mode="Decorative"
 				part="icon"

package/src/SliderScaleTemplate.tsx

@@ -25,7 +25,32 @@ export default function SliderScaleTemplate(this: SliderScale) {
 					))}
 				</div>
 			)}
-			<div class="ui5-slider-scale-progress" part="progress" style={this._progressStyle}></div>
+			<div
+				class={{
+					"ui5-slider-scale-progress": true,
+					"ui5-slider-progress": true,
+					"ui5-slider-progress--focused": this.progressFocused || this.progressPressed,
+				}}
+				part="progress"
+				style={this._progressStyle}
+				tabIndex={this.progressTabIndex}
+				role="slider"
+				aria-orientation="horizontal"
+				aria-valuemin={this.min}
+				aria-valuemax={this.max}
+				aria-valuenow={this.progressAriaValueNow}
+				aria-valuetext={this.progressAriaValueText}
+				aria-label={this.progressAriaLabel}
+				aria-disabled={this.progressAriaDisabled}
+				onMouseEnter={this._onProgressMouseEnter}
+				onMouseLeave={this._onProgressMouseLeave}
+			></div>
+			<div
+				class="ui5-slider-scale-progress-hover-area"
+				style={this._progressStyle}
+				onMouseEnter={this._onProgressMouseEnter}
+				onMouseLeave={this._onProgressMouseLeave}
+			></div>
 			<slot></slot>
 		</div>
 	);

package/src/SliderTemplate.tsx

@@ -29,7 +29,6 @@ const handle = (slider: Slider) => {
 				aria-valuenow={slider.value}
 				aria-label={slider._ariaLabel}
 				aria-disabled={slider._ariaDisabled}
-				aria-keyshortcuts={slider._ariaKeyshortcuts}
 				aria-describedby={slider._ariaDescribedByHandleText}
 				style={{
 					"inset-inline-start": `clamp(0%, ${position}%, 100%)`,

package/src/TableHeaderRowTemplate.tsx

@@ -54,13 +54,35 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColInde
 				return [<slot name={cell._individualSlot}></slot>];
 			})}
 
+			{ this._renderDummyCell && this._hasPopin &&
+				<TableHeaderCell id="dummy-cell" role="none" aria-hidden={true}
+					data-excluded-from-navigation="">
+				</TableHeaderCell>
+			}
+
 			{ this._rowActionCount > 0 &&
 				<TableHeaderCell id="actions-cell" aria-colindex={ariaColIndex++}>
 					<div id="actions-cell-content">{this._i18nRowActions}</div>
 				</TableHeaderCell>
 			}
 
-			{ this._popinCells.length > 0 &&
+			{ this._renderNavigated &&
+				<TableHeaderCell id="navigated-cell"
+					data-excluded-from-navigation
+					aria-hidden={true}
+					role="none"
+				>
+					<div id="navigated"></div>
+				</TableHeaderCell>
+			}
+
+			{ this._renderDummyCell && !this._hasPopin &&
+				<TableHeaderCell id="dummy-cell" role="none" aria-hidden={true}
+					data-excluded-from-navigation="nofocus">
+				</TableHeaderCell>
+			}
+
+			{ this._hasPopin &&
 				<TableHeaderCell id="popin-cell" aria-colindex={ariaColIndex++} data-excluded-from-navigation>
 					<div id="popin-cell-content">{this._i18nRowPopin}</div>
 				</TableHeaderCell>

package/src/TableRowTemplate.tsx

@@ -47,6 +47,12 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 				return [<slot name={cell._individualSlot}></slot>];
 			})}
 
+			{ this._renderDummyCell && this._hasPopin &&
+				<TableCell id="dummy-cell" role="none" aria-hidden={true} data-border-merged=""
+					data-excluded-from-navigation="">
+				</TableCell>
+			}
+
 			{ this._rowActionCount > 0 &&
 				<TableCell id="actions-cell"
 					aria-colindex={ariaColIndex++}
@@ -80,7 +86,13 @@ export default function TableRowTemplate(this: TableRow, ariaColIndex: number =
 				</TableCell>
 			}
 
-			{ this._popinCells.length > 0 &&
+			{ this._renderDummyCell && !this._hasPopin &&
+				<TableCell id="dummy-cell" role="none" aria-hidden={true} data-border-merged=""
+					data-excluded-from-navigation="nofocus">
+				</TableCell>
+			}
+
+			{ this._hasPopin &&
 				<TableCell id="popin-cell"
 					data-ui5-table-popin-cell
 					aria-colindex={ariaColIndex++}

package/src/i18n/messagebundle.properties

@@ -478,10 +478,10 @@ PANEL_ICON=Expand/Collapse
 RANGE_SLIDER_ARIA_DESCRIPTION=Range
 
 #XACT: ARIA description for range slider start handle
-RANGE_SLIDER_START_HANDLE_DESCRIPTION=Left handle
+RANGE_SLIDER_START_HANDLE_DESCRIPTION=Minimum
 
 #XACT: ARIA description for range slider end handle
-RANGE_SLIDER_END_HANDLE_DESCRIPTION=Right handle
+RANGE_SLIDER_END_HANDLE_DESCRIPTION=Maximum
 
 #XBUT: Rating indicator tooltip text
 RATING_INDICATOR_TOOLTIP_TEXT=Rating