fix: mouse/keyboard interactions of menu/menu-item (#2747)

## Description:
Closes #2372. 
Previously this PR:
#2658

The problem is related to activation of focus-visible. 

When we click the dropdown menu with the mouse, the focus is put on the
menu-item correctly with "focus", however, the focus-visible that puts
the border around the item is not activated. This property only
activates after a keyboard event. So for example in Safari, if you do
"arrowdown" and then click "arrowright" (or any other key we are not
catching), the outline suddenly appears because an event key was
propagated.

My solution was to force this css to appear, and also remove it when not
needed. Please let me know if you know a better way to handle this.

## Definition of Reviewable:
- [x] Stories (features, a11y) are created/updated
- [X] relevant tickets are linked

Author: martascorreia

.changeset/shiny-coins-lay.md

@@ -0,0 +1,5 @@
+---
+'@solid-design-system/components': minor
+---
+
+Fixed `sd-menu` keyboard interaction issue after enabling it with a mouse click.

packages/components/src/components/dropdown/dropdown.test.ts

@@ -2,6 +2,7 @@ import '../../../dist/solid-components';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import { sendKeys, sendMouse } from '@web/test-runner-commands';
 import sinon from 'sinon';
+import type { SdButton, SdMenu, SdMenuItem } from 'src/solid-components';
 import type SdDropdown from './dropdown';
 
 describe('<sd-dropdown>', () => {
@@ -361,6 +362,81 @@ describe('<sd-dropdown>', () => {
     });
   }
 
+  it('adds focus to the first menu item when opened via keyboard', async () => {
+    const el = await fixture<SdDropdown>(html`
+      <sd-dropdown distance="4" rounded>
+        <sd-button variant="secondary" slot="trigger">
+          Menu
+          <sd-icon library="_internal" name="chevron-down" slot="icon-right"></sd-icon>
+        </sd-button>
+
+        <sd-menu>
+          <sd-menu-item>Menu item 1</sd-menu-item>
+          <sd-menu-item>Menu item 2</sd-menu-item>
+          <sd-menu-item>Menu item 3</sd-menu-item>
+        </sd-menu>
+      </sd-dropdown>
+    `);
+
+    const button = el.querySelector<SdButton>('sd-button')!;
+    const menu = el.querySelector<SdMenu>('sd-menu')!;
+    const items = menu.querySelectorAll<SdMenuItem>('sd-menu-item');
+    const firstItem = items[0];
+
+    // click button to open dropdown
+    button.focus();
+    button.click();
+    await el.updateComplete;
+
+    // navigate down
+    await sendKeys({ press: 'ArrowDown' });
+    await firstItem.updateComplete;
+
+    expect(firstItem.classList.contains('menu-item-focus')).to.be.true;
+  });
+
+  it('removes focus from menu items when clicking outside the dropdown', async () => {
+    const el = await fixture<SdDropdown>(html`
+      <sd-dropdown distance="4" rounded>
+        <sd-button variant="secondary" slot="trigger">
+          Menu
+          <sd-icon library="_internal" name="chevron-down" slot="icon-right"></sd-icon>
+        </sd-button>
+
+        <sd-menu>
+          <sd-menu-item>Menu item 1</sd-menu-item>
+          <sd-menu-item>Menu item 2</sd-menu-item>
+          <sd-menu-item>Menu item 3</sd-menu-item>
+        </sd-menu>
+      </sd-dropdown>
+    `);
+
+    const button = el.querySelector<SdButton>('sd-button')!;
+    const menu = el.querySelector<SdMenu>('sd-menu')!;
+    const items = menu.querySelectorAll<SdMenuItem>('sd-menu-item');
+    const firstItem = items[0];
+
+    // click button to open dropdown
+    button.focus();
+    button.click();
+    await el.updateComplete;
+
+    // navigate down
+    await sendKeys({ press: 'ArrowDown' });
+    await firstItem.updateComplete;
+
+    expect(firstItem.classList.contains('menu-item-focus')).to.be.true;
+
+    // click outside
+    document.body.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
+    await el.updateComplete;
+
+    // check all menu items have lost focus
+    items.forEach(item => {
+      expect(item.classList.contains('menu-item-focus')).to.be.false;
+    });
+  });
+
   // it('should close and stop propagating the keydown event when Escape is pressed and the dropdown is open ', async () => {
   //   const el = await fixture<SdDropdown>(html`
   //     <sd-dropdown open>

packages/components/src/components/dropdown/dropdown.ts

@@ -269,6 +269,12 @@ export default class SdDropdown extends SolidElement {
 
   handleTriggerClick() {
     if (this.open) {
+      const menu = this.getMenu();
+      if (menu) {
+        const current = menu.getCurrentItem();
+        current?.classList.remove('menu-item-focus');
+      }
+
       this.hide();
     } else {
       this.show();
@@ -280,7 +286,7 @@ export default class SdDropdown extends SolidElement {
     if (event.key === 'Escape' && this.open) {
       event.stopPropagation();
       this.focusOnTrigger();
-      this.hide();
+      this.handleTriggerClick();
       return;
     }
 
@@ -316,11 +322,13 @@ export default class SdDropdown extends SolidElement {
             if (event.key === 'ArrowDown' || event.key === 'Home') {
               menu.setCurrentItem(firstMenuItem);
               firstMenuItem.focus();
+              firstMenuItem.classList.add('menu-item-focus');
             }
 
             if (event.key === 'ArrowUp' || event.key === 'End') {
               menu.setCurrentItem(lastMenuItem);
               lastMenuItem.focus();
+              lastMenuItem.classList.add('menu-item-focus');
             }
           });
         }

packages/components/src/components/menu-item/menu-item.ts

@@ -229,6 +229,10 @@ export default class SdMenuItem extends SolidElement {
         @apply focus-outline outline-offset-[-2px];
       }
 
+      :host(.menu-item-focus) [part='base'] {
+        @apply focus-outline outline-offset-[-2px];
+      }
+
       :host(:hover) [part='base'] {
         @apply outline-none;
       }

packages/components/src/components/menu/menu.ts

@@ -34,8 +34,21 @@ export default class SdMenu extends SolidElement {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'menu');
+
+    document.addEventListener('click', this.handleOutsideClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this.handleOutsideClick);
   }
 
+  private handleOutsideClick = (event: MouseEvent) => {
+    if (!this.contains(event.target as Node)) {
+      this.getAllItems().forEach(item => item.classList.remove('menu-item-focus'));
+    }
+  };
+
   private handleClick(event: MouseEvent) {
     const menuItemTypes = ['menuitem', 'menuitemcheckbox'];
 
@@ -61,12 +74,20 @@ export default class SdMenu extends SolidElement {
   }
 
   private handleKeyDown(event: KeyboardEvent) {
+    // Remove focus css class on escape
+    if (event.key === 'Escape') {
+      const item = this.getCurrentItem();
+      item?.classList.remove('menu-item-focus');
+    }
+
     // Make a selection when pressing enter or space
-    if (event.key === 'Enter' || event.key === ' ') {
+    else if (event.key === 'Enter' || event.key === ' ') {
       const item = this.getCurrentItem();
       event.preventDefault();
       event.stopPropagation();
 
+      item?.classList.remove('menu-item-focus');
+
       // Simulate a click to support @click handlers on menu items that also work with the keyboard
       item?.click();
     }
@@ -76,6 +97,7 @@ export default class SdMenu extends SolidElement {
       const items = this.getAllItems();
       const activeItem = this.getCurrentItem();
       let index = activeItem ? items.indexOf(activeItem) : 0;
+      activeItem?.classList.remove('menu-item-focus');
 
       if (items.length > 0) {
         event.preventDefault();
@@ -110,6 +132,7 @@ export default class SdMenu extends SolidElement {
 
         this.setCurrentItem(items[index]);
         items[index].focus();
+        items[index].classList.add('menu-item-focus');
       }
     }
   }