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 <[email protected]> Co-authored-by: Johannes Doberer <[email protected]>
SAP · Jan 26, 2024 · ef4d941 · ef4d941
1 parent 44f3578
commit ef4d941
Show file tree

Hide file tree

Showing 26 changed files with 116 additions and 107 deletions.
diff --git 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
@@ -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,22 +715,22 @@
   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;
     }
   };
 
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,19 +353,18 @@
           >
             <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={() =>
                       openEditor(userSettingsGroupProperty, event)}
                     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
@@ -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
@@ -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 {