fix(a11y): set aria-expanded for mgt-login when open/closed

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> -->

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}

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));
+      }
     }
   }
 

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">