@openui5/sap.ui.unified 1.150.0 → 1.151.0

package/src/sap/ui/unified/ShellHeadItem.js

@@ -7,12 +7,10 @@
 // Provides control sap.ui.unified.ShellHeadItem.
 sap.ui.define([
 	'sap/ui/core/Element',
-	'sap/ui/core/IconPool',
 	'./library',
-	"sap/base/security/encodeXML",
 	"sap/ui/thirdparty/jquery"
 ],
-	function(Element, IconPool, library, encodeXML, jQuery) {
+	function(Element, library, jQuery) {
 	"use strict";
 
 
@@ -28,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public
@@ -174,32 +172,6 @@ sap.ui.define([
 	};
 
 
-	ShellHeadItem.prototype.setIcon = function(sIcon){
-		this.setProperty("icon", sIcon, true);
-		if (this.getDomRef()) {
-			this._refreshIcon();
-		}
-		return this;
-	};
-
-
-	ShellHeadItem.prototype._refreshIcon = function(){
-		var $Ico = jQuery(this.$().children()[0]);
-		var sIco = this.getIcon();
-		if (IconPool.isIconURI(sIco)) {
-			var oIconInfo = IconPool.getIconInfo(sIco);
-			$Ico.html("").attr("style", "");
-			if (oIconInfo) {
-				$Ico.text(oIconInfo.content).attr("role", "presentation").attr("aria-label", oIconInfo.text || oIconInfo.name).css("font-family", "'" + oIconInfo.fontFamily + "'");
-			}
-		} else {
-			var $Image = this.$("img-inner");
-			if ($Image.length == 0 || $Image.attr("src") != sIco) {
-				$Ico.attr("style", "").attr("aria-label", null).html("<img role='presentation' id='" + this.getId() + "-img-inner' src='" + encodeXML(sIco) + "'>");
-			}
-		}
-	};
-
 	return ShellHeadItem;
 
 });

package/src/sap/ui/unified/ShellHeadUserItem.js

@@ -8,10 +8,9 @@
 sap.ui.define([
 	'sap/ui/core/Element',
 	'sap/ui/core/IconPool',
-	'./library',
-	"sap/base/security/encodeXML"
+	'./library'
 ],
-	function(Element, IconPool, library, encodeXML) {
+	function(Element, IconPool, library) {
 	"use strict";
 
 
@@ -27,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public
@@ -86,33 +85,6 @@ sap.ui.define([
 	ShellHeadUserItem.prototype.onsapspace = ShellHeadUserItem.prototype.onclick;
 	ShellHeadUserItem.prototype.onsapenter = ShellHeadUserItem.prototype.onclick;
 
-	ShellHeadUserItem.prototype.setImage = function(sImage){
-		this.setProperty("image", sImage, true);
-		if (this.getDomRef()) {
-			this._refreshImage();
-		}
-		return this;
-	};
-
-	ShellHeadUserItem.prototype._refreshImage = function(){
-		var $Ico = this.$("img");
-		var sImage = this.getImage();
-		if (!sImage) {
-			$Ico.html("").attr("style", "").css("display", "none");
-		} else if (IconPool.isIconURI(sImage)) {
-			var oIconInfo = IconPool.getIconInfo(sImage);
-			$Ico.html("").attr("style", "");
-			if (oIconInfo) {
-				$Ico.text(oIconInfo.content).attr("role", "presentation").attr("aria-label", oIconInfo.text || oIconInfo.name).css("font-family", "'" + oIconInfo.fontFamily + "'");
-			}
-		} else {
-			var $Image = this.$("img-inner");
-			if ($Image.length == 0 || $Image.attr("src") != sImage) {
-				$Ico.attr("style", "").attr("aria-label", null).html("<img role='presentation' id='" + this.getId() + "-img-inner' src='" + encodeXML(sImage) + "'>");
-			}
-		}
-	};
-
 	ShellHeadUserItem.prototype._checkAndAdaptWidth = function(bShellSearchVisible){
 		if (!this.getDomRef()) {
 			return false;

package/src/sap/ui/unified/ShellHeader.js

@@ -8,13 +8,14 @@ sap.ui.define([
 	'./library',
 	"sap/base/i18n/Localization",
 	'sap/ui/core/Control',
+	'sap/ui/core/IconPool',
 	'sap/ui/Device',
 	"sap/ui/core/ControlBehavior",
 	"sap/ui/core/Lib",
 	'sap/ui/core/theming/Parameters',
 	"sap/ui/thirdparty/jquery"
 ],
-	function(library, Localization, Control, Device, ControlBehavior, Library, Parameters, jQuery) {
+	function(library, Localization, Control, _IconPool, Device, ControlBehavior, Library, Parameters, jQuery) {
 	"use strict";
 
 
@@ -116,7 +117,18 @@ sap.ui.define([
 							pressed: aItems[i].getToggleEnabled() ? aItems[i].getSelected() : null
 						});
 					}
-					rm.write("><span></span><div class='sapUiUfdShellHeadItmMarker'><div></div></div></div>");
+					rm.write(">");
+					var sIcon = aItems[i].getIcon();
+					if (sIcon) {
+						if (_IconPool.isIconURI(sIcon)) {
+							rm.writeIcon(sIcon, null, {role: "presentation"});
+						} else {
+							rm.write("<span><img role='presentation' src='");
+							rm.writeEscaped(sIcon);
+							rm.write("'></span>");
+						}
+					}
+					rm.write("<div class='sapUiUfdShellHeadItmMarker'><div></div></div></div>");
 				}
 
 				var oUser = oHeader.getUser();
@@ -141,7 +153,21 @@ sap.ui.define([
 						}
 					}
 
-					rm.write("><span id='", oUser.getId(), "-img' aria-hidden='true' class='sapUiUfdShellHeadUsrItmImg'></span>");
+					rm.write(">");
+					var sImage = oUser.getImage();
+					if (sImage) {
+						if (_IconPool.isIconURI(sImage)) {
+							rm.writeIcon(sImage, ["sapUiUfdShellHeadUsrItmImg"], {id: oUser.getId() + "-img", "aria-hidden": "true"});
+						} else {
+							rm.write("<span id='", oUser.getId(), "-img' aria-hidden='true' class='sapUiUfdShellHeadUsrItmImg'>");
+							rm.write("<img role='presentation' src='");
+							rm.writeEscaped(sImage);
+							rm.write("'>");
+							rm.write("</span>");
+						}
+					} else {
+						rm.write("<span id='", oUser.getId(), "-img' aria-hidden='true' class='sapUiUfdShellHeadUsrItmImg'></span>");
+					}
 					rm.write("<span id='" + oUser.getId() + "-name' class='sapUiUfdShellHeadUsrItmName'");
 					var sUserName = oUser.getUsername() || "";
 					rm.writeAttributeEscaped("title", sUserName);
@@ -237,22 +263,12 @@ sap.ui.define([
 	};
 
 	ShellHeader.prototype._refresh = function(){
-		function updateItems(aItems){
-			for (var i = 0; i < aItems.length; i++) {
-				aItems[i]._refreshIcon();
-			}
-		}
-
-		updateItems(this.getHeadItems());
-		updateItems(this.getHeadEndItems());
-
 		var oUser = this.getUser(),
 			isPhoneSize = jQuery("html").hasClass("sapUiMedia-Std-Phone"),
 			searchVisible = !this.$("hdr-search").hasClass("sapUiUfdShellHidden"),
 			$logo = this.$("icon");
 
 		if (oUser) {
-			oUser._refreshImage();
 			oUser._checkAndAdaptWidth(searchVisible && !!this.getSearch());
 		}
 

package/src/sap/ui/unified/ShellLayout.js

@@ -56,7 +56,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/ShellOverlay.js

@@ -46,7 +46,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/SplitContainer.js

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/TimeRange.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @class
 	 * Time range for use in <code>NonWorkingPeriod</code>
 	 * @extends sap.ui.core.Element
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/WeeklyRecurrenceRule.js

@@ -22,7 +22,7 @@ sap.ui.define([
 	 * with <code>recurrenceType</code> set to <code>Weekly</code> is provided.
 	 *
 	 * @extends sap.ui.unified.RecurrenceRule
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/YearlyRecurrenceRule.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * with <code>recurrenceType</code> set to <code>Yearly</code> is provided.
 	 *
 	 * @extends sap.ui.unified.MonthlyRecurrenceRule
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/calendar/DatesRow.js

@@ -39,7 +39,7 @@ sap.ui.define([
 	 * If used inside the calendar the properties and aggregation are directly taken from the parent
 	 * (To not duplicate and sync DateRanges and so on...)
 	 * @extends sap.ui.unified.calendar.Month
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/Header.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 *
 	 * <b>Note:</b> This is used inside the calendar. Not for standalone usage
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/HeaderRenderer.js

@@ -277,6 +277,7 @@ sap.ui.define([
 			if (this.getTooltipButton(oHead, i)) {
 				oRm.attr("title", this.getTooltipButton(oHead, i));
 			}
+			oRm.attr("tabindex", "0");
 			oRm.accessibilityState(null, mAccProps);
 			mAccProps = {};
 			oRm.openEnd(); // button element

package/src/sap/ui/unified/calendar/IndexPicker.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * This control serves for picking an item from a grid with items which are relative periods in Plannig Calendar.
 	 * This is used inside the sap.m.PlanningCalendar relative views. Not for stand alone usage.
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/calendar/Month.js

@@ -78,7 +78,7 @@ sap.ui.define([
 	 * If used inside the calendar the properties and aggregation are directly taken from the parent
 	 * (To not duplicate and sync DateRanges and so on...)
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public
@@ -155,6 +155,15 @@ sap.ui.define([
 			 */
 			showWeekNumbers : {type : "boolean", group : "Appearance", defaultValue : true},
 
+			/**
+			 * Determines whether the header of the week numbers column is displayed.
+			 * The column header text is translated according to the active language.
+			 *
+			 * <b>Note:</b> Takes effect only when <code>showWeekNumbers</code> is set to <code>true</code>.
+			 * @since 1.151
+			 */
+			showWeekNumbersHeader : {type : "boolean", group : "Appearance", defaultValue : false},
+
 			/**
 			 * The value of this property is set trough the sap.ui.unified.Calendar control,
 			 * in order for the current sap.ui.unified.calendar.Month control to know which
@@ -326,6 +335,30 @@ sap.ui.define([
 		return "";
 	};
 
+	/**
+	 * Returns the text to display in the week numbers column header.
+	 * Returns an empty string when the header should not be shown.
+	 * @returns {string} The week numbers column header text, or empty string
+	 * @private
+	 */
+	Month.prototype._getWeekNumbersHeaderText = function() {
+		if (!this.getShowWeekNumbersHeader()) {
+			return "";
+		}
+
+		// Locales where the calendar week abbreviation (sap-calendarWeek narrow) is too long
+		// to fit in the week number column header cell — verified manually.
+		// These fall back to the "week" narrow display name from CLDR (week-narrow.displayName).
+		const _oLongCWLocales = new Set(["ar", "ar-EG", "ar-SA", "he", "vi", "zh-CN", "zh-HK", "zh-TW"]),
+			oLocaleData = this._getLocaleData();
+
+		if (_oLongCWLocales.has(this._getLocale())) {
+			return oLocaleData.getDisplayName("week", "narrow");
+		}
+
+		return oLocaleData.getCalendarWeek("narrow").replace("{0}", "").trim();
+	};
+
 	Month.prototype.exit = function(){
 
 		if (this._oItemNavigation) {
@@ -364,6 +397,14 @@ sap.ui.define([
 
 		// check if day names are too big -> use smaller ones
 		_checkNamesLength.call(this);
+
+		if (this._bFocusFromTouch) {
+			const iFocusedIndex = this._oItemNavigation.getFocusedIndex();
+			const oDomRef = this._oItemNavigation.getItemDomRefs()[iFocusedIndex];
+			if (oDomRef) {
+				oDomRef.classList.add("sapUiCalItemFocusFromTouch");
+			}
+		}
 	};
 
 	Month.prototype.onmouseover = function(oEvent) {
@@ -1084,6 +1125,10 @@ sap.ui.define([
 			clientY: oEvent.clientY
 		};
 
+		if (oEvent.target.closest(".sapUiCalItem")) {
+			this._bFocusFromTouch = true;
+		}
+
 		// handle only mouse down on a week number
 		if (oEvent.button
 			|| Device.support.touch
@@ -1102,6 +1147,12 @@ sap.ui.define([
 		this._handleWeekSelection(oFirstDayOfWeekCalendarDate, bFocusStartDate);
 	};
 
+	Month.prototype.ontouchstart = function(oEvent) {
+		if (oEvent.target.closest(".sapUiCalItem")) {
+			this._bFocusFromTouch = true;
+		}
+	};
+
 	Month.prototype.onmouseup = function(oEvent){
 		// BCP: 1980116734
 		// on a combi device right mouse button resulted in a selection (both a week or a single day)
@@ -1188,6 +1239,7 @@ sap.ui.define([
 		if (oEvent.which === KeyCodes.SPACE){
 			this.bSpaceButtonPressed = true;
 		}
+		this._bFocusFromTouch = false;
 	};
 	Month.prototype.onkeyup = function(oEvent){
 		if (oEvent.which === KeyCodes.SPACE){
@@ -2164,6 +2216,12 @@ sap.ui.define([
 			this._selectedWithMouse = true;
 		}
 
+		if (this._bFocusFromTouch) {
+			oDomRef.classList.add("sapUiCalItemFocusFromTouch");
+		} else {
+			oDomRef.classList.remove("sapUiCalItemFocusFromTouch");
+		}
+
 		if (bFireFocus) {
 			this.fireFocus({date: oFocusedDate.toLocalJSDate(), otherMonth: bOtherMonth});
 		}

package/src/sap/ui/unified/calendar/MonthPicker.js

@@ -57,7 +57,7 @@ sap.ui.define([
 	 * renders a MonthPicker with ItemNavigation
 	 * This is used inside the calendar. Not for stand alone usage
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/MonthRenderer.js

@@ -197,10 +197,10 @@ sap.ui.define([
 
 	MonthRenderer.renderDayNames = function(oRm, oMonth, oLocaleData, iStartDay, iDays, bDayNumberAsId, sWidth){
 
-		var iFirstDayOfWeek = oMonth._getFirstDayOfWeek();
-		var sId = oMonth.getId();
-		var sDayId = "";
-		var sCalendarType = oMonth.getPrimaryCalendarType();
+		var iFirstDayOfWeek = oMonth._getFirstDayOfWeek(),
+			sId = oMonth.getId(),
+			sCalendarType = oMonth.getPrimaryCalendarType(),
+			sDayId = "";
 
 		var aWeekDays = [];
 		if (oMonth._bLongWeekDays || !oMonth._bNamesLengthChecked) {
@@ -211,7 +211,7 @@ sap.ui.define([
 		var aWeekDaysWide = oLocaleData.getDaysStandAlone("wide", sCalendarType);
 
 		if (oMonth.getShowWeekNumbers() && sCalendarType !== CalendarType.Islamic) { // on Islamic primary calendar week numbers are not shown, do not add dummy cell
-			this.renderDummyCell(oRm, "sapUiCalWH", true, "columnheader");
+			this.renderDummyCell(oRm, "sapUiCalWH", true, oMonth._getWeekNumbersHeaderText(), "columnheader");
 		}
 
 		for ( var i = 0; i < iDays; i++) {
@@ -308,7 +308,7 @@ sap.ui.define([
 
 		if (iLength === 28) {
 			// there are only 4 full weeks (28 days), add one hidden 'day' div in order to open space for 5-th week
-			this.renderDummyCell(oRm, "sapUiCalItem", false, "");
+			this.renderDummyCell(oRm, "sapUiCalItem", false, "", "");
 		}
 	};
 
@@ -316,22 +316,35 @@ sap.ui.define([
 	 * Generates empty 'day' div that adds space for one more week in the calendar, in case of 4 full weeks only (28 days)
 	 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
 	 * @param {string} sClassName css class that will be added to the dummy element styles
-	 * @param {boolean} bVisible if set to true the dummy element will be visible
+	 * @param {boolean} bShowColumn if set to true the dummy element will be visible
+	 * @param {string} sCellText text to render inside the dummy element; if empty, no text span is rendered
 	 * @param {string} sRole aria role attribute
 	 * @private
 	 */
-	MonthRenderer.renderDummyCell = function(oRm, sClassName, bVisible, sRole) {
+	MonthRenderer.renderDummyCell = function(oRm, sClassName, bShowColumn, sCellText, sRole) {
+		var sFullText = Library.getResourceBundleFor("sap.ui.unified").getText("CALENDAR_WEEK");
 		oRm.openStart("div");
 		oRm.class(sClassName);
 		oRm.class("sapUiCalDummy");
-		oRm.style("visibility", bVisible ? "visible" : "hidden");
+		oRm.style("visibility", bShowColumn ? "visible" : "hidden");
 		oRm.attr("role", sRole);
+		if (sCellText) {
+			oRm.attr("title", sFullText);
+		}
 		oRm.openEnd();
 
+		if (sCellText) {
+			oRm.openStart("span");
+			oRm.attr("aria-hidden", "true");
+			oRm.openEnd();
+			oRm.text(sCellText);
+			oRm.close("span");
+		}
+
 		oRm.openStart("span");
 		oRm.class("sapUiPseudoInvisibleText");
 		oRm.openEnd();
-		oRm.text(Library.getResourceBundleFor("sap.ui.unified").getText("CALENDAR_WEEK"));
+		oRm.text(sFullText);
 		oRm.close("span");
 
 		oRm.close('div');

package/src/sap/ui/unified/calendar/MonthsRow.js

@@ -70,7 +70,7 @@ sap.ui.define([
 	 * The MontsRow works with UI5Date or JavaScript Date objects, but only the month and the year are used to display and interact.
 	 * As representation for a month, the 1st of the month will always be returned in the API.
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/OneMonthDatesRow.js

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * Other usages are not supported.
 	 *
 	 * @extends sap.ui.unified.calendar.DatesRow
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/calendar/TimesRow.js

@@ -69,7 +69,7 @@ sap.ui.define([
 	 *
 	 * The TimesRow works with UI5Date or JavaScript Date objects.
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/WeeksRow.js

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * The WeeksRow works with UI5Date or JavaScript Date objects for its API, but internally uses CalendarDate objects for calculations.
 	 *
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/calendar/YearPicker.js

@@ -61,7 +61,7 @@ sap.ui.define([
 	 * As in all date-time controls, all pubic JS Date objects that are given (e.g. <code>setDate()</code>) or read
 	 * (e.g. <code>getFirstRenderedDate</code>) with values which are considered as date objects in browser(local) timezone.
 	 * @extends sap.ui.core.Control
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/YearRangePicker.js

@@ -45,7 +45,7 @@ sap.ui.define([
 	 * @extends sap.ui.unified.calendar.YearPicker
 	 *
 	 * @author SAP SE
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/library.js

@@ -32,14 +32,14 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.ui.unified
 	 * @author SAP SE
-	 * @version 1.150.0
+	 * @version 1.151.0
 	 * @since 1.28
 	 * @public
 	 */
 	var thisLib = Library.init({
 		name : "sap.ui.unified",
 		apiVersion: 2,
-		version: "1.150.0",
+		version: "1.151.0",
 		dependencies : ["sap.ui.core"],
 		designtime: "sap/ui/unified/designtime/library.designtime",
 		types: [

package/src/sap/ui/unified/themes/base/Calendar.less

@@ -151,14 +151,18 @@
 }
 
 /* no default (browser) outline, if device needs focus visualization its defined later */
-.sapUiCalHead button:focus,
-.sapUiCalCancel:focus {
+html.sap-desktop .sapUiCalHead button:focus,
+html.sap-desktop .sapUiCalCancel:focus,
+.sapUiCalHead button:focus-visible,
+.sapUiCalCancel:focus-visible {
 	outline: none;
 }
 
 /* hover and focus makes only sense on desktops. On mobile devices it's not needed */
 html.sap-desktop .sapUiCalHead button:focus,
-html.sap-desktop .sapUiCalCancel:focus {
+html.sap-desktop .sapUiCalCancel:focus,
+.sapUiCalHead button:focus-visible,
+.sapUiCalCancel:focus-visible {
 	background-color: var(--sapButton_Hover_Background);
 	color: var(--sapButton_Hover_TextColor);
 }
@@ -498,7 +502,7 @@ html.sap-desktop .sapUiCalHead button.sapUiCalDsbl:focus,
 	.sapUiCalItem {
 		line-height: 1.875rem;
 
-		&:focus {
+		&:focus-visible {
 			line-height: 1.75rem;
 		}
 
@@ -510,6 +514,13 @@ html.sap-desktop .sapUiCalHead button.sapUiCalDsbl:focus,
 	}
 }
 
+html.sap-desktop .sapUiCalMonthPicker.sapUiCalMonthSecType .sapUiCalItem:focus,
+html.sap-desktop .sapUiCalYearPicker.sapUiCalMonthSecType .sapUiCalItem:focus,
+.sapUiCalMonthPicker.sapUiCalMonthSecType .sapUiCalItem:focus-visible,
+.sapUiCalYearPicker.sapUiCalMonthSecType .sapUiCalItem:focus-visible {
+	line-height: 1.75rem;
+}
+
 .sapUiSizeCozy {
 
 	.sapUiCal:not(.sapUiCalDateInt) {
@@ -547,7 +558,7 @@ html.sap-desktop .sapUiCalHead button.sapUiCalDsbl:focus,
 	.sapUiCalItem {
 		line-height: 1rem;
 
-		&:focus {
+		&:focus-visible {
 			line-height: 0.875rem;
 
 			.sapUiCalItemSecText {
@@ -557,6 +568,17 @@ html.sap-desktop .sapUiCalHead button.sapUiCalDsbl:focus,
 	}
 }
 
+html.sap-desktop .sapUiSizeCompact .sapUiCalMonthPicker.sapUiCalMonthSecType .sapUiCalItem:focus,
+html.sap-desktop .sapUiSizeCompact .sapUiCalYearPicker.sapUiCalMonthSecType .sapUiCalItem:focus,
+.sapUiSizeCompact .sapUiCalMonthPicker.sapUiCalMonthSecType .sapUiCalItem:focus-visible,
+.sapUiSizeCompact .sapUiCalYearPicker.sapUiCalMonthSecType .sapUiCalItem:focus-visible {
+	line-height: 0.875rem;
+
+	.sapUiCalItemSecText {
+		line-height: 0.875rem;
+	}
+}
+
 /* Day, Month and YearPicker on popup */
 .sapUiCalMonthView[data-sap-ui-popup],
 .sapUiCalMonthPicker[data-sap-ui-popup],
@@ -766,7 +788,14 @@ html.sapUiMedia-Std-Phone .sapUiCalHeadB0 {
 	box-sizing: border-box;
 }
 
-.sapUiCalMonthSecType .sapUiCalItem:focus > .sapUiCalItemSecText {
+.sapUiCalItem:focus-visible {
+    outline-width: none;
+    outline-style: none;
+    outline-color: none;
+}
+
+html.sap-desktop .sapUiCalMonthSecType .sapUiCalItem:focus > .sapUiCalItemSecText,
+.sapUiCalMonthSecType .sapUiCalItem:focus-visible > .sapUiCalItemSecText {
 	line-height: 0.75rem;
 }
 
@@ -1012,6 +1041,10 @@ html.sapUiMedia-Std-Phone .sapUiCalHeadB0 {
 	height: 2rem;
 }
 
+.sapUiSizeCompact .sapUiCalWH {
+	overflow: visible;
+}
+
 .sapUiSizeCompact .sapUiCal:not(.sapUiCalInt) {
 
 	.sapUiCalContent {