From ef4d941d3126b916674e72af4a2e260667358c4b Mon Sep 17 00:00:00 2001
From: Christian Geyer <149682967+camelCaseChris@users.noreply.github.com>
Date: Fri, 26 Jan 2024 11:48:19 +0100
Subject: [PATCH] Handle Svelte Compiler Warnings (#3607)

* Fix SCSS preprocessor in Svelte config

* Adapt SCSS config

* Ignore Svelte key event warnings

* Remove unused component props

* Ignore Svelte tabindex warnings

* Ignore Svelte href warnings

* Fix unused CSS selectors

* Ignore Svelte autofocus warnings

* Fix Svelte warnings about redundant aria roles

* Fix warning about missing aria role

* Ignore warnings about href values

* Fix warnings about non-root "$:"

* Fix deprecation warnings about using "type"

---------

Co-authored-by: Ndricim <ndricim.rrapi@sap.com>
Co-authored-by: Johannes Doberer <johannes.doberer@sap.com>
---
 core/src/Alerts.svelte                        |  2 +-
 core/src/App.svelte                           | 31 ++++++++-----------
 core/src/Authorization.svelte                 |  8 ++---
 .../src/AuthorizationSimpleProfileMenu.svelte |  8 ++++-
 core/src/Backdrop.svelte                      |  2 +-
 core/src/ConfirmationModal.svelte             |  4 +--
 core/src/Modal.svelte                         |  3 +-
 core/src/SplitView.svelte                     |  8 +++--
 core/src/TopNavDropDown.svelte                |  3 +-
 core/src/UserSettingsDialog.svelte            |  5 ++-
 core/src/UserSettingsEditor.svelte            |  6 ++--
 core/src/navigation/BadgeCounter.svelte       |  8 ++---
 core/src/navigation/Breadcrumb.svelte         |  5 +--
 core/src/navigation/ContextSwitcher.svelte    | 16 ++--------
 core/src/navigation/ContextSwitcherNav.svelte |  6 +++-
 core/src/navigation/GlobalNav.svelte          |  4 +--
 core/src/navigation/GlobalSearch.svelte       |  9 ++++--
 .../navigation/GlobalSearchCentered.svelte    |  8 +++--
 core/src/navigation/LeftNav.svelte            | 27 +++++++---------
 core/src/navigation/LogoTitle.svelte          |  8 +++--
 .../navigation/MobileTopNavDropDown.svelte    |  3 +-
 core/src/navigation/ProductSwitcher.svelte    |  4 ++-
 core/src/navigation/StatusBadge.svelte        |  2 +-
 core/src/navigation/TabNav.svelte             | 11 ++++---
 core/src/navigation/TopNav.svelte             | 25 +++++++--------
 core/svelte.config.cjs                        |  7 ++++-
 26 files changed, 116 insertions(+), 107 deletions(-)

diff --git a/core/src/Alerts.svelte b/core/src/Alerts.svelte
index 4d108a628b..381f325f73 100644
--- a/core/src/Alerts.svelte
+++ b/core/src/Alerts.svelte
@@ -138,7 +138,7 @@
   {/each}
 </div>
 
-<style type="text/scss">
+<style lang="scss">
   .luigi-alert--overlay {
     position: absolute;
     z-index: 1100;
diff --git a/core/src/App.svelte b/core/src/App.svelte
index 7e03b7ba3b..3e756d7b9d 100644
--- a/core/src/App.svelte
+++ b/core/src/App.svelte
@@ -1,4 +1,4 @@
-<script type="text/javascript">
+<script>
   import Alerts from './Alerts.svelte';
   import ConfirmationModal from './ConfirmationModal.svelte';
   import Modal from './Modal.svelte';
@@ -109,7 +109,6 @@
   export let inputElem;
   export let luigiCustomSearchRenderer__slot;
   export let displaySearchResult;
-  export let displayCustomSearchResult = true;
   export let searchResult;
   export let storedUserSettings;
 
@@ -190,7 +189,7 @@
       const nextPath = buildPath(data.params);
       const nodePath = Routing.getNodePath(currentNode, urlParamsRaw);
 
-      $: preservedViews.push({
+      preservedViews.push({
         path:
           config.iframe.luigi && config.iframe.luigi.pathParams
             ? GenericHelpers.replaceVars(
@@ -627,7 +626,6 @@
         if (
           GenericHelpers.isFunction(searchProvider.customSearchResultRenderer)
         ) {
-          displayCustomSearchResult = true;
           let searchApiObj = {
             fireItemSelected: (item) => {
               searchProvider.onSearchResultItemSelected(item);
@@ -717,14 +715,14 @@
   const splitViewIframeCreated = (event) => {
     splitViewIframe = event.detail.splitViewIframe;
     splitViewIframeData = event.detail.splitViewIframeData;
-    $: mfSplitView.collapsed = event.detail.collapsed;
+    mfSplitView.collapsed = event.detail.collapsed;
   };
 
   const splitViewStatusChanged = (event) => {
-    $: if (event.detail.displayed !== undefined) {
+    if (event.detail.displayed !== undefined) {
       mfSplitView.displayed = event.detail.displayed;
     }
-    $: if (event.detail.collapsed !== undefined) {
+    if (event.detail.collapsed !== undefined) {
       mfSplitView.collapsed = event.detail.collapsed;
     }
   };
@@ -732,7 +730,7 @@
   const splitViewWCCreated = (event) => {
     splitViewWC = event.detail.splitViewWC;
     splitViewWCData = event.detail.splitViewWCData;
-    $: mfSplitView.collapsed = event.detail.collapsed;
+    mfSplitView.collapsed = event.detail.collapsed;
   };
 
   /// RESIZING
@@ -2075,6 +2073,7 @@
     />
   {/if}
   <Backdrop disable={disableBackdrop}>
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <div
       class="fd-page iframeContainer"
       class:lui-split-view={mfSplitView.displayed}
@@ -2126,7 +2125,6 @@
       on:handleSearchNavigation={handleSearchNavigation}
       bind:isSearchFieldVisible
       bind:displaySearchResult
-      bind:displayCustomSearchResult
       bind:searchResult
       bind:inputElem
       bind:luigiCustomSearchRenderer__slot
@@ -2166,10 +2164,7 @@
   {/if}
 </div>
 
-<style type="text/scss">
-  @import 'src/styles/_mixins.scss';
-  @import 'src/styles/_variables.scss';
-
+<style lang="scss">
   /* custom width of left side nav, single App title width or Multiple-App dropdown width*/
   :root {
     --luigi__left-sidenav--width: 15rem;
@@ -2306,14 +2301,14 @@
     overflow: hidden;
     margin-bottom: -5px;
   }
-  .iframeContainerNoNav {
+  :global(.iframeContainerNoNav) {
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
   }
-  .iframeContainerNoNav :global(iframe) {
+  :global(.iframeContainerNoNav iframe) {
     border: none;
     width: 100%;
     height: 100%;
@@ -2633,7 +2628,7 @@
   :global(html.luigi-app-in-custom-container) {
     position: relative;
 
-    [luigi-app-root] {
+    :global([luigi-app-root]) {
       position: relative;
       overflow: hidden;
     }
@@ -2656,7 +2651,7 @@
   :global(.fd-side-nav--condensed) {
     :global(.fd-nested-list__link) {
       font-size: 10px;
-      &.has-child:after {
+      &:global(.has-child:after) {
         height: 0;
       }
     }
@@ -2747,7 +2742,7 @@
       display: block;
     }
 
-    iframe {
+    :global(iframe) {
       display: none;
     }
   }
diff --git a/core/src/Authorization.svelte b/core/src/Authorization.svelte
index b82429f099..32f8f594f9 100644
--- a/core/src/Authorization.svelte
+++ b/core/src/Authorization.svelte
@@ -232,12 +232,11 @@
 
       <ul
         class="fd-list fd-list--compact fd-list--navigation fd-list--navigation-indication fd-list--no-border"
-        role="list"
       >
         {#each profileNav.items as profileItem}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <li
             tabindex="-1"
-            role="listitem"
             class="fd-list__item fd-list__item--link"
             on:click={() => onActionClick(profileItem)}
             data-testid={getTestId(profileItem)}
@@ -274,11 +273,12 @@
         {#if hasUserSettings}
           <li
             tabindex="-1"
-            role="listitem"
             class="fd-list__item fd-list__item--link lui-anchor-node"
             on:click|preventDefault={onUserSettingsClick}
             on:keyup={event => handleKeyUp(event)}
           >
+            <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+            <!-- svelte-ignore a11y-missing-attribute -->
             <a
               tabindex="0"
               class="fd-list__link"
@@ -355,7 +355,7 @@
   </div>
 {/if}
 
-<style type="text/scss">
+<style lang="scss">
   .fd-top-nav__icon {
     display: inline-block;
     vertical-align: middle;
diff --git a/core/src/AuthorizationSimpleProfileMenu.svelte b/core/src/AuthorizationSimpleProfileMenu.svelte
index 463bfb1684..b89db71544 100644
--- a/core/src/AuthorizationSimpleProfileMenu.svelte
+++ b/core/src/AuthorizationSimpleProfileMenu.svelte
@@ -205,6 +205,7 @@
         </li>
       {/if}
       {#each profileNav.items as profileItem}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <li
           class="fd-menu__item"
           on:click={() => onActionClick(profileItem)}
@@ -245,6 +246,8 @@
           on:keyup={event => handleKeyUp(event)}
           data-testid={getTestId(profileNav.settings)}
         >
+          <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+          <!-- svelte-ignore a11y-missing-attribute -->
           <a
             tabindex="0"
             title="User Settings"
@@ -276,6 +279,7 @@
       {/if}
       {#if isAuthorizationEnabled || isProfileLogoutItem}
         {#if isLoggedIn || (!isAuthorizationEnabled && isProfileLogoutItem)}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <li
             class="fd-menu__item"
             on:click={onLogoutClick}
@@ -310,7 +314,9 @@
           </li>
         {/if}
         {#if isAuthorizationEnabled && !isLoggedIn}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <li class="fd-menu__item" on:click={startAuthorization}>
+            <!-- svelte-ignore a11y-missing-attribute -->
             <a aria-label="Login" class="fd-menu__link" data-testid="login-btn">
               <span class="fd-menu__title">Login</span>
             </a>
@@ -321,7 +327,7 @@
   </nav>
 {/if}
 
-<style type="text/scss">
+<style lang="scss">
   .fd-top-nav__icon {
     display: inline-block;
     vertical-align: middle;
diff --git a/core/src/Backdrop.svelte b/core/src/Backdrop.svelte
index 49b9bb2f3a..d802e6dca8 100644
--- a/core/src/Backdrop.svelte
+++ b/core/src/Backdrop.svelte
@@ -90,7 +90,7 @@
   <slot />
 </div>
 
-<style type="text/scss">
+<style lang="scss">
   .lui-backdrop {
     background-color: rgba(0, 0, 0, 0.6);
     position: absolute;
diff --git a/core/src/ConfirmationModal.svelte b/core/src/ConfirmationModal.svelte
index d452ca733d..8317b2d54e 100644
--- a/core/src/ConfirmationModal.svelte
+++ b/core/src/ConfirmationModal.svelte
@@ -105,9 +105,7 @@
   </section>
 </div>
 
-<style type="text/scss">
-  @import 'src/styles/_variables.scss';
-
+<style lang="scss">
   .fd-message-box {
     z-index: 1001;
     &__body {
diff --git a/core/src/Modal.svelte b/core/src/Modal.svelte
index 2a3234e090..def620ee35 100644
--- a/core/src/Modal.svelte
+++ b/core/src/Modal.svelte
@@ -398,8 +398,7 @@
   </div>
 </div>
 
-<style type="text/scss">
-  @import 'src/styles/_variables.scss';
+<style lang="scss">
   :global(.lui-breadcrumb) .drawer-dialog {
     top: calc(#{$topNavHeight} + var(--luigi__breadcrumb--height));
   }
diff --git a/core/src/SplitView.svelte b/core/src/SplitView.svelte
index cf2907dce7..589f3c57a5 100644
--- a/core/src/SplitView.svelte
+++ b/core/src/SplitView.svelte
@@ -300,6 +300,8 @@
         id="splitViewDraggerCollapsed"
         class="splitViewSeparator isCollapsed"
       >
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-missing-attribute -->
         <a
           class="lui-collapse-btn"
           on:click|stopPropagation|preventDefault={expand}
@@ -317,6 +319,8 @@
   <div id="splitViewDraggerBackdrop" />
   <div id="splitViewDragger" on:mousedown|stopPropagation={onDragStart}>
     <div class="splitViewSeparator" />
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-missing-attribute -->
     <a
       class="lui-collapse-btn"
       on:click|stopPropagation|preventDefault={collapse}
@@ -326,9 +330,7 @@
   </div>
 {/if}
 
-<style type="text/scss">
-  @import 'src/styles/_variables.scss';
-
+<style lang="scss">
   $collapsedSplitviewHeight: 38px;
   $colorNeutral4: #89919a;
 
diff --git a/core/src/TopNavDropDown.svelte b/core/src/TopNavDropDown.svelte
index 7ba5e7ae68..5ad5710465 100644
--- a/core/src/TopNavDropDown.svelte
+++ b/core/src/TopNavDropDown.svelte
@@ -115,6 +115,7 @@
       {#if children}
         {#each children as node}
           {#if node.label}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <li
               class="fd-menu__item"
               on:click={() => onActionClick(node)}
@@ -162,7 +163,7 @@
   />
 {/if}
 
-<style type="text/scss">
+<style lang="scss">
   .fd-top-nav__icon {
     img {
       max-width: 16px;
diff --git a/core/src/UserSettingsDialog.svelte b/core/src/UserSettingsDialog.svelte
index ed33da1ea6..c3034a1e27 100644
--- a/core/src/UserSettingsDialog.svelte
+++ b/core/src/UserSettingsDialog.svelte
@@ -20,7 +20,6 @@
   import { LuigiConfig } from './core-api';
   import { TOP_NAV_DEFAULTS } from './utilities/luigi-config-defaults';
   import { KEYCODE_ESC, KEYCODE_ENTER, KEYCODE_SPACE, KEYCODE_HOME, KEYCODE_END } from './utilities/keycode.js';
-  export let schemaObj;
   export let userSettingGroups;
 
 
@@ -333,6 +332,7 @@
 </script>
 
 <svelte:window on:resize={onResize} on:keydown={handleKeyDown} />
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div class="fd-dialog fd-dialog--active lui-usersettings-dialog" tabindex="0">
   <div
     class="fd-dialog__content lui-usersettings-dialog-size"
@@ -353,12 +353,10 @@
           >
             <ul
               class="fd-list fd-list--byline fd-list--navigation lui-us-list"
-              role="list"
             >
               {#each Object.entries(userSettingGroups) as [key, userSettingGroup], index}
                 {#each Object.entries(userSettingGroup) as userSettingsGroupProperty}
                   <li
-                    role="listitem"
                     class="fd-list__item fd-list__item--link lui-us-navlist__item"
                     data-testid="us-navigation-item"
                     on:click|preventDefault={() =>
@@ -366,6 +364,7 @@
                     on:keydown={event => handleKeyUp(event, [index])}
                     tabindex="0"
                   >
+                    <!-- svelte-ignore a11y-invalid-attribute -->
                     <a tabindex="-1" class="fd-list__link" href="#">
                       {#if userSettingsGroupProperty[1].icon}
                         {#if hasOpenUIicon(userSettingsGroupProperty[1])}
diff --git a/core/src/UserSettingsEditor.svelte b/core/src/UserSettingsEditor.svelte
index a6bcf994c2..293b3dc497 100644
--- a/core/src/UserSettingsEditor.svelte
+++ b/core/src/UserSettingsEditor.svelte
@@ -8,7 +8,6 @@
     KEYCODE_ARROW_DOWN,
   } from './utilities/keycode.js';
   export let userSettingGroup;
-  export let userSettingsGroupKey;
   export let storedUserSettingData;
   const dispatch = createEventDispatcher();
   let getTranslation = getContext('getTranslation');
@@ -260,6 +259,7 @@
                 {#if schemaItem.type === 'enum' && (schemaItem.style === undefined || schemaItem.style === 'list')}
                   <div class="fd-form-item">
                     <div class="fd-popover">
+                      <!-- svelte-ignore a11y-click-events-have-key-events -->
                       <div
                         class="fd-popover__control"
                         aria-expanded="false"
@@ -323,6 +323,8 @@
                                 class:is-focus={selectedLanguageLabel ===
                                   optionIndex}
                                 data-testid="lui-us-option{index}_{optionIndex}"
+                                aria-selected={selectedLanguageLabel ===
+                                  optionIndex}
                                 on:click={() =>
                                   updateComboBox(key, option, optionIndex)}
                                 on:keydown={event =>
@@ -454,7 +456,7 @@
   .fd-row .fd-col .fd-select__control.lui-anchor-node {
     margin: 0;
   }
-  .fd-select__control.lui-anchor-node[aria-expanded='true']:focus {
+  .fd-select__control:global(.lui-anchor-node[aria-expanded='true']:focus) {
     outline: none;
   }
 
diff --git a/core/src/navigation/BadgeCounter.svelte b/core/src/navigation/BadgeCounter.svelte
index b5143b2718..c36a880d61 100644
--- a/core/src/navigation/BadgeCounter.svelte
+++ b/core/src/navigation/BadgeCounter.svelte
@@ -13,14 +13,14 @@
   {/await}
 {/if}
 
-<style type="text/scss">
+<style lang="scss">
   :global(.fd-shellbar__action) {
     .fd-shellbar__counter--notification {
       top: 0;
       color: var(--sapContent_BadgeTextColor, #fff);
     }
 
-    .fd-menu .fd-top-nav__icon {
+    :global(.fd-menu .fd-top-nav__icon) {
       position: relative;
       margin-right: 8px;
       min-width: 16px;
@@ -33,8 +33,8 @@
       }
     }
 
-    .fd-product-switch__body--mobile {
-      .lui-product-switch__icon {
+    :global(.fd-product-switch__body--mobile) {
+      :global(.lui-product-switch__icon) {
         position: relative;
 
         .fd-shellbar__counter--notification {
diff --git a/core/src/navigation/Breadcrumb.svelte b/core/src/navigation/Breadcrumb.svelte
index 57a0a9d74a..2ca18936f4 100644
--- a/core/src/navigation/Breadcrumb.svelte
+++ b/core/src/navigation/Breadcrumb.svelte
@@ -20,8 +20,6 @@
   let store = getContext('store');
 
   export let showBreadcrumb;
-  export let hideNavComponent;
-  export let responsiveNavSetting;
   let addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
 
   const setNavData = async () => {
@@ -184,8 +182,7 @@
 
 <div class="lui-breadcrumb-container" bind:this={breadcrumbContainer} />
 
-<style type="text/scss">
-  @import 'src/styles/_variables.scss';
+<style lang="scss">
   .lui-breadcrumb-container {
     position: absolute;
     right: 0;
diff --git a/core/src/navigation/ContextSwitcher.svelte b/core/src/navigation/ContextSwitcher.svelte
index 8ea339f24c..af11184499 100644
--- a/core/src/navigation/ContextSwitcher.svelte
+++ b/core/src/navigation/ContextSwitcher.svelte
@@ -258,6 +258,7 @@
   {#if !isMobile}
     <div class="fd-shellbar__action fd-shellbar__action--desktop">
       <div class="fd-popover fd-popover--right">
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="fd-popover__control" on:click|stopPropagation={() => {}}>
           {#if addNavHrefForAnchor && selectedOption !== config.defaultLabel}
             <a
@@ -333,6 +334,7 @@
   {/if}
   <!-- MOBILE VERSION (fullscreen dialog): -->
   {#if isMobile && dropDownStates.contextSwitcherPopover && renderAsDropdown}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
       class="fd-dialog fd-dialog--active"
       on:click|stopPropagation={() => {}}
@@ -393,7 +395,7 @@
   {/if}
 {/if}
 
-<style type="text/scss">
+<style lang="scss">
   .lui-ctx-switch-menu {
     max-width: 30vw;
     color: var(--sapShell_TextColor, #fff);
@@ -422,18 +424,6 @@
   }
 
   .fd-popover {
-    #context_menu_middle {
-      max-height: 50vh;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    .fd-button--secondary,
-    .fd-menu__link {
-      max-width: 300px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
     .fd-popover__body {
       right: 0;
     }
diff --git a/core/src/navigation/ContextSwitcherNav.svelte b/core/src/navigation/ContextSwitcherNav.svelte
index 477991038c..9c35ef7dcd 100644
--- a/core/src/navigation/ContextSwitcherNav.svelte
+++ b/core/src/navigation/ContextSwitcherNav.svelte
@@ -14,6 +14,7 @@
   export let getTestId;
   export let getTranslation;
   export let isContextSwitcherDropdownShown;
+
   const dispatch = createEventDispatcher();
   export function onActionClick(node) {
     dispatch('onActionClick', { node });
@@ -29,6 +30,7 @@
     <ul class="fd-menu__list fd-menu__list--top">
       {#each actions as node}
         {#if node.position === 'top' || !['top', 'bottom'].includes(node.position)}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <li
             class="fd-menu__item"
             on:click={() => onActionClick(node)}
@@ -64,6 +66,7 @@
     {#if options && options.length}
       {#each options as node}
         {#await getNodeName(node.label, config.fallbackLabelResolver, node.id) then label}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <li
             class="fd-menu__item"
             on:click={() => goToOption(node, selectedOption)}
@@ -94,6 +97,7 @@
     <ul class="fd-menu__list fd-menu__list--bottom">
       {#each actions as node}
         {#if node.position === 'bottom'}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <li
             class="fd-menu__item"
             on:click={() => onActionClick(node)}
@@ -115,7 +119,7 @@
   {/if}
 </nav>
 
-<style type="text/scss">
+<style lang="scss">
   :global(.fd-popover__body) {
     .lui-ctx-switch-nav {
       max-height: calc(100vh - 76px);
diff --git a/core/src/navigation/GlobalNav.svelte b/core/src/navigation/GlobalNav.svelte
index 66c90280c8..a6f50e6eda 100644
--- a/core/src/navigation/GlobalNav.svelte
+++ b/core/src/navigation/GlobalNav.svelte
@@ -166,6 +166,7 @@
                     href={addNavHrefForAnchor ? getRouteLink(node) : undefined}
                     title={$getTranslation(node.label)}
                   >
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <div
                       class="lui-fd-nested-list__content"
                       on:click|preventDefault={() => handleClick(node)}
@@ -201,8 +202,7 @@
   </div>
 {/if}
 
-<style type="text/scss">
-  @import 'src/styles/_variables.scss';
+<style lang="scss">
   .lui-globalnav {
     position: fixed;
     width: $globalNavWidth;
diff --git a/core/src/navigation/GlobalSearch.svelte b/core/src/navigation/GlobalSearch.svelte
index ebed8b4f7f..f63512ffee 100644
--- a/core/src/navigation/GlobalSearch.svelte
+++ b/core/src/navigation/GlobalSearch.svelte
@@ -12,7 +12,6 @@
   export let isSearchFieldVisible;
   export let searchResult = [];
   export let displaySearchResult;
-  export let displayCustomSearchResult;
   export let inputElem;
   export let luigiCustomSearchRenderer__slot;
   export let luigiCustomSearchItemRenderer__slotContainer;
@@ -238,6 +237,7 @@
     >
       <div class="fd-input-group fd-shellbar__input-group">
         {#if search && search.disableInputHandlers}
+          <!-- svelte-ignore a11y-autofocus -->
           <input
             type="text"
             class="fd-input fd-input-group__input fd-shellbar__input-group-input luigi-search__input"
@@ -245,6 +245,7 @@
             autofocus
           />
         {:else}
+          <!-- svelte-ignore a11y-autofocus -->
           <input
             type="text"
             on:keyup={event => onKeyUp(event)}
@@ -267,6 +268,7 @@
                 bind:this={luigiCustomSearchItemRenderer__slotContainer}
               >
                 {#each searchResult as result, index}
+                  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
                   <li
                     class="fd-menu__item luigi-search-result-item__{index}"
                     on:click={event =>
@@ -275,6 +277,8 @@
                     tabindex="0"
                   >
                     {#if !isCustomSearchResultItemRenderer}
+                      <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <!-- svelte-ignore a11y-missing-attribute -->
                       <a
                         class="fd-menu__link"
                         on:click|preventDefault={() => {}}
@@ -308,6 +312,7 @@
   </div>
 </div>
 <div class="fd-shellbar__action fd-shellbar__action--desktop">
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div on:click|stopPropagation={() => {}}>
     <button
       class="fd-button fd-button--transparent fd-shellbar__button"
@@ -321,7 +326,7 @@
   </div>
 </div>
 
-<style type="text/scss">
+<style lang="scss">
   //remove default browser outline on focus for search results
   .luigi-search-popover__body {
     li[class*='luigi-search-result']:focus {
diff --git a/core/src/navigation/GlobalSearchCentered.svelte b/core/src/navigation/GlobalSearchCentered.svelte
index 429e4558e9..c196b0b3a0 100644
--- a/core/src/navigation/GlobalSearchCentered.svelte
+++ b/core/src/navigation/GlobalSearchCentered.svelte
@@ -12,7 +12,6 @@
   import { TOP_NAV_DEFAULTS } from '../utilities/luigi-config-defaults';
   export let searchResult = [];
   export let displaySearchResult;
-  export let displayCustomSearchResult;
   export let inputElem;
   export let luigiCustomSearchRenderer__slot;
   export let luigiCustomSearchItemRenderer__slotContainer;
@@ -323,6 +322,7 @@
                 bind:this={luigiCustomSearchItemRenderer__slotContainer}
               >
                 {#each searchResult as result, index}
+                  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
                   <li
                     class="fd-menu__item luigi-search-result-item__{index}"
                     on:click={event =>
@@ -331,6 +331,8 @@
                     tabindex="0"
                   >
                     {#if !isCustomSearchResultItemRenderer}
+                      <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <!-- svelte-ignore a11y-missing-attribute -->
                       <a
                         class="fd-menu__link"
                         on:click|preventDefault={() => {}}
@@ -365,6 +367,7 @@
 </div>
 {#if !isSearchFieldVisible}
   <div class="lui-global-search-btn">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div class="fd-shellbar__group" on:click|stopPropagation={() => {}}>
       <button
         class="fd-button fd-button--transparent fd-shellbar__button"
@@ -396,8 +399,7 @@
   </div>
 {/if}
 
-<style type="text/scss">
-  @import 'src/styles/_variables.scss';
+<style lang="scss">
   //remove default browser outline on focus for search results
   .luigi-search-popover__body {
     li[class*='luigi-search-result']:focus {
diff --git a/core/src/navigation/LeftNav.svelte b/core/src/navigation/LeftNav.svelte
index 2a0c631e67..7c62d652ac 100644
--- a/core/src/navigation/LeftNav.svelte
+++ b/core/src/navigation/LeftNav.svelte
@@ -507,6 +507,7 @@
     <div class="lui-nav-title">
       <ul class="fd-nested-list">
         <li class="fd-nested-list__item">
+          <!-- svelte-ignore a11y-missing-attribute -->
           <a
             class="fd-nested-list__link"
             title={resolveTooltipText(
@@ -637,6 +638,7 @@
               {:else if nodes.filter(node => !node.hideFromNav && node.label).length > 0}
                 <!-- Collapsible nodes -->
                 {#if nodes.metaInfo.collapsible}
+                  <!-- svelte-ignore a11y-click-events-have-key-events -->
                   <li
                     class="fd-nested-list__item lui-collapsible-item"
                     class:lui-item-expanded={isExpanded(
@@ -647,6 +649,7 @@
                       handleIconClick(nodes, event.currentTarget)}
                     data-testid={getTestIdForCat(nodes.metaInfo, key)}
                   >
+                    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
                     <div
                       class="fd-nested-list__content has-child"
                       on:keypress={event =>
@@ -978,6 +981,7 @@
                 />
               </button>
             {:else}
+              <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
               <i
                 class="lui-side-nav__footer--icon {isSemiCollapsed
                   ? 'sap-icon--open-command-field'
@@ -996,10 +1000,7 @@
   </nav>
 </div>
 
-<style type="text/scss">
-  @import 'src/styles/_mixins.scss';
-  @import 'src/styles/_variables.scss';
-
+<style lang="scss">
   $footerPaddingVertical: 13px;
   $footerHeight: calc(16px + (2 * #{$footerPaddingVertical}));
 
@@ -1282,10 +1283,8 @@
       }
     }
 
-    .isBlocked {
-      .lui-fd-side-nav-wrapper {
-        overflow: hidden !important;
-      }
+    :global(.isBlocked .lui-fd-side-nav-wrapper) {
+      overflow: hidden !important;
     }
 
     .lui-side-nav {
@@ -1405,13 +1404,11 @@
       overflow-y: auto;
     }
 
-    &.has-bottom-position {
-      .lui-flyout-sublist__wrapper {
-        &:before,
-        &:after {
-          top: auto;
-          bottom: 9px;
-        }
+    &:global(.has-bottom-position .lui-flyout-sublist__wrapper) {
+      &:before,
+      &:after {
+        top: auto;
+        bottom: 9px;
       }
     }
   }
diff --git a/core/src/navigation/LogoTitle.svelte b/core/src/navigation/LogoTitle.svelte
index 306e66e9ea..5cb1577d1d 100644
--- a/core/src/navigation/LogoTitle.svelte
+++ b/core/src/navigation/LogoTitle.svelte
@@ -193,6 +193,7 @@
     {/if}
   </a>
 {:else}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <span
     class="fd-shellbar__logo {!hasLogo
       ? 'fd-shellbar__logo--image-replaced'
@@ -224,6 +225,7 @@
         </span>
       </a>
     {:else}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <span
         class="fd-shellbar__title lui-shellbar-single-app-title"
         data-testid="luigi-topnav-title"
@@ -235,6 +237,7 @@
       </span>
     {/if}{:else}
     <div class="fd-popover">
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div class="fd-popover__control" on:click|stopPropagation={() => {}}>
         {#if addNavHrefForAnchor}
           {#if appSwitcherItems && appSwitcherItems.length === 1}
@@ -334,6 +337,7 @@
               {#each appSwitcherItems as item, index}
                 {#if GenericHelpers.isFunction(itemRenderer)}
                   {#if customItemRenderer__slotContainer}
+                    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
                     <li class="fd-menu__item" tabindex="0">
                       {@html renderCustomList(
                         item,
@@ -374,9 +378,7 @@
     <div class="fd-shellbar__subtitle">{$getTranslation(subTitle)}</div>
   {/if}{/if}
 
-<style type="text/scss">
-  @import 'src/styles/_variables.scss';
-
+<style lang="scss">
   // Force height because of base64 img src
   .lui-customlogo img {
     height: 24px;
diff --git a/core/src/navigation/MobileTopNavDropDown.svelte b/core/src/navigation/MobileTopNavDropDown.svelte
index 8b50dc81c2..9115680823 100644
--- a/core/src/navigation/MobileTopNavDropDown.svelte
+++ b/core/src/navigation/MobileTopNavDropDown.svelte
@@ -24,6 +24,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fd-dialog fd-dialog--active" on:click|stopPropagation={() => {}}>
   <div
     class="fd-dialog__content fd-dialog__content--mobile"
@@ -102,7 +103,7 @@
   </div>
 </div>
 
-<style type="text/scss">
+<style lang="scss">
   /* TODO remove after update to fundamental 0.9 */
   .fd-product-switch__item.selected .fd-product-switch__title:before,
   .fd-product-switch__item.selected .fd-product-switch__title:after {
diff --git a/core/src/navigation/ProductSwitcher.svelte b/core/src/navigation/ProductSwitcher.svelte
index cdf17fb04c..946b5b0305 100644
--- a/core/src/navigation/ProductSwitcher.svelte
+++ b/core/src/navigation/ProductSwitcher.svelte
@@ -99,6 +99,7 @@
     <div class="fd-shellbar__action fd-shellbar__action--desktop">
       <div class="fd-product-switch">
         <div class="fd-popover fd-popover--right">
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div class="fd-popover__control" on:click|stopPropagation={() => {}}>
             <button
               class="fd-button fd-button--transparent fd-shellbar__button fd-product-switch__control"
@@ -128,6 +129,7 @@
               <ul class="fd-product-switch__list">
                 {#each productSwitcherItems as productSwitcherItem}
                   {#if productSwitcherItem.label}
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <li
                       class="fd-product-switch__item {productSwitcherItem.selected
                         ? 'selected'
@@ -227,7 +229,7 @@
   {/if}
 {/if}
 
-<style type="text/scss">
+<style lang="scss">
   .lui-product-switch__icon {
     img {
       max-height: 24px;
diff --git a/core/src/navigation/StatusBadge.svelte b/core/src/navigation/StatusBadge.svelte
index 7b2713a79d..aedd64409f 100644
--- a/core/src/navigation/StatusBadge.svelte
+++ b/core/src/navigation/StatusBadge.svelte
@@ -13,7 +13,7 @@
   </span>
 {/if}
 
-<style type="text/scss">
+<style lang="scss">
   .fd-object-status {
     word-break: keep-all;
   }
diff --git a/core/src/navigation/TabNav.svelte b/core/src/navigation/TabNav.svelte
index 592181a58c..4f1726b8fc 100644
--- a/core/src/navigation/TabNav.svelte
+++ b/core/src/navigation/TabNav.svelte
@@ -320,6 +320,7 @@
                 {/if}
               {/each}
             {:else if nodes.filter((node) => !node.hideFromNav && node.label).length > 0}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
               <span
                 class="fd-tabs__item"
                 uid="{index}-0"
@@ -328,6 +329,7 @@
               >
                 <div class="fd-popover">
                   <div class="fd-popover__control">
+                    <!-- svelte-ignore a11y-missing-attribute -->
                     <a
                       class="fd-tabs__link has-child"
                       aria-expanded="false"
@@ -378,11 +380,13 @@
       </div>
 
       <div class="luigi-tabsMoreButton">
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <span
           class="fd-tabs__item"
           on:click={(event) => event.stopPropagation()}
         >
           <div class="fd-popover fd-popover--right">
+            <!-- svelte-ignore a11y-missing-attribute -->
             <a
               class="fd-tabs__link fd-popover__control has-child luigi__more"
               aria-expanded="false"
@@ -418,10 +422,12 @@
                     {/each}
                   {:else}
                     <li class="fd-nested-list__item" uid="{index}-0">
+                      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
                       <div
                         class="fd-nested-list__content has-child"
                         tabindex="0"
                       >
+                        <!-- svelte-ignore a11y-invalid-attribute -->
                         <a
                           href="javascript:void(null)"
                           tabindex="-1"
@@ -496,10 +502,7 @@
   </div>
 {/if}
 
-<style type="text/scss">
-  @import 'src/styles/_mixins.scss';
-  @import 'src/styles/_variables.scss';
-
+<style lang="scss">
   .tabsContainer {
     width: 100%;
   }
diff --git a/core/src/navigation/TopNav.svelte b/core/src/navigation/TopNav.svelte
index a7e74a05d1..56153dc477 100644
--- a/core/src/navigation/TopNav.svelte
+++ b/core/src/navigation/TopNav.svelte
@@ -49,14 +49,12 @@
   export let nodeForMobile;
   export let profileItemsAvailable;
   export let userInfo = {};
-  export let urlAuthError;
   export let globalSearchConfig;
   export let isGlobalSearchCentered;
   export let isSearchFieldVisible;
   export let inputElem;
   export let luigiCustomSearchRenderer__slot;
   export let displaySearchResult;
-  export let displayCustomSearchResult;
   export let searchResult;
   export let burgerTooltip;
   export let responsiveShellbarPadding;
@@ -316,6 +314,7 @@
 
 <svelte:window on:click={closeAllDropdowns} on:blur={closeAllDropdowns} />
 {#if showTopNav}
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div
     class="fd-shellbar {responsiveShellbarPadding
       ? 'fd-shellbar--responsive-paddings'
@@ -351,7 +350,6 @@
           on:handleSearchNavigation
           bind:searchResult
           bind:displaySearchResult
-          bind:displayCustomSearchResult
           bind:inputElem
           bind:luigiCustomSearchRenderer__slot
           on:closeSearchResult
@@ -369,7 +367,6 @@
             on:handleSearchNavigation
             bind:searchResult
             bind:displaySearchResult
-            bind:displayCustomSearchResult
             bind:inputElem
             bind:luigiCustomSearchRenderer__slot
             on:closeSearchResult
@@ -394,6 +391,7 @@
                     class="fd-shellbar__action fd-shellbar__action--hide fd-shellbar__action--desktop"
                   >
                     <div class="fd-popover fd-popover--right">
+                      <!-- svelte-ignore a11y-click-events-have-key-events -->
                       <div
                         class="fd-popover__control"
                         on:click|stopPropagation={() => {}}
@@ -492,6 +490,7 @@
           <div class="fd-shellbar__action fd-shellbar__action--mobile">
             <div class="fd-shellbar-collapse">
               <div class="fd-popover fd-popover--right">
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
                 <div
                   class="fd-popover__control"
                   on:click|stopPropagation={() => {}}
@@ -524,6 +523,8 @@
                     <ul class="fd-menu__list fd-menu__list--no-shadow">
                       {#if globalSearchConfig && !isGlobalSearchCentered}
                         <li class="fd-menu__item">
+                          <!-- svelte-ignore a11y-click-events-have-key-events -->
+                          <!-- svelte-ignore a11y-missing-attribute -->
                           <a
                             class="fd-menu__link"
                             on:click|stopPropagation={() => {
@@ -541,6 +542,8 @@
                       {/if}
                       {#if contextSwitcherConfig && (!authorizationEnabled || isLoggedIn)}
                         <li class="fd-menu__item">
+                          <!-- svelte-ignore a11y-click-events-have-key-events -->
+                          <!-- svelte-ignore a11y-missing-attribute -->
                           <a
                             class="fd-menu__link"
                             on:click|stopPropagation={openMobileContextSwitcher}
@@ -632,6 +635,8 @@
                       {/if}
                       {#if isProductSwitcherAvailable}
                         <li class="fd-menu__item">
+                          <!-- svelte-ignore a11y-click-events-have-key-events -->
+                          <!-- svelte-ignore a11y-missing-attribute -->
                           <a
                             class="fd-menu__link"
                             on:click|stopPropagation={openMobileProductSwitcher}
@@ -702,6 +707,7 @@
         >
           {#if profileTypeSettings === 'Fiori3' && GenericHelpers.requestExperimentalFeature('profileMenuFiori3', true)}
             <div class="fd-popover fd-popover--right fd-user-menu">
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
               <div
                 class="fd-popover__control"
                 on:click|stopPropagation={() => {}}
@@ -748,6 +754,7 @@
           {:else}
             <div class="fd-user-menu">
               <div class="fd-popover">
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
                 <div
                   class="fd-popover__control"
                   on:click|stopPropagation={() => {}}
@@ -818,8 +825,7 @@
   />
 {/if}
 
-<style type="text/scss">
-  @import 'src/styles/_variables.scss';
+<style lang="scss">
   /*Remove Safari bug with blue outlines of dropdowns in the shellbar*/
   .fd-shellbar:focus {
     outline: none;
@@ -855,13 +861,6 @@
     }
   }
 
-  img {
-    &.fd-top-nav__icon {
-      height: 16px;
-      min-width: auto;
-    }
-  }
-
   .fd-popover {
     .nav-icon {
       height: 2em;
diff --git a/core/svelte.config.cjs b/core/svelte.config.cjs
index 4674492853..7813cbe8e8 100644
--- a/core/svelte.config.cjs
+++ b/core/svelte.config.cjs
@@ -1,5 +1,10 @@
+const { resolve } = require('node:path');
+const { pathToFileURL } = require('node:url');
 const preprocess = require('svelte-preprocess');
 
+const variablePath = resolve(__dirname, 'src/styles', 'variables');
+const mixinPath = resolve(__dirname, 'src/styles', 'mixins');
+
 const config = {
   extensions: ['.svelte'],
   compilerOptions: {
@@ -8,7 +13,7 @@ const config = {
   preprocess: [
     preprocess({
       scss: {
-        prependData: '@use "src/variables.scss" as *;'
+        prependData: `@import "${pathToFileURL(variablePath)}", "${pathToFileURL(mixinPath)}";`
       }
     })
   ]