From 59362c27ec4238f04e03320e430b59d97af78a48 Mon Sep 17 00:00:00 2001
From: Johannes Doberer <johannes.doberer@sap.com>
Date: Mon, 17 Feb 2025 14:25:47 +0100
Subject: [PATCH] Accessibility tab order (#4140)

---
 core/src/App.svelte                           | 56 ++++++-------
 .../examples/microfrontends/multipurpose.html | 14 +++-
 .../0-js-test-app/js-test-app-a11y.cy.js      | 80 ++++++++++---------
 .../js-test-app-btp-layout.cy.js              | 48 +++++++++--
 .../tests/0-js-test-app/js-test-app-layout.js | 37 +++++++++
 5 files changed, 160 insertions(+), 75 deletions(-)
 create mode 100644 test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-layout.js
diff --git a/core/src/App.svelte b/core/src/App.svelte
index b86efdd066..d8db1f3f88 100644
--- a/core/src/App.svelte
+++ b/core/src/App.svelte
@@ -1954,6 +1954,33 @@
       </div>
     </div>
   {:else}
+    {#if !isHeaderDisabled}
+      <TopNav
+        hideSearchComponent={hideGlobalSearch}
+        pathData={navigationPath}
+        {pathParams}
+        on:handleClick={handleNavClick}
+        on:resizeTabNav={onResizeTabNav}
+        on:toggleSearch={toggleSearch}
+        on:closeSearchResult={closeSearchResult}
+        on:handleSearchNavigation={handleSearchNavigation}
+        bind:isSearchFieldVisible
+        bind:displaySearchResult
+        bind:searchResult
+        bind:inputElem
+        bind:customSearchItemRendererSlot
+        {burgerTooltip}
+      />
+    {/if}
+    {#if !(hideNav || hideSideNav)}
+      <LeftNav
+        pathData={navigationPath}
+        {pathParams}
+        on:handleClick={handleNavClick}
+        on:resizeTabNav={onResizeTabNav}
+        {burgerTooltip}
+      />
+    {/if}
     <Backdrop disable={disableBackdrop}>
       <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <div
@@ -1992,39 +2019,14 @@
         </div>
       </div>
     {/if}
-    {#if !isHeaderDisabled}
-      <TopNav
-        hideSearchComponent={hideGlobalSearch}
-        pathData={navigationPath}
-        {pathParams}
-        on:handleClick={handleNavClick}
-        on:resizeTabNav={onResizeTabNav}
-        on:toggleSearch={toggleSearch}
-        on:closeSearchResult={closeSearchResult}
-        on:handleSearchNavigation={handleSearchNavigation}
-        bind:isSearchFieldVisible
-        bind:displaySearchResult
-        bind:searchResult
-        bind:inputElem
-        bind:customSearchItemRendererSlot
-        {burgerTooltip}
-      />
-    {/if}
+
     {#if !hideNav}
       <GlobalNav pathData={navigationPath} {pathParams} on:handleClick={handleNavClick} />
       {#if breadcrumbsEnabled}
         <Breadcrumb pathData={navigationPath} {pathParams} on:handleClick={handleNavClick} />
       {/if}
     {/if}
-    {#if !(hideNav || hideSideNav)}
-      <LeftNav
-        pathData={navigationPath}
-        {pathParams}
-        on:handleClick={handleNavClick}
-        on:resizeTabNav={onResizeTabNav}
-        {burgerTooltip}
-      />
-    {/if}
+
     {#if tabNav && !hideNav}
       <TabNav pathData={navigationPath} {pathParams} on:handleClick={handleNavClick} {resizeTabNavToggle} />
     {/if}
diff --git a/test/e2e-js-test-application/public/examples/microfrontends/multipurpose.html b/test/e2e-js-test-application/public/examples/microfrontends/multipurpose.html
index e45afbae3b..2a04ec88d7 100644
--- a/test/e2e-js-test-application/public/examples/microfrontends/multipurpose.html
+++ b/test/e2e-js-test-application/public/examples/microfrontends/multipurpose.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title></title>
@@ -40,7 +40,7 @@
     </style>
   </head>
 
-  <body style="-webkit-font-smoothing: antialiased;">
+  <body style="-webkit-font-smoothing: antialiased">
     <div id="routeCnt"></div>
     <div id="imgCnt"></div>
     <div id="textCnt">
@@ -63,6 +63,12 @@ <h1 id="title">Multi purpose demo page</h1>
       >
         Open <code>/home/one</code> as split view
       </button>
+      <button class="addBackdrop" onclick="LuigiClient.uxManager().addBackdrop()">
+        add backdrop
+      </button>
+      <button class="removeBackdrop" onclick="LuigiClient.uxManager().removeBackdrop()">
+        remove backdrop
+      </button>
     </div>
 
     <script>
@@ -115,14 +121,14 @@ <h1 id="title">Multi purpose demo page</h1>
       function vgDataUpdate() {
         LuigiClient.setViewGroupData({
           foo: 'Luigi rocks',
-          bar: '(' + Math.round(Math.random() * 100) + ')'
+          bar: '(' + Math.round(Math.random() * 100) + ')',
         });
       }
       LuigiClient.addInitListener(updateFn);
       LuigiClient.addContextUpdateListener(updateFn);
 
       // fallback visibility if no initlistener called for 3 seconds
-      setTimeout(function() {
+      setTimeout(function () {
         document.getElementById('textCnt').classList.add('visible');
       }, 3000);
 
diff --git a/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-a11y.cy.js b/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-a11y.cy.js
index 3f94cadf53..3bc0b7395a 100644
--- a/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-a11y.cy.js
+++ b/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-a11y.cy.js
@@ -87,16 +87,11 @@ describe('JS-TEST-APP 4', () => {
       cy.visitTestAppLoggedIn('/', newConfig);
       cy.get('[data-testid="luigi-topnav-profile-btn"]').click();
       cy.get('[data-testid="settings-link"]').should('exist');
-      cy.get('[data-testid="settings-link"]')
-        .contains('Settings')
-        .click();
+      cy.get('[data-testid="settings-link"]').contains('Settings').click();
       cy.get('body').tab();
       cy.tab();
       cy.tab();
-      cy.get('.lui-us-navlist__item .fd-list__title')
-        .contains('Language & Region')
-        .focused()
-        .type('{enter}');
+      cy.get('.lui-us-navlist__item .fd-list__title').contains('Language & Region').focused().type('{enter}');
       cy.tab();
       cy.tab();
       cy.get('[data-testid="lui-us-enum-0"]').click(); //workaround; Does not work with 'enter' or 'space'
@@ -155,37 +150,19 @@ describe('JS-TEST-APP 4', () => {
     it('Left nav a11y', () => {
       cy.visitTestApp('/home', newConfig);
 
-      cy.get('.fd-navigation.fd-navigation--vertical')
-        .contains('Section one')
-        .click();
-      cy.get('.fd-navigation__list-item.lui-nav-entry')
-        .contains('Node 1')
-        .should('not.be.visible');
+      cy.get('.fd-navigation.fd-navigation--vertical').contains('Section one').click();
+      cy.get('.fd-navigation__list-item.lui-nav-entry').contains('Node 1').should('not.be.visible');
       cy.tab();
       cy.tab();
-      cy.get('.fd-navigation__list-item.lui-nav-entry')
-        .contains('My Cat')
-        .should('be.focused');
-      cy.get('.fd-navigation__list-item.lui-nav-entry')
-        .contains('My Cat')
-        .focused()
-        .type('{enter}');
-      cy.get('.fd-navigation__list-item.lui-nav-entry')
-        .contains('Node 1')
-        .should('be.visible');
+      cy.get('.fd-navigation__list-item.lui-nav-entry').contains('My Cat').should('be.focused');
+      cy.get('.fd-navigation__list-item.lui-nav-entry').contains('My Cat').focused().type('{enter}');
+      cy.get('.fd-navigation__list-item.lui-nav-entry').contains('Node 1').should('be.visible');
       cy.tab();
-      cy.get('.fd-navigation__list-item.lui-nav-entry')
-        .contains('Node 1')
-        .should('be.focused');
-      cy.get('.fd-navigation__list-item.lui-nav-entry')
-        .contains('Node 1')
-        .click();
-      cy.getIframeBody({}, 0, '.iframeContainer').then(result => {
+      cy.get('.fd-navigation__list-item.lui-nav-entry').contains('Node 1').should('be.focused');
+      cy.get('.fd-navigation__list-item.lui-nav-entry').contains('Node 1').click();
+      cy.getIframeBody({}, 0, '.iframeContainer').then((result) => {
         $iframeBody = result;
-        cy.wrap($iframeBody)
-          .find('#content')
-          .contains('Content of node 1')
-          .should('be.visible');
+        cy.wrap($iframeBody).find('#content').contains('Content of node 1').should('be.visible');
       });
     });
     it('More Btn in left nav', () => {
@@ -202,12 +179,41 @@ describe('JS-TEST-APP 4', () => {
       cy.get('.lui-nav-more .fd-navigation__link').should('not.have.focus');
       cy.tab();
       cy.get('.lui-nav-more .fd-navigation__link').should('have.focus');
-      cy.get('.lui-nav-more .fd-navigation__link')
-        .focused()
-        .type('{enter}');
+      cy.get('.lui-nav-more .fd-navigation__link').focused().type('{enter}');
       cy.get('.fd-navigation__list-container.fd-navigation__list-container--menu').should('be.visible');
       cy.tab();
       cy.get('.lui-moreItems .fd-navigation__list-item.lui-nav-entry .fd-navigation__link').should('have.focus');
     });
   });
+
+  describe('Shellbar logo gets focused first', () => {
+    let newConfig;
+    beforeEach(() => {
+      newConfig = structuredClone(defaultLuigiConfig);
+      newConfig.navigation.addNavHrefs = true;
+    });
+    it('Shellbar logo gets focused first', () => {
+      cy.visitTestApp('/home', newConfig);
+      cy.window().then((win) => {
+        win.focus();
+      });
+      cy.get('body').click();
+      cy.tab();
+      cy.get('.fd-shellbar__logo').should('have.focus');
+    });
+    it('Shellbar logo gets focused first with btpLayout', () => {
+      newConfig.settings.btpToolLayout = true;
+      newConfig.settings.experimental = {
+        btpToolLayout: true
+      };
+      cy.visitTestApp('/home', newConfig);
+      cy.window().then((win) => {
+        win.focus();
+      });
+      cy.get('body').click();
+      cy.tab();
+      cy.tab();
+      cy.get('.fd-shellbar__logo').should('have.focus');
+    });
+  });
 });
diff --git a/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-btp-layout.cy.js b/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-btp-layout.cy.js
index 62d1d5c8d3..f5694a99b7 100644
--- a/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-btp-layout.cy.js
+++ b/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-btp-layout.cy.js
@@ -20,21 +20,19 @@ describe('JS-TEST-APP with BTP layout', () => {
       it('renders the split view separator and dragger with the correct width', () => {
         cy.visitTestApp('/home', newConfig);
         cy.get('#app[configversion="split-view"]');
-        cy.getIframeBody().then($iframeBody => {
-          cy.wrap($iframeBody)
-            .find('button.openSplitView')
-            .click();
+        cy.getIframeBody().then(($iframeBody) => {
+          cy.wrap($iframeBody).find('button.openSplitView').click();
         });
 
         cy.get('div.fd-page.iframeContainer')
           .invoke('width')
-          .then(iframeContainerWidth => {
+          .then((iframeContainerWidth) => {
             cy.get('div#splitViewContainer')
               .invoke('width')
-              .then(splitViewContainerWidth => {
+              .then((splitViewContainerWidth) => {
                 cy.get('div#splitViewDragger')
                   .invoke('width')
-                  .then(splitViewDraggerWidth => {
+                  .then((splitViewDraggerWidth) => {
                     expect(iframeContainerWidth).to.equal(splitViewContainerWidth);
                     expect(iframeContainerWidth).to.equal(splitViewDraggerWidth);
                   });
@@ -43,4 +41,40 @@ describe('JS-TEST-APP with BTP layout', () => {
       });
     });
   });
+
+  describe('addBackdrop, removeBackdrop btpLayout', () => {
+    let newConfig;
+    beforeEach(() => {
+      newConfig = structuredClone(defaultLuigiConfig);
+      newConfig.tag = 'addBackdrop';
+    });
+    it('addBackDrop, removeBackdrop', () => {
+      let $iframeBody;
+      cy.visitTestApp('/home/one', newConfig);
+      cy.get('#app[configversion="addBackdrop"]');
+      cy.get('.lui-backdrop').should('not.exist');
+      cy.getIframeBody({}, 0, '.iframeContainer').then((result) => {
+        $iframeBody = result;
+        cy.wrap($iframeBody).find('.addBackdrop').contains('add backdrop').click();
+      });
+      cy.get('.lui-backdrop').should('exist');
+      cy.get('[data-testid="home_home"]').then(($btn) => {
+        cy.get('.lui-backdrop').then(($overlay) => {
+          const btnRect = $btn[0].getBoundingClientRect();
+          const overlayRect = $overlay[0].getBoundingClientRect();
+
+          expect(overlayRect.top).to.be.at.most(btnRect.top);
+          expect(overlayRect.left).to.be.at.most(btnRect.left);
+          expect(overlayRect.bottom).to.be.at.least(btnRect.bottom);
+          expect(overlayRect.right).to.be.at.least(btnRect.right);
+        });
+      });
+
+      cy.getIframeBody({}, 0, '.iframeContainer').then((result) => {
+        $iframeBody = result;
+        cy.wrap($iframeBody).find('.removeBackdrop').contains('remove backdrop').click();
+      });
+      cy.get('.lui-backdrop').should('not.exist');
+    });
+  });
 });
diff --git a/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-layout.js b/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-layout.js
new file mode 100644
index 0000000000..847ed06750
--- /dev/null
+++ b/test/e2e-test-application/cypress/e2e/tests/0-js-test-app/js-test-app-layout.js
@@ -0,0 +1,37 @@
+import defaultLuigiConfig from '../../configs/default';
+
+describe('addBackdrop, removeBackdrop', () => {
+  let newConfig;
+  beforeEach(() => {
+    newConfig = structuredClone(defaultLuigiConfig);
+    newConfig.tag = 'addBackdrop';
+  });
+  it('addBackDrop', () => {
+    let $iframeBody;
+    cy.visitTestApp('/home/one', newConfig);
+    cy.get('#app[configversion="addBackdrop"]');
+    cy.get('.lui-backdrop').should('not.exist');
+    cy.getIframeBody({}, 0, '.iframeContainer').then((result) => {
+      $iframeBody = result;
+      cy.wrap($iframeBody).find('.addBackdrop').contains('add backdrop').click();
+    });
+    cy.get('.lui-backdrop').should('exist');
+    cy.get('[data-testid="home_home"]').then(($btn) => {
+      cy.get('.lui-backdrop').then(($overlay) => {
+        const btnRect = $btn[0].getBoundingClientRect();
+        const overlayRect = $overlay[0].getBoundingClientRect();
+
+        expect(overlayRect.top).to.be.at.most(btnRect.top);
+        expect(overlayRect.left).to.be.at.most(btnRect.left);
+        expect(overlayRect.bottom).to.be.at.least(btnRect.bottom);
+        expect(overlayRect.right).to.be.at.least(btnRect.right);
+      });
+    });
+
+    cy.getIframeBody({}, 0, '.iframeContainer').then((result) => {
+      $iframeBody = result;
+      cy.wrap($iframeBody).find('.removeBackdrop').contains('remove backdrop').click();
+    });
+    cy.get('.lui-backdrop').should('not.exist');
+  });
+});
