From a5c01a4272228c4d863c7fa13b92f70b967415fe Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Mon, 5 Jun 2023 23:39:11 +0000
Subject: [PATCH] fix(a11y): set aria-expanded when open/closed

fix: ensure login pop-up renders inside window
---
 index.html                                        |  9 ++++++++-
 .../src/components/mgt-login/mgt-login.ts         | 14 ++++++++------
 .../sub-components/mgt-flyout/mgt-flyout.ts       | 15 ++++++++++++++-
 stories/components/login/login.stories.js         | 13 +++++++++++++
 4 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 47eedb67c9..a52f9d7a1b 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,11 @@
         font-family: var(--body-font);
         padding: 24px 12px;
       }
+      .right-align {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+      }
     </style>
   </head>
 
@@ -44,7 +49,9 @@
     <h1>Developer test page</h1>
     <main>
       <h2>mgt-login</h2>
-      <mgt-login login-view="compact"></mgt-login>
+      <div class="right-align">
+        <mgt-login login-view="compact"></mgt-login>
+      </div>
       <mgt-login></mgt-login>
       <h2>mgt-person me query two lines card on click with presence</h2>
       <!-- <mgt-person person-query="me" view="twoLines" person-card="click" show-presence></mgt-person> -->
diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.ts b/packages/mgt-components/src/components/mgt-login/mgt-login.ts
index 65b076c2db..d7ab6da90f 100644
--- a/packages/mgt-components/src/components/mgt-login/mgt-login.ts
+++ b/packages/mgt-components/src/components/mgt-login/mgt-login.ts
@@ -8,6 +8,7 @@
 import { CSSResult, html, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import {
   Providers,
   ProviderState,
@@ -166,7 +167,7 @@ export class MgtLogin extends MgtTemplatedComponent {
    * @private
    * @type {boolean}
    */
-  @property({ attribute: false }) private _isFlyoutOpen: boolean;
+  @state() private _isFlyoutOpen: boolean;
 
   /**
    * The image blob string
@@ -319,13 +320,14 @@ export class MgtLogin extends MgtTemplatedComponent {
       small: this.loginView === 'avatar'
     });
     const appearance = isSignedIn ? 'stealth' : 'neutral';
-    const buttonContentTemplate =
-      isSignedIn && this.userDetails
-        ? this.renderSignedInButtonContent(this.userDetails, this._image)
-        : this.renderSignedOutButtonContent();
-
+    const showSignedInState = isSignedIn && this.userDetails;
+    const buttonContentTemplate = showSignedInState
+      ? this.renderSignedInButtonContent(this.userDetails, this._image)
+      : this.renderSignedOutButtonContent();
+    const expandedState: boolean | undefined = showSignedInState ? this._isFlyoutOpen : undefined;
     return html`
       <fluent-button
+        aria-expanded="${ifDefined(expandedState)}"
         appearance=${appearance}
         aria-label=${ariaLabel}
         ?disabled=${this.isLoadingState}
diff --git a/packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts b/packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts
index d295e2ca64..120b3b8c6f 100644
--- a/packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts
+++ b/packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts
@@ -244,7 +244,17 @@ export class MgtFlyout extends MgtBaseComponent {
     `;
   }
 
-  private updateFlyout() {
+  /**
+   * Updates the position of the flyout.
+   * Makes a second recursive call to ensure the flyout is positioned correctly.
+   * This is needed as the width of the flyout is not settled until afer the first render.
+   *
+   * @private
+   * @param {boolean} [firstPass=true]
+   * @return {*}
+   * @memberof MgtFlyout
+   */
+  private updateFlyout(firstPass = true) {
     if (!this.isOpen) {
       return;
     }
@@ -414,6 +424,9 @@ export class MgtFlyout extends MgtBaseComponent {
         flyout.style.maxHeight = null;
         flyout.style.setProperty('--mgt-flyout-set-height', 'unset');
       }
+      if (firstPass) {
+        window.requestAnimationFrame(() => this.updateFlyout(false));
+      }
     }
   }
 
diff --git a/stories/components/login/login.stories.js b/stories/components/login/login.stories.js
index ea9ecc01aa..6551a5ef10 100644
--- a/stories/components/login/login.stories.js
+++ b/stories/components/login/login.stories.js
@@ -37,6 +37,19 @@ export const ShowPresenceLogin = () => html`
   <mgt-login show-presence login-view="full"></mgt-login>
 `;
 
+export const RightAligned = () => html`
+<div class="right">
+    <mgt-login login-view="compact"></mgt-login>
+</div>
+<style>
+.right {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+</style>
+`;
+
 export const Templates = () => html`
   <mgt-login>
     <template data-type="signed-out-button-content">