fix: update tabbing behavior on person when closing person-card (#3193)

* fix tab behavior on person with person-card interaction * fix keyboard focus on person-card * Update packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts * Update packages/mgt-components/src/components/mgt-person/mgt-person.ts Co-authored-by: Musale Martin <martinmusale@microsoft.com> --------- Co-authored-by: Musale Martin <martinmusale@microsoft.com>
microsoftgraph · Jun 10, 2024 · 6a93c6e · 6a93c6e
1 parent 97fe1c0
commit 6a93c6e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 30 deletions.
diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
@@ -593,7 +593,6 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
   protected renderPerson(): TemplateResult {
     return mgtHtml`
       <mgt-person
-        tabindex="0"
         class="person-image"
         .personDetails=${this.internalPersonDetails}
         .personImage=${this.getImage()}

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -30,6 +30,7 @@ import { AvatarSize, IDynamicPerson, ViewType, viewTypeConverter } from '../../g
 import '../../styles/style-helper';
 import { registerFluentComponents } from '../../utils/FluentComponents';
 import { SvgIcon, getSvg } from '../../utils/SvgHelper';
+import { debounce } from '../../utils/Utils';
 import { IExpandable, IHistoryClearer } from '../mgt-person-card/types';
 import '../sub-components/mgt-flyout/mgt-flyout';
 import { MgtFlyout, registerMgtFlyoutComponent } from '../sub-components/mgt-flyout/mgt-flyout';
@@ -506,6 +507,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
 
   private _mouseLeaveTimeout = -1;
   private _mouseEnterTimeout = -1;
+  private _keyBoardFocus: { (): void; (): void };
 
   constructor() {
     super();
@@ -1345,10 +1347,27 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
   };
 
   private readonly handleKeyDown = (e: KeyboardEvent) => {
-    // enter activates person-card
+    const personEl = this.renderRoot.querySelector<HTMLElement>('.person-root');
+    // enter activates and focuses on person-card
     if (e) {
       if (e.key === 'Enter') {
         this.showPersonCard();
+        const flyout = this.flyout;
+        if (flyout?.isOpen) {
+          this._keyBoardFocus = debounce(() => {
+            const personCardEl = flyout.querySelector<HTMLElement>('.mgt-person-card');
+            personCardEl.setAttribute('tabindex', '0');
+            personCardEl.focus();
+          }, 500);
+          this._keyBoardFocus();
+        }
+        personEl.blur();
+      }
+      if (this.personCardInteraction !== 'none') {
+        if (e.key === 'Escape' && personEl) {
+          this.hidePersonCard();
+          personEl.focus();
+        }
       }
     }
   };

diff --git a/stories/components/person/person.html.stories.js b/stories/components/person/person.html.stories.js
@@ -112,39 +112,24 @@ export const RTL = () => html`
 
 export const personVertical = () => html`
 
-<div class="row">
-  <mgt-person person-query="me" class="example" vertical-layout view="oneline" person-card="hover"></mgt-person>
-</div>
-<div class="row">
-  <mgt-person person-query="me" class="example" vertical-layout view="twolines" person-card="hover"></mgt-person>
-</div>
-<div class="row">
-  <mgt-person person-query="me" class="example" vertical-layout view="threelines" class="example"></mgt-person>
-</div>
-<div class="row">
-  <mgt-person person-query="me" class="example" vertical-layout view="fourlines" class="example"></mgt-person>
-</div>
+
+<mgt-person person-query="me" class="example" vertical-layout view="oneline" person-card="hover"></mgt-person>
+<mgt-person person-query="me" class="example" vertical-layout view="twolines" person-card="hover"></mgt-person>
+<mgt-person person-query="me" class="example" vertical-layout view="threelines"></mgt-person>
+<mgt-person person-query="me" class="example" vertical-layout view="fourlines"></mgt-person>
 
 <!-- With Presence; Check JS tab -->
 
-<div class="row">
-  <mgt-person person-query="me" class="example" vertical-layout id="online" show-presence view="oneline" person-card="hover"></mgt-person>
-</div>
-<div class="row">
-  <mgt-person person-query="me" class="example" vertical-layout id="online2" show-presence view="twolines" person-card="hover"></mgt-person>
-</div>
-<div class="row">
-  <mgt-person person-query="me" class="example" vertical-layout id="online3" show-presence view="threelines" class="example"></mgt-person>
-</div>
-<div class="row">
-  <mgt-person person-query="me" class="example" vertical-layout id="online4" show-presence view="fourlines" class="example"></mgt-person>
-</div>
+<mgt-person person-query="me" class="example" vertical-layout id="online" show-presence view="oneline" person-card="hover"></mgt-person>
+<mgt-person person-query="me" class="example" vertical-layout id="online2" show-presence view="twolines" person-card="hover"></mgt-person>
+<mgt-person person-query="me" class="example" vertical-layout id="online3" show-presence view="threelines"></mgt-person>
+<mgt-person person-query="me" class="example" vertical-layout id="online4" show-presence view="fourlines"></mgt-person>
 
 <!-- Person unauthenticated vertical layout-->
-<div class="row">
-	<mgt-person person-query="mbowen" vertical-layout view="twolines" fallback-details='{"mail":"MeganB@M365x214355.onmicrosoft.com"}'>
-	</mgt-person>
-</div>
+
+<mgt-person person-query="mbowen" vertical-layout view="twolines"
+fallback-details='{"mail":"MeganB@M365x214355.onmicrosoft.com"}'>
+</mgt-person>
 
 <script>
             const online = {