fix: dismiss login flyout when moving out of the popup

packages/mgt-components/src/components/mgt-login/mgt-login.ts

@@ -351,14 +351,47 @@ export class MgtLogin extends MgtTemplatedComponent {
         light-dismiss
         @opened=${this.flyoutOpened}
         @closed=${this.flyoutClosed}>
-        <div slot="flyout">
-          <fluent-card class="flyout-card">
-            ${this.renderFlyoutContent()}
-          </fluent-card>
-        </div>
+        <fluent-card 
+          slot="flyout" 
+          tabindex="0" 
+          class="flyout-card"
+          @keydown=${this.onUserKeyDown}
+          >
+          ${this.renderFlyoutContent()}
+        </fluent-card>
       </mgt-flyout>`;
   }
 
+  /**
+   * Tracks tabbing through the flyout (keydown)
+   */
+  private readonly onUserKeyDown = (e: KeyboardEvent): void => {
+    if (!this.flyout.isOpen) {
+      return;
+    }
+
+    const el = this.renderRoot.querySelector('.popup-content');
+    const focusableEls = el.querySelectorAll('ul, fluent-button');
+    const firstFocusableEl = el.querySelector('#signout-button') || focusableEls[0];
+    const lastFocusableEl =
+      el.querySelector('#signin-different-account-button') || focusableEls[focusableEls.length - 1];
+
+    if (e.key === 'Tab' && e.shiftKey && firstFocusableEl === e.target) {
+      e.preventDefault();
+      (lastFocusableEl as HTMLElement)?.focus();
+    }
+    if (e.key === 'Tab' && lastFocusableEl === e.target) {
+      if (e.shiftKey) {
+        e.preventDefault();
+        const focusableArrs = Array.from(focusableEls);
+        window.setTimeout(() => (focusableEls[focusableArrs.indexOf(lastFocusableEl) - 1] as HTMLElement)?.focus(), 0);
+      } else {
+        e.preventDefault();
+        (firstFocusableEl as HTMLElement)?.focus();
+      }
+    }
+  };
+
   /**
    * Render the flyout menu content.
    *
@@ -435,6 +468,7 @@ export class MgtLogin extends MgtTemplatedComponent {
       template ||
       html`
         <fluent-button
+          id="signout-button"
           appearance="stealth"
           size="medium"
           class="flyout-command"
@@ -472,6 +506,7 @@ export class MgtLogin extends MgtTemplatedComponent {
       return html`
         <div class="add-account">
           <fluent-button
+            id="signin-different-account-button"
             appearance="stealth"
             aria-label="${this.strings.signInWithADifferentAccount}"
             @click=${() => void this.login()}>