@sapui5/sap.ushell 1.132.0 → 1.133.0

package/src/main/js/sap/ushell/ui/ShellHeader.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2009-2023 SAP SE, All Rights Reserved
+// Copyright (c) 2009-2024 SAP SE, All Rights Reserved
 
 sap.ui.define([
     "sap/base/i18n/Localization",
@@ -18,8 +18,9 @@ sap.ui.define([
     "sap/ushell/utils",
     "sap/ushell/utils/WindowUtils",
     "sap/ushell/state/StateManager",
-    "sap/ushell/Container"
-], function (
+    "sap/ushell/Container",
+    "sap/ui/events/KeyCodes"
+], (
     Localization,
     Control,
     Element,
@@ -36,21 +37,23 @@ sap.ui.define([
     utils,
     WindowUtils,
     StateManager,
-    Container
-) {
+    Container,
+    KeyCodes
+) => {
     "use strict";
 
     // shortcut for sap.ushell.state.StateManager.ShellMode
     const ShellMode = StateManager.ShellMode;
 
-    var sSearchOverlayCSS = "sapUshellShellShowSearchOverlay";
+    const sSearchOverlayCSS = "sapUshellShellShowSearchOverlay";
 
-    var _iSearchWidth = 0; // width as requested by the SearchShellHelper
-    var _sCurrentTheme;
-    var _sCurrentLogo;
-    var _sSapLogo = sap.ui.require.toUrl("sap/ushell/themes/base/img/SAPLogo.svg");
+    let _iSearchWidth = 0; // width as requested by the SearchShellHelper
+    let _sCurrentTheme,
+        _sCurrentLogo;
+    const _sSapLogo = sap.ui.require.toUrl("sap/ushell/themes/base/img/SAPLogo.svg");
+    let _oLastFocusedHeaderElement = null;
 
-    var ShellHeader = Control.extend("sap.ushell.ui.ShellHeader", /** @lends sap.ushell.ui.ShellHeader.prototype */ {
+    const ShellHeader = Control.extend("sap.ushell.ui.ShellHeader", /** @lends sap.ushell.ui.ShellHeader.prototype */ {
         metadata: {
             library: "sap.ushell",
             properties: {
@@ -122,6 +125,10 @@ sap.ui.define([
         rangeNames: ["Phone", "Tablet", "Desktop", "LargeDesktop", "ExtraLargeDesktop"]
     };
 
+    /**
+     * Initializes the ShellHeader control
+     * @private
+     */
     ShellHeader.prototype.init = function () {
         Device.media.initRangeSet(
             this.FLPRangeSet.name,
@@ -144,16 +151,22 @@ sap.ui.define([
          * path.  Navigation included. To preserve that optimization we let
          * shell controller initialize ShellNavigationInternal before using it here.
          */
-        EventHub.once("ShellNavigationInitialized").do(function () {
-            Container.getServiceAsync("ShellNavigationInternal").then(function (oShellNavigationInternal) {
+        EventHub.once("ShellNavigationInitialized").do(() => {
+            Container.getServiceAsync("ShellNavigationInternal").then((oShellNavigationInternal) => {
                 this._rerenderLogoNavigationFilterBound = this._rerenderLogoNavigationFilter.bind(this, oShellNavigationInternal);
 
                 oShellNavigationInternal.registerNavigationFilter(this._rerenderLogoNavigationFilterBound);
                 this._rerenderLogoNavigationFilterBound.detach = function () {
                     oShellNavigationInternal.unregisterNavigationFilter(this._rerenderLogoNavigationFilterBound);
                 };
-            }.bind(this));
-        }.bind(this));
+            });
+        });
+
+        this._oEventDelegate = {
+            onkeydown: this._onKeyDown.bind(this),
+            onBeforeFastNavigationFocus: this.onBeforeFastNavigationFocus.bind(this)
+        };
+        this.addEventDelegate(this._oEventDelegate);
     };
 
     /**
@@ -167,6 +180,9 @@ sap.ui.define([
         if (this._rerenderLogoNavigationFilterfnRerenderLogoNavigationFilter) {
             this._rerenderLogoNavigationFilterfnRerenderLogoNavigationFilter.detach();
         }
+
+        this.removeEventDelegate(this._oEventDelegate);
+        delete this._oEventDelegate;
     };
 
     /**
@@ -176,14 +192,14 @@ sap.ui.define([
      */
     ShellHeader.prototype.setFocusOnShellHeader = function (backwardsNavigation) {
         if (backwardsNavigation) {
-            var aHeaderEndItems = this.getHeadEndItems();
+            const aHeaderEndItems = this.getHeadEndItems();
             if (aHeaderEndItems.length > 0) {
                 aHeaderEndItems[aHeaderEndItems.length - 1].focus();
             } else {
                 this.getAppTitle().focus();
             }
         } else {
-            var aHeaderItems = this.getHeadItems();
+            const aHeaderItems = this.getHeadItems();
 
             if (aHeaderItems.length > 0) {
                 aHeaderItems[0].focus();
@@ -214,11 +230,14 @@ sap.ui.define([
         window.location.href = sHref;
     };
 
+    /**
+     * Handle logic after rendering of the ShellHeader
+     */
     ShellHeader.prototype.onAfterRendering = function () {
         // ShellHeader may render earlier than the initial theme is loaded.
         // Check this situation and hide the unstyled content.
         // Ideally, getComputedStyle should be used, but getBoundingClientRect is faster
-        var oHeaderElement = this.getDomRef();
+        const oHeaderElement = this.getDomRef();
         if (!_sCurrentTheme && document.body.getBoundingClientRect().height === 0) {
             // The header has position:static -> the library style is not applied yet -> hide it
             oHeaderElement.style.visibility = "hidden";
@@ -229,6 +248,105 @@ sap.ui.define([
         this.refreshLayout();
     };
 
+    /**
+     * Handle keyboard navigation in the ShellHeader on spaces & pages launchpad. Callback for the keydown event.
+     * @param {Event} event The keyboard event
+     * @private
+     * @since 1.133.0
+     */
+    ShellHeader.prototype._onKeyDown = function (event) {
+        if (event.keyCode !== KeyCodes.ARROW_RIGHT && event.keyCode !== KeyCodes.ARROW_LEFT) {
+            return;
+        }
+        this._handleArrowNavigation(event);
+    };
+
+    /**
+     * Handler for the Arrow key navigation in the ShellHeader
+     * @param {Event} event The keyboard event
+     * @since 1.133.0
+     */
+    ShellHeader.prototype._handleArrowNavigation = function (event) {
+        const aFocusableTags = ["INPUT", "TEXTAREA", "SELECT", "BUTTON", "A", "SPAN"];
+        const oShellHeader = this.getDomRef();
+        const oFocusedItem = document.activeElement;
+
+        if (!oFocusedItem || !oShellHeader.contains(oFocusedItem)) {
+            return;
+        }
+
+        const aItems = this._getFocusableHeaderItems();
+
+        const iCurrentIndex = Array.from(aItems).indexOf(oFocusedItem);
+        const iNextIndex = event.keyCode === KeyCodes.ARROW_RIGHT ? iCurrentIndex + 1 : iCurrentIndex - 1;
+        const oNextItem = aItems[iNextIndex];
+
+        if (!oNextItem || (!aFocusableTags.includes(oNextItem.tagName) && oNextItem.getAttribute("tabindex") === "-1")) {
+            return;
+        }
+
+        oNextItem.focus();
+        _oLastFocusedHeaderElement = oNextItem;
+    };
+
+    /**
+     * Get all focusable items in the ShellHeader
+     * @returns {Node[]} Array of focusable items in the ShellHeader
+     * @private
+     * @since 1.133.0
+    */
+    ShellHeader.prototype._getFocusableHeaderItems = function () {
+        const oShellHeader = this.getDomRef();
+        const aItems = Array.from(oShellHeader.querySelectorAll("[tabindex]"))
+            .filter((oElement) => !oElement.disabled && !oElement.hidden
+                && oElement.attributes.tabindex.value !== "-1");
+
+        if (aItems.length === 0) {
+            return;
+        }
+
+        let bHasBackBtn = false;
+        let bHasSideMenuBtn = false;
+        aItems.forEach((oItem) => {
+            if (oItem.id === "backBtn") {
+                bHasBackBtn = true;
+            } else if (oItem.id === "sideMenuExpandCollapseBtn") {
+                bHasSideMenuBtn = true;
+            }
+        });
+
+        // Move the logo to the third position in the array in case of back button and side nav, else 2nd or 1st
+        if (bHasSideMenuBtn) {
+            aItems.splice(bHasBackBtn ? 2 : 1, 0, document.getElementById("shell-header-logo"));
+        } else {
+            aItems.splice(bHasBackBtn ? 1 : 0, 0, document.getElementById("shell-header-logo"));
+        }
+
+        if (Localization.getRTL()) {
+            return aItems.reverse();
+        }
+        return aItems;
+    };
+
+    /**
+     * Handler function for updating and reading the last visited header item for F6 navigation before UI5 fast nav
+     * @param {Event} event The keyboard event
+     * @param {Node} oFocusedElement The currently focused element
+     * @private
+     * @since 1.133.0
+     */
+    ShellHeader.prototype.onBeforeFastNavigationFocus = function (event) {
+        event.preventDefault();
+
+        if (_oLastFocusedHeaderElement !== null) {
+            _oLastFocusedHeaderElement.focus();
+        } else if (document.getElementById("shell-header-logo") !== null) {
+            document.getElementById("shell-header-logo").focus();
+        } else {
+            this.setFocusOnShellHeader();
+        }
+    };
+
     /**
      * Triggered by UI5.
      * Necessary also for Themedesigner.
@@ -240,7 +358,7 @@ sap.ui.define([
      * @private
      */
     ShellHeader.prototype.onThemeChanged = function (oEvent) {
-        var bInvalidate = false;
+        let bInvalidate = false;
         if (_sCurrentTheme !== oEvent.theme) {
             _sCurrentTheme = oEvent.theme;
             bInvalidate = true;
@@ -273,7 +391,7 @@ sap.ui.define([
      */
     ShellHeader.prototype.getLogo = function () {
 
-        var sCustomCompanyLogoUrl = this.getCustomCompanyLogoUrl();
+        const sCustomCompanyLogoUrl = this.getCustomCompanyLogoUrl();
 
         if (sCustomCompanyLogoUrl !== "") {
             return sCustomCompanyLogoUrl;
@@ -283,7 +401,7 @@ sap.ui.define([
             return this.getProperty("logo");
         }
 
-        var sThemeLogo = ThemingParameters.get({
+        const sThemeLogo = ThemingParameters.get({
             name: "sapUiGlobalLogo",
             callback: () => {
                 // When no Logo can be retrieved yet, null is returned by ThemingParameters.get() - and a rerender is triggered.
@@ -296,7 +414,7 @@ sap.ui.define([
         }
         if (sThemeLogo) {
             // check given logo URL: Is it valid?
-            var aMatch = /url[\s]*\('?"?([^'")]*)'?"?\)/.exec(sThemeLogo);
+            const aMatch = /url[\s]*\('?"?([^'")]*)'?"?\)/.exec(sThemeLogo);
             if (aMatch) {
                 return aMatch[1];
             }
@@ -321,32 +439,32 @@ sap.ui.define([
      * @private
      */
     ShellHeader.prototype.getCustomLogoAltText = function () {
-        var sCompanyLogoAltTexts = Config.last("/core/companyLogo/accessibleText");
-        var sCurrentLanguage;
+        const sCompanyLogoAltTexts = Config.last("/core/companyLogo/accessibleText");
+        let sCurrentLanguage;
 
         delete this._sCustomAltText;
         if (sCompanyLogoAltTexts) {
             try {
-                var oLogoAltTexts = JSON.parse(sCompanyLogoAltTexts);
+                const oLogoAltTexts = JSON.parse(sCompanyLogoAltTexts);
                 if (oLogoAltTexts) {
                     sCurrentLanguage = Localization.getLanguage();
                     // 1. Exact match
                     this._sCustomAltText = oLogoAltTexts[sCurrentLanguage];
                     // 2. Current language: "en", custom language: "en-GB"
                     if (!this._sCustomAltText) {
-                        Object.keys(oLogoAltTexts).forEach(function (sKey) {
+                        Object.keys(oLogoAltTexts).forEach((sKey) => {
                             if (sKey.indexOf(sCurrentLanguage) === 0) {
                                 this._sCustomAltText = oLogoAltTexts[sKey];
                             }
-                        }.bind(this));
+                        });
                     }
                     // 3. Current language: "en-GB", custom language: "en"
                     if (!this._sCustomAltText) {
-                        Object.keys(oLogoAltTexts).forEach(function (sKey) {
+                        Object.keys(oLogoAltTexts).forEach((sKey) => {
                             if (sCurrentLanguage.indexOf(sKey) === 0) {
                                 this._sCustomAltText = oLogoAltTexts[sKey];
                             }
-                        }.bind(this));
+                        });
                     }
                     // 4. Default value
                     if (!this._sCustomAltText) {
@@ -388,11 +506,11 @@ sap.ui.define([
 
         // Search field related logic:
         if (this.getSearchVisible()) {
-            var oSearch = this.getDomRef("hdr-search");
+            const oSearch = this.getDomRef("hdr-search");
             oSearch.style.display = "none";
             this._hideElementsForSearch();
             oSearch.style.display = "";
-            oSearch.style["max-width"] = _iSearchWidth + "rem";
+            oSearch.style["max-width"] = `${_iSearchWidth}rem`;
             this.fireSearchSizeChanged({
                 remSize: Rem.fromPx(oSearch.getBoundingClientRect().width),
                 isFullWidth: this.isPhoneState() || this.getDomRef("hdr-end").style.display === "none"
@@ -406,27 +524,27 @@ sap.ui.define([
      * Otherwise there should only be a tooltip if the Title is truncated.
      */
     ShellHeader.prototype._adjustAppTitleTooltip = function () {
-        var oAppTitle = Element.getElementById("shellAppTitle");
+        const oAppTitle = Element.getElementById("shellAppTitle");
         if (oAppTitle) {
-            var oDivElement = oAppTitle.getDomRef("button");
-            var oSpanElement = oDivElement && oDivElement.firstChild;
+            const oDivElement = oAppTitle.getDomRef("button");
+            const oSpanElement = oDivElement && oDivElement.firstChild;
             if (oSpanElement) {
-                var sNewTooltip;
+                let sNewTooltip;
 
-                var bAllMyAppsEnabled = Config.last("/core/services/allMyApps/enabled");
+                const bAllMyAppsEnabled = Config.last("/core/services/allMyApps/enabled");
                 const bDefaultShellMode = StateManager.getShellMode() === ShellMode.Default;
                 const bLegacyHomeState = StateManager.isLegacyHome();
 
-                var bAllMyAppsMenu = (bDefaultShellMode || bLegacyHomeState) && bAllMyAppsEnabled;
+                const bAllMyAppsMenu = (bDefaultShellMode || bLegacyHomeState) && bAllMyAppsEnabled;
 
-                var oNavMenu = Element.getElementById(oAppTitle.getNavigationMenu());
-                var bNavMenu = oNavMenu && oNavMenu.getItems() && oNavMenu.getItems().length > 0;
+                const oNavMenu = Element.getElementById(oAppTitle.getNavigationMenu());
+                const bNavMenu = oNavMenu && oNavMenu.getItems() && oNavMenu.getItems().length > 0;
                 if (bNavMenu) {
                     sNewTooltip = resources.i18n.getText("shellNavMenu_openMenuTooltip_navigationMenu");
                 } else if (bAllMyAppsMenu) {
                     sNewTooltip = resources.i18n.getText("shellNavMenu_openMenuTooltip_allMyApps");
                 } else {
-                    var bTruncated = oSpanElement.offsetWidth < oSpanElement.scrollWidth;
+                    const bTruncated = oSpanElement.offsetWidth < oSpanElement.scrollWidth;
                     sNewTooltip = bTruncated ? oAppTitle.getText() : null;
                 }
 
@@ -438,6 +556,10 @@ sap.ui.define([
         }
     };
 
+    /**
+     * removes a headItem from the aggregation headItems
+     * @param {string} vItem The headItem to remove or its index or id
+     */
     ShellHeader.prototype.removeHeadItem = function (vItem) {
         if (typeof vItem === "number") {
             vItem = this.getHeadItems()[vItem];
@@ -445,17 +567,29 @@ sap.ui.define([
         this.removeAggregation("headItems", vItem);
     };
 
+    /**
+     * Whether the device is in the expanded state
+     * @returns {boolean} true if the device is in the expanded state
+     */
     ShellHeader.prototype.isExtraLargeState = function () {
         return Device.media.getCurrentRange(this.FLPRangeSet.name).from === this.FLPRangeSet.rangeBorders[3];
     };
 
+    /**
+     * Whether the device is in the medium or bigger state
+     * @returns {boolean} true if the device is in the medium or bigger state
+     */
     ShellHeader.prototype.isMediumOrBiggerState = function () {
         return Device.media.getCurrentRange(this.FLPRangeSet.name).from >= this.FLPRangeSet.rangeBorders[0];
     };
 
+    /**
+     * Whether the device is in the phone state
+     * @returns {boolean} true if the device is in the phone state
+     */
     ShellHeader.prototype.isPhoneState = function () {
-        var deviceType = Device.media.getCurrentRange(Device.media.RANGESETS.SAP_STANDARD).name;
-        var bEnoughSpaceForSearch = this.getDomRef().getBoundingClientRect().width > _iSearchWidth;
+        const deviceType = Device.media.getCurrentRange(Device.media.RANGESETS.SAP_STANDARD).name;
+        const bEnoughSpaceForSearch = this.getDomRef().getBoundingClientRect().width > _iSearchWidth;
         return (Device.system.phone || deviceType === "Phone" || !bEnoughSpaceForSearch);
     };
 
@@ -473,7 +607,7 @@ sap.ui.define([
 
             this.setProperty("searchState", sStateName, false);
 
-            var bShow = (sStateName !== "COL");
+            const bShow = (sStateName !== "COL");
             document.body.classList.toggle(sSearchOverlayCSS, bShow && bWithOverlay);
 
             // save for animation after rendering
@@ -488,11 +622,11 @@ sap.ui.define([
             return;
         }
 
-        var nReqWidth,
-            oSearchContainer = this.getDomRef("hdr-search-container"),
-            oBeginContainer = this.getDomRef("hdr-begin"),
-            oCenterContainer = this.getDomRef("hdr-center"),
-            oEndContainer = this.getDomRef("hdr-end");
+        let nReqWidth;
+        const oSearchContainer = this.getDomRef("hdr-search-container");
+        const oBeginContainer = this.getDomRef("hdr-begin");
+        const oCenterContainer = this.getDomRef("hdr-center");
+        const oEndContainer = this.getDomRef("hdr-end");
 
         if (this.getSearchState() === "EXP" || this.isPhoneState()) {
             nReqWidth = Rem.toPx(_iSearchWidth + 3); // 3 rem minimal distance for EXP
@@ -501,10 +635,10 @@ sap.ui.define([
         }
 
         // order of elements: center container, left items in reverse order, left container, right container
-        var aElements = [oBeginContainer];
+        const aElements = [oBeginContainer];
         // add left items in reverse order before the begin container
         // IE11: NodeList does not have the forEach function
-        Array.prototype.forEach.call(oBeginContainer.childNodes, function (element) {
+        Array.prototype.forEach.call(oBeginContainer.childNodes, (element) => {
             aElements.unshift(element);
         });
         // center container is hidden first
@@ -515,7 +649,7 @@ sap.ui.define([
         // restore all hidden elements to unhide some or all of them when the user makes the window wider
         oBeginContainer.style.flexBasis = "";
         oEndContainer.style.display = "";
-        aElements.forEach(function (e) {
+        aElements.forEach((e) => {
             if (e.getAttribute("id") === "shellAppTitle") {
                 e.classList.remove("sapUiPseudoInvisibleText");
             } else {
@@ -524,8 +658,8 @@ sap.ui.define([
         });
 
         // remove elements one-by-one
-        var oElement;
-        for (var i = 0; i < aElements.length; i++) {
+        let oElement;
+        for (let i = 0; i < aElements.length; i++) {
             oElement = aElements[i];
             if (nReqWidth > oSearchContainer.getBoundingClientRect().width) {
                 if (oElement.getAttribute("id") === "shellAppTitle") {
@@ -558,21 +692,21 @@ sap.ui.define([
      * @returns {boolean} true if the current page is the homepage
      */
     ShellHeader.prototype.isHomepage = function () {
-        var sHash = (window.hasher && "#" + window.hasher.getHash()) || "";
+        const sHash = (window.hasher && `#${window.hasher.getHash()}`) || "";
 
-        var rIntentParameterBeforeAppRoute = new RegExp(
+        const rIntentParameterBeforeAppRoute = new RegExp(
             "[?]" + // question mark character
             "(?:" + // begin non capturing block
             "(?!&[/])." + // any character which is not '&' followed by '/'
             ")*" // repeat
         );
-        var sHashNoParams = sHash.replace(rIntentParameterBeforeAppRoute, "");
+        const sHashNoParams = sHash.replace(rIntentParameterBeforeAppRoute, "");
 
         return utils.isRootIntent(sHashNoParams) || sHashNoParams === "#Launchpad-openFLPPage";
     };
 
     ShellHeader.prototype._rerenderLogoNavigationFilter = function (oShellNavigationInternal, sNewHash, sOldHash) {
-        var bAppSpecificChange = oShellNavigationInternal.hashChanger.isInnerAppNavigation(sNewHash, sOldHash);
+        const bAppSpecificChange = oShellNavigationInternal.hashChanger.isInnerAppNavigation(sNewHash, sOldHash);
         if (bAppSpecificChange) {
             this.invalidate(); // enable/disable logo
         }
@@ -585,10 +719,17 @@ sap.ui.define([
         return this.getSearchState() !== this.SearchState.COL;
     };
 
+    /**
+     * gets the central control in the header
+     * @returns {Element} The central control in the header
+     */
     ShellHeader.prototype.getCentralControl = function () {
         return Element.getElementById(this.getCentralAreaElement());
     };
 
+    /**
+     * sets the logo in the ShellHeader to undefined
+     */
     ShellHeader.prototype.setNoLogo = function () {
         this.setLogo(undefined);
     };
@@ -620,3 +761,4 @@ sap.ui.define([
 
     return ShellHeader;
 });
+