fix issues with focus, refactor main logic and add inverse screenshots

src/__screenshot_tests__/navigation-bar-screenshot-test.tsx

@@ -216,3 +216,15 @@ test.each(['default', 'custom'])('MainNavigationBar with menu and %s content in
     await page.click(await screen.findByRole('button', {name: 'Cerrar menú de navegación'}));
     expect(await page.screenshot()).toMatchImageSnapshot();
 });
+
+test.each(['large', 'small'])('MainNavigationBar inverse with %s menu in DESKTOP', async (menuType) => {
+    const page = await openStoryPage({
+        id: 'components-navigation-bars-mainnavigationbar--default',
+        device: 'DESKTOP',
+        args: {sections: true, desktopSmallMenu: menuType === 'small', menu: 'default', variant: 'inverse'},
+    });
+
+    // first section opened
+    await page.click(await screen.findByRole('button', {name: 'Start'}));
+    expect(await page.screenshot()).toMatchImageSnapshot();
+});

src/__tests__/main-navigation-bar-test.tsx

@@ -73,6 +73,9 @@ test('MainNavigationBar section with interaction is accessible', async () => {
     expect(screen.getByRole('link', {name: /item 1-3/})).toBeInTheDocument();
     expect(screen.queryByRole('button', {name: 'item 2-1'})).not.toBeInTheDocument();
 
+    // Remove mouse hover from section in order to close the menu
+    await userEvent.unhover(firstSectionButton);
+
     // Section onPress shouldn't have been called
     expect(firstSectionOnPressSpy).toHaveBeenCalledTimes(0);
 
@@ -87,7 +90,7 @@ test('MainNavigationBar section with interaction is accessible', async () => {
     });
 
     // Open second section's menu
-    await userEvent.click(secondSectionButton);
+    await userEvent.hover(secondSectionButton);
     expect(firstSectionMenuButton).toHaveAttribute('aria-expanded', 'false');
     expect(secondSectionButton).toHaveAttribute('aria-expanded', 'true');
 
@@ -98,18 +101,22 @@ test('MainNavigationBar section with interaction is accessible', async () => {
     // Close the menu with ESC key
     await userEvent.keyboard('{Escape}');
 
-    await waitFor(() => {
-        expect(firstSectionMenuButton).toHaveAttribute('aria-expanded', 'false');
-        expect(secondSectionButton).toHaveAttribute('aria-expanded', 'false');
-    });
-
-    // Buttons that open the menu should have aria-haspopup
-    expect(firstSectionMenuButton).toHaveAttribute('aria-haspopup', 'true');
-    expect(secondSectionButton).toHaveAttribute('aria-haspopup', 'true');
-
-    // Menu is closed, no section should be visible
-    expect(screen.queryByRole('button', {name: 'item 1-1'})).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', {name: 'item 2-1'})).not.toBeInTheDocument();
+    await waitFor(
+        () => {
+            expect(firstSectionMenuButton).toHaveAttribute('aria-expanded', 'false');
+            expect(secondSectionButton).toHaveAttribute('aria-expanded', 'false');
+
+            // Buttons that open the menu should have aria-haspopup
+            expect(firstSectionMenuButton).toHaveAttribute('aria-haspopup', 'true');
+            expect(secondSectionButton).toHaveAttribute('aria-haspopup', 'true');
+
+            // Menu is closed, no section should be visible
+            expect(screen.queryByRole('button', {name: 'item 1-1'})).not.toBeInTheDocument();
+            expect(screen.queryByRole('button', {name: 'item 2-1'})).not.toBeInTheDocument();
+        },
+        // queryByRole takes longer to execute
+        {timeout: 2000}
+    );
 });
 
 test('MainNavigationBar menu closeMenu callback closes the menu', async () => {
@@ -132,15 +139,19 @@ test('MainNavigationBar menu closeMenu callback closes the menu', async () => {
 
     // Open the menu
     const sectionButton = await screen.findByRole('button', {name: 'section 1, Abrir submenú'});
-    await userEvent.click(sectionButton);
+    await userEvent.hover(sectionButton);
     expect(sectionButton).toHaveAttribute('aria-expanded', 'true');
 
     // Close the menu with the closeMenu callback
     const closeButton = await screen.findByRole('button', {name: 'Close menu'});
     await userEvent.click(closeButton);
 
-    await waitFor(() => {
-        expect(sectionButton).toHaveAttribute('aria-expanded', 'false');
-        expect(screen.queryByRole('button', {name: 'Close menu'})).not.toBeInTheDocument();
-    });
+    await waitFor(
+        () => {
+            expect(sectionButton).toHaveAttribute('aria-expanded', 'false');
+            expect(screen.queryByRole('button', {name: 'Close menu'})).not.toBeInTheDocument();
+        },
+        // queryByRole takes longer to execute
+        {timeout: 2000}
+    );
 });

src/navigation-bar.css.ts

@@ -398,9 +398,28 @@ export const desktopMenuWrapper = sprinkles({
 });
 
 export const desktopMenuContainer = style([
+    sprinkles({
+        position: 'fixed',
+        left: 0,
+        right: 0,
+    }),
+    {
+        zIndex: NAVBAR_ZINDEX,
+        transition: `height ${DESKTOP_MENU_ANIMATION_DURATION_MS}ms cubic-bezier(0.65, 0, 0.35, 1)`,
+        '@media': {
+            ['(prefers-reduced-motion)']: {
+                transition: 'none',
+            },
+        },
+    },
+]);
+
+export const desktopMenuBackgroundContainer = style([
     sprinkles({
         background: vars.colors.backgroundContainer,
-        width: '100%',
+        position: 'absolute',
+        left: 0,
+        right: 0,
     }),
     {
         transition: `height ${DESKTOP_MENU_ANIMATION_DURATION_MS}ms cubic-bezier(0.65, 0, 0.35, 1)`,